Full height table support?

[ckchiu2]

Is there any built-in support for rendering the table in 100% height of the parent component?

[KevinVandy]

Yes, here are a couple examples where you can either

Give a table container a min height

<MaterialReactTable
    columns={columns}
    data={data.slice(0, 5)}
    muiTableContainerProps={{
      sx: {
        minHeight: '800px',
      },
    }}
  />

or

Make the table expand to exactly the parent div's height, though it takes a bit of calc of refs to get it right

  <div style={{ height: '700px' }}>
    <MaterialReactTable
      columns={columns}
      data={data.slice(0, 5)}
      muiTableContainerProps={({ table }) => ({
        sx: {
          height: `calc(100% - ${table.refs.topToolbarRef.current?.offsetHeight}px - ${table.refs.bottomToolbarRef.current?.offsetHeight}px)`,
        },
      })}
      muiTablePaperProps={{
        sx: {
          height: '100%',
        },
      }}
    />
  </div>

[ckchiu2]

I was expecting something like

<div style={{ height: '700px' }}>
    <MaterialReactTable
      columns={columns}
      data={data.slice(0, 5)}
      muiTablePaperProps={{
        sx: {
          height: "100%",
          display: "flex",
          flexDirection: "column",
        }
      }}
      muiTableContainerProps={{
        sx: {
          flexGrow: 1,
          height: 0,
        }
      }}
    />
  </div>

Anyway, I think I have asked the wrong question. I want to apply the above solution using so that I do not need to mess up with the default props. However, I am lacking of a way to specify the only paper component that wraps the table. I think adding a class name for the table-wrapping paper at the library level could be a good solution. What do you think?

[KevinVandy]

I still not clear on what you want to accomplish?

[ckchiu2]

I want to use the following snippet to customize the css of the table paper without messing with the sx props every time I want a full height table. Without a classname I would also override the row action menu paper style.

const theme = createTheme({
  components: {
    MuiPaper: {
      styleOverrides: {
        root: {
          "&.someclassname": {
            height: "100%",
            display: "flex",
            flexDirection: "column",
          }
        }
      }
    }
  }
})

<ThemeProvider theme={theme}>
  <MaterialReactTable 
  ...
  />
</ThemeProvider>

[zhongjiaguo001]

Followed your instructions, but it still won't work.

[zhongjiaguo001]

Resolved, after troubleshooting it's a tier problem, thanks for the example!