Table with fixed header inside a dynamic MUI Box justifies the content to fill the height

[proddy]

I'm trying to have a table be displayed in a specific area of the screen based on the window dimensions. I'm using fixedHeader to make the Header row sticky to bring up the scroll bar when the view is full. This works great when there is more data to scroll in the window, but with less data it will justify the rows to fill the area.

I've created a small test to explain it. https://codesandbox.io/s/fixedheader-react-table-library-te7mlh?file=/src/App.tsx

When NUM_DATA is 4 it will show:

(the blue is the background of the window)

and when NUM_DATA 40 it will render correctly like:

I think this piece of code in the library's index.tsx which is overriding the parent object's height.

const FULL_HEIGHT_THEME = {
  Table: `
    height: 100%;
  `,
};

Is there any way to override this somehow?

Or a way to create the fixed header without using the library feature?

Thanks!

[proddy]

I fixed it following issue #102 and adding height and max-height to the table CSS theme:

      Table: `
        --data-table-library_grid-template-columns: 300px 150px 40px;
        height: auto;
        max-height: 100%;
      `,