Can you explain what a sticky header is? In MUI data grid tables, the headers are sticky by default. However, you need to ensure that the parent of the data grid has a fixed height in order to fully utilize this feature. Make sure to remove the autoHeight prop as well. Here's an example:
<Box sx={{ height: 400 }}>
<DataGrid ...props />
<Box>
The DataGrid normally adjusts its height based on its parent container.
If you set the autoHeight prop, the table will stretch according to the number of rows it contains.
However, this will disable the sticky header functionality.
Check out a functioning version of your sandbox here:
https://codesandbox.io/s/relaxed-frost-13y5td?file=/src/PortfolioPage/PortfolioPage.jsx:2525-2528
I must address something that I neglected to mention last time because I didn't want to bother you.
Having three separate tables like that is not a good practice.
If someone sorts table A in descending order instead of ascending, the data displayed in tables B and C will be misleading.
Similarly, if someone filters table B for a column containing the letter "H," the entire table's order will change, giving false information to the reader while keeping the other tables unchanged.
You have the option to create your own data grid, upgrade to MUI X premium, or use a different datagrid component from NPM.
Otherwise, you'll have to handle these challenges and risk encountering unforeseen bugs later on.
Think about it - there's no real reason to split the table this way. Keep it simple and efficient, as people value function over design aesthetics.