Managing skeleton in each row

[Cassage]

mb, previous PR was a test version and I accidently used it instead of this one

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
material-react-table	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 29, 2023 1:05am
material-react-table-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 29, 2023 1:05am

[KevinVandy]

why not just add a display:none or something to muiTableBodyCellSkeletonProps.sx?

[Cassage]

why not just add a display:none or something to muiTableBodyCellSkeletonProps.sx?

welp, that's a way) honestly, didn't think of it, thank you

[Cassage]

why not just add a display:none or something to muiTableBodyCellSkeletonProps.sx?

but actually I'm not sure if table will show data if I put display: none on skeleton because judging from your code you show either skeleton or value of cell, not both

[Cassage]

so basically this PR makes some sense

[KevinVandy]

so basically this PR makes some sense

What are you trying to accomplish? Just to show less rows? The pagination page size handles how many rows show

[Cassage]

so basically this PR makes some sense

What are you trying to accomplish? Just to show less rows? The pagination page size handles how many rows show

No, I have such case - I am loading data bit by bit but I also use rowVirtualization since data is huge but I can't show skeleton for few rows that are currently loading because MaterialReactTable can't handle that so I have created this PR

[KevinVandy]

Maybe you want to just use the showProgressBars state instead of isLoading? You should only use isLoading when no data has been fetched yet.

[Cassage]

Maybe you want to just use the showProgressBars state instead of isLoading? You should only use isLoading when no data has been fetched yet.

The problem is the fact that I need to show all data but part of that data should be with skeletons (because it's still loading), otherwise my data would look ugly (simple empty cells) so using showProgressBars won't do the work (also I don't use isLoading because it's making entire table filled with skeletons)

[Cassage]

Probably you don't really get the Idea since my English is not really good - lazy loading in rowVirtualization, I show all data but load it slowly so user can work with part of it, because he might not need entire data at the moment (plus loading entire data takes a lot of time because it's over 100k objects), so I need to show skeletons for everything except loaded data

[KevinVandy]

I get that concept, but you can do it without showing skeletons like this example https://www.material-react-table.com/docs/examples/infinite-scrolling

[KevinVandy]

ok I think I got something that will make us both happy. I want to avoid adding hidden flags like showSkeletons on the row. But in order to solve your problem, I may be able to just add a check to make sure that the cell.getValue() is null (The filled in values from isLoading) in order to render a skeleton.

[nichita-pasecinic]

@KevinVandy & @Cassage The skeleton is not shown at all when using enableExpanding

Try:

<MaterialReactTable
        columns={[]}
        data={[]}
        state={{
          isLoading: true
        }}
        enableExpanding
      />