T
TanStack•3y ago
extended-salmon

How to make the width and layout of a table when loading data with skeletons?

How when using TanStack (React) Table can I load data using skeleton loaders, but have it so that the width of the columns and the layout of the table is the same whether it has the real data populating it, or the skeleton? I want it to be like this (img 1) when the skeletons are being used, but currently it's like this (img 2) - and I have no idea how to make it the same width 🤔 Any help would be very much appreciated! Thanks a bunch.
No description
No description
4 Replies
extended-salmon
extended-salmonOP•3y ago
And this is the start of my component in which I take in data etc and map out my Skeleton components - hope it's beneficial for support :) 
export function DataTable<TData, TValue>({ columns, data, loading }: DataTableProps<TData, TValue>) {
  // TODO: Add infinite scrolling

  const tableData = useMemo(() => (loading ? Array(30).fill({}) : data), [loading, data]);

  const tableColumns = useMemo(
    () =>
      loading
        ? columns.map((column) => ({
            ...column,
            cell: () => (
              <div className={"p-4"}>
                <Skeleton className={"h-4 w-full"} />
              </div>
            ),
          }))
        : columns,
    [loading, columns],
  );
export function DataTable<TData, TValue>({ columns, data, loading }: DataTableProps<TData, TValue>) {
  // TODO: Add infinite scrolling

  const tableData = useMemo(() => (loading ? Array(30).fill({}) : data), [loading, data]);

  const tableColumns = useMemo(
    () =>
      loading
        ? columns.map((column) => ({
            ...column,
            cell: () => (
              <div className={"p-4"}>
                <Skeleton className={"h-4 w-full"} />
              </div>
            ),
          }))
        : columns,
    [loading, columns],
  );
@KevinVandy Would you know? Sorry for pinging you, but I have a deadline at work and really cannot figure this out :( So very much so apologies @aniallator8 I see you answering other forum questions. Could you possibly lend a hand? Sorry for the ping, also 😂
like-gold
like-gold•3y ago
This looks like a logic problem. Ask chatgpt 🙂 you can size your skeletons by column id, or make individual column definitions instead of columns.map when defining the cell renderer You can make a lookup table that says sth like 
const skeletonMap = { timeStamp: <Skeleton xs />, category: <Skeleton xs />, message: <Skeleton xl /> etc } as const;
const skeletonMap = { timeStamp: <Skeleton xs />, category: <Skeleton xs />, message: <Skeleton xl /> etc } as const;
and then in the cell renderer you can render skeletonMap[column.id as keyof typeof skeletonMap] I honestly mean you should use chatgpt btw. It’s a great tool for precisely these use cases, where you can formulate the issue in words and have an understanding of what you actually want. Much better than pinging staff 😉
stormy-gold
stormy-gold•3y ago
Your problem is really a data one. The data itself will dictate how the table will render and that would also potentially be different between browsers in how they render the data in a table. The fact that you’re using a skeleton would imply you don’t have said data on load, therefore I’d say this is practically a pointless avenue to go down. If you do have a consistent pattern though you’d need to give your skeleton a pixel width. The w-full you are using is a percentage width and will only use up the maximum space allowed defined by the browser. You’ll need to override this with a hard value in pixels.
extended-salmon
extended-salmonOP•3y ago
@Attila Fixed it a while back by just reading the value from the column config, and using a fixed table config. Thanks anyway!

Did you find this page helpful?