CODEWITHSUNDEEP
javascriptcssreactjsdatatablesmaterial-ui
voidranjer
voidranjer

Reputation: 51

How to set height to fill parent div dynamically with sticky header in mui-datatables

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

Answers (1)

Latha Nithin
Latha Nithin

Reputation: 41

Try to add mui-datatables predefined prop called tableBodyMaxHeight and give css property overflow-y: auto to the tablebody

Upvotes: 1

Related Questions