T
TanStack•3y ago
like-gold

dynamic skeleton display on loading state

Hey guys, Does anyone have a workaround for a custom skeleton based on the content of the column? For example, I want to have an Avatar skeleton on the first column since it renders an Avatar component after a successful fetch and a single-line skeleton for the second column, etc. I have a very simple Skeleton component right now that renders the same skeleton for every column. Wondering if anyone has any ideas, please. I appreciate it. Thanks
1 Reply
like-gold
like-goldOP•3y ago
approach: https://github.com/TanStack/table/discussions/2386#discussioncomment-23029 a really good reference above also make sure to use cell:() => <Component/> instead of Cell since it was answered a long time ago here's the gist to apply custom skeleton for each column , you should be able to access your ColumnDef upon iterating into your columns and should render the desired UI, below is just a basic example and not that crazy but should look the most of it 
const columnsMemo = useMemo(
    () =>
      isLoading
        ? columns.map((column) => ({
            ...column,
            cell: () => {column.header === 'YOUR_DESIRED_COLUMN' ? <SkeletonAvatar/> : <SkeletonDefault/> },
          }))
        : columns,
    [isLoading, columns]
  );
const columnsMemo = useMemo(
    () =>
      isLoading
        ? columns.map((column) => ({
            ...column,
            cell: () => {column.header === 'YOUR_DESIRED_COLUMN' ? <SkeletonAvatar/> : <SkeletonDefault/> },
          }))
        : columns,
    [isLoading, columns]
  );
GitHub
Display skeleton rows during initial load · TanStack table · Discus...
Hi! I want to display an arbitrary number of rows whilst fetching the first page. Here's what I got: Visually it is what I want. But the code doesn't seem any good. {loading && Arra...

Did you find this page helpful?