Reputation: 51
This is my mui-datatables options:
const options = {
responsive: "standard",
pagination: false,
tableBodyHeight: '80vh',
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
What I wanted to achieve was to get the Table's Body to automatically/dynamically expand to fill the remaining height in the parent's div. Note that I have pagination: false
, so everything will be shown and scrollable while the header locks in place (sticky header).
See this image: Image Link
I have tried style the Table with flexGrow: 1
but I don't know where to put it. The mui-datatables docs doesn't have a list of children components in <MUIDataTable />
unlike if I were using the original Material-UI Tables.
So now my current janky solution is to set tableBodyHeight: '80vh'
which is terrible because at different breakpoints, the parent div height changes, and the table overflows.
Upvotes: 1
Views: 1437
Reputation: 41
Try to add mui-datatables predefined prop called tableBodyMaxHeight
and give css property overflow-y: auto
to the tablebody
Upvotes: 1