Here are the settings I've configured for my mui-datatables:
const options = {
responsive: "standard",
pagination: false,
tableBodyHeight: '80vh',
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
I wanted the Table's Body to dynamically expand and fill the remaining height in its parent div. Since I have pagination: false, all content will be visible and scrollable while keeping the header fixed (sticky header).
You can see how it should look like in this image: Image Link
I attempted to style the Table using flexGrow: 1, but I'm unsure where to apply this. The mui-datatables documentation doesn't provide a list of child components within <MUIDataTable /> as compared to the original Material-UI Tables.
As a temporary fix, I set tableBodyHeight: '80vh', which is not ideal because the table overflows when the parent div height changes at different breakpoints.