Improve loading UX when columns are fetched dynamically

[aarjithn]

Hi,

The examples currently have column definitions within component, but in many real world applications, columns too get loaded via API.

This is the current behaviour by default, initial state of empty array which gets replaced with columns on load

const [columns, setColumns] = useState<MRT_ColumnDef<User>[]>([]);

This could be made significantly better with some hacky initial state when you know a rough number of columns to be expected.

  const [columns, setColumns] = useState<MRT_ColumnDef<User>[]>(
    [{header: ' '}, {header: '  '}, {header: '   '}, {header: '    '}]
  );

I have made a sandbox as a demo: https://stackblitz.com/edit/mrt-loading-ux?file=src%2FTS.tsx

Would be great to have some sort of official support to render a given number of columns, with a skeleton in column header cell while columns are loading.

Something like array of X nulls as initial state, and in that case show X columns with skeletons in header.

What do you think?

[KevinVandy]

fyi, there's a dedicated dynamic columns example https://www.material-react-table.com/docs/examples/dynamic-columns

[aarjithn]

Oops sorry I missed that. Since the columns load fast in that example it doesn't look bad.
Also it uses react query so only issue is first time load - toggling between tabs don't make it noticeable.

If there is a delay though, maybe there is scope to make the loading state better?