Sticky footer (bottom page) & Hide expand subrows icon (if no children)

[mkosir]

Hey 👋
before I ask my question, thank you for this awesome library 🚀

I'm wondering if there is possibility to push footer to the bottom of its available container (something as expanding table container height 100%)?

Currently when rows are not possible to expand anymore (array length is 0), icon is greyed out, is there a way to hide an icon instead?

[KevinVandy]

You can use the muiExpandButtonProps prop to add your own CSS to those expand buttons

Something like:

<MaterialReactTable 
  //...
  muiExpandButtonProps={({ row }) => ({
     sx: {
      display: row.subrows?.length ? 'flex' : 'none'
    }
  })
/>

As for the footer, have you seen the enableStickyFooter prop? Docs here https://www.material-react-table.com/docs/guides/sticky-header

[tluyben]

enableStickyFooter works to stick the footer to the last row, but if I have, for instance, room for 15+ rows, but only have 3, the footer is stuck to row 3 instead of to the bottom of the table as I would expect? The sandbox code on the site works like that too; is there any way to make it stick to the bottom of the table always, regardless of the number of actual rows instead to the last row?

[mkosir]

You can use the muiExpandButtonProps prop to add your own CSS to those expand buttons

Thank you, this props works like a charm 👍

As for the footer, have you seen the enableStickyFooter prop? Docs here https://www.material-react-table.com/docs/guides/sticky-header

I did enable enableStickyFooter, but examples are using maxHeight. If maxHeight gets disabled and minHeight set to some higher value, sticky footer gets positioned after the last table row (not at the pagination component).

[KevinVandy]

I think you could take a similar approach with muiTableFooterProps sx to add some position: absolute css to force it to the bottom. It is sticky by default.