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

Question

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.

Answer 1

尝试添加名为tableBodyMaxHeight mui-datatables 预定义道具，并将 css 属性overflow-y: auto赋予 tablebody