[DataGridPro] Footer in "grid" zone/container

[clmntrss]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Hello, I'm currently using the Datagrid on a project and I use a custom Footer to get total of each columns if its a number or whatever. The issue i've came when the minimal size of the table is bigger than the current window width. I've 2 different scrollbar

I've been able to "fix" this issue with but it's breaks the flex ability of the grid and create sometime kind of infinite resizing on certain devices

minWidth: 'fit-content',

Examples 🌈

Initial behavior

With custom fix

Motivation 🔦

I would be able to put the footer in the data grid window container or to have a synced scroll between both the footer row and the grid container.

Order ID 💳 (optional)

No response

[DanailH]

Hi, @clmntrss thanks for raising this. Can you please provide the codesabdox reproduction? You can use this template https://codesandbox.io/s/material-ui-issue-next-o7xkt as a starting point.

[clmntrss]

@DanailH

You can find it here :
https://codesandbox.io/s/romantic-dijkstra-7s3o2?file=/src/Demo.tsx

I would like to add that the behavior I've in mind is more like the summary on Antd table
https://ant.design/components/table/#components-table-demo-summary

[DanailH]

Ah ok, I get it. This sounds more like a column pinning feature, no? Can you check here #193 if this matches your requirement (we didn't account for the footer to be included)?

[clmntrss]

I took a look at issue and I think it's more like Row Pinning issue and not column might be linked to #1251

OP said something that match the idea I want to realise with the footer on codesandbox
I also add an extra row to the bottom of the table which sums up the total of each column

Edit : I think this example with antd table is a bit more understandable since the link I gave mix column pinning and row

https://codesandbox.io/s/fixed-header-and-scroll-bar-with-the-page-antd-4-17-0-alpha-5-forked-g0clq?file=/index.js

[DanailH]

Ok, yes the example from Antd does look like a combination of row and column pinning.

[oliviertassinari]

I think that @clmntrss could implement this with #1251 + #192 + a custom last row's cell. I think that we could close this issue once they have landed, with a demo codesandbox to prove it's fixed.

@mui-org/x This makes me wonder, shouldn't #1251 (row pinning) be in the Pro plan? #193 (column pinning) is.

[cherniavskii]

The data grid now supports row pinning and aggregation features