[data grid] Implement Row pinning

[AllanRaf]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Hello,

I am trying to create a table with <DataGrid>. It has nice built in sorting functions which I like using. I also add an extra row to the bottom of the table which sums up the total of each column. However, this row containing totals is also sortable. Is there an easy way to stop this row being part of the sort process and keep it at the bottom of the grid?

Benchmark

• https://www.telerik.com/kendo-react-ui/components/grid/rows/row-pin/
• https://ag-grid.com/javascript-grid/row-pinning/
• http://schrodinger.github.io/fixed-data-table-2/example-fixed-rows.html
• https://ej2.syncfusion.com/react/demos/#/material/grid/frozen-rows
• http://tabulator.info/examples/4.5?#frozen-row
• https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-pinning

Requests

• https://mui.zendesk.com/agent/tickets/981

[oliviertassinari]

@AllanRaf Thanks for the request. I have updated your issue to reflect a more generic feature that we might want to build: row pinning.

For now, a workaround is to render the extra row outside of the viewport and listen to the columnResize event.

[AllanRaf]

@oliviertassinari Thank you for your reply. I now render this row outside of the DataGrid component. However, is there a simple way to ensure that my extra row and DataGrid's rows have the same styles? I have been trying to override DataGrid styles but can't get the look quite right.

[oliviertassinari]

@AllanRaf You could try to use the TableCell component as we aim for the style to match

[kh-mubashar]

@oliviertassinari hi is this feature implemented as i have the same issue and target to implement row pinning but could find anyway around

[Eduard-Benedic]

I had the same issue as @kh-mubashar . It would be a really nice feature to have.

[socramm9]

@AllanRaf Thanks for the request. I have updated your issue to reflect a more generic feature that we might want to build: row pinning.

For now, a workaround is to render the extra row outside of the viewport and listen to the columnResize event.

I used a similar Approach to display a Footer/Summary row at the bottom like the Header row in v4, and it worked fine. But for v5 whit column pinning it seems to be a bit harder to implement.

I am not sure if I would call Row pinning and a footer row the same thing, but with a pinned Row it sure would be possible to render something similar to the FluentUI Footer as benchmark

https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/customfooter

https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane

If there is an easy solution on how to create a Footer row that works with Column pinning. Please let me know :)

For now, I will just let the column pinning feature disabled for my grid

[michael-land]

I'm also waiting on this feature and column group to fully migrate to DataGrid.

Most users doesn't need these fancy aggregation functionality that MUI team focusing right now (and they are hard to implement) , but column group and row pin present in every modern table :-)

[Caecilius21]

Waiting passionately for this feature!
Great work guys!

[gvalluis]

Impressive, guys. Thanks for this amazing work!

Waiting anxiously for this new feature!

[Suchita2786]

I am facing the same issue, Need row pinning feature to apply summary row as a last row of the DataGridPro which will be excluded from sorting and filtering . Is there any word around for it?

[flaviendelangle]

We are currently focusing on other feature and did not plan to work on this one yet.

What you are describing looks a lot like #213. For me the row pinning is only a way to exclude a row from the scroll behavior, like for the column pinning. But if the content of this row should be some total / average / other summary method of the other rows, then it look like aggregation.
Of course we will have to make sure that aggregated rows can be pinned just like regular rows.

Right now, you can probably fake some simple aggregation by creating dummy rows and using heavily valueGetter to decide if your current row is a regular one or a dummy one.
But I don't think it's very viable.
I think we will start working on Aggregation next quarter. We did not plan Q2 yet so don't take my word for it, but it's a good candidate.

For row pinning, as it is highly linked to the virtualization, it can't be cleanly achieved on your side.

[socramm9]

For row pinning, as it is highly linked to the virtualization, it can't be cleanly achieved on your side.

I think what most of us want is not row pinning directly. If I understand it correctly whit row pinning rows get pinned and unpinned based of the scroll position. I can see that this is really hard to implement with virtualization.

But for the most use Cases I think it would be enough to have an Aggregated/Summary/Footer row outside of the grid virtualization.

I solved my Issue with a custom Footer that render some cells with the same Style als Header cells. But unfortunately I had to disable Column pinning for my solution to work correctly.

[Frikster]

For now, a workaround is to render the extra row outside of the viewport and listen to the columnResize event.

@oliviertassinari, could you give more information on how to achieve this? I don't understand how listening to the columnResize event has anything to do with row pinning. I need row pinning quite urgently so further insight very appreciated.

[Suchita2786]

Hello,

I am trying to add a summary row as a last row in the data grid of each page and it can scroll horizontally with all other rows. Getting the total for each column from API. But it should be available on every page as a last row.
Something like this

Is there any way to achieve this?

[socramm9]

When this is Implemented it would maybe nice to also have an automatic pining and an unpining for columns.

Sorry this is the best Example I could come up with
https://codesandbox.io/s/pinnedsubheaderlist-material-demo-forked-dbmpqb

[kanonirbrest]

also need summary column feature or at least row pinning option. How soon are you going to implement it?

[cherniavskii]

Hey @kanonirbrest
What do you mean by "summary column feature"?