[DataGridPro] Implement Row pinning

[cherniavskii]

Closes #1251

Preview: https://deploy-preview-4863--material-ui-x.netlify.app/x/react-data-grid/rows/#row-pinning
Row pinning + aggregation: https://deploy-preview-4863--material-ui-x.netlify.app/x/react-data-grid/aggregation-next/

TODO

• add more unit tests
• warn if pinned row id is already present in rows prop No need for it, since I made it work with duplicated rows in both rows and pinnedRows: mui/mui-x@4083dd4 (#4863)
• extract pinned rows editing to separate issue [data grid] Support pinned rows editing #5591
• mark as experimental
• make sure [DataGrid] Fix dimensions computation with autoHeight and scroll x #5401 works with pinned rows

API

• option A - current approach

  pinnedRows?: { top?: GridRowModel[]; bottom?: GridRowModel[] };

  Pros:

  • Works with server-side pagination - since pinned rows are not included in the rows prop and provided separately.
  • Works with row grouping - pinned rows will not be included in groups

  Cons:

  • more overhead in simple scenarios. For example, when users want to statically pin some rows from the dataset they have to manipulate the data:

  const rows = [/* ... */];
  const pinnedRowsTop = rows.find(row => row.isPinned);
  const pinnedRows = { top: pinnedRowsTop };

• option B

  pinnedRows?: { top?: GridRowId[]; bottom?: GridRowId[] };

  Pros:

  • simpler API

  Cons:

  • Doesn't work with server-side pagination

Layout

Row pinning should work with column pinning, so I've implemented the following layout:

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	273	488.9	379.1	367.58	84.645
Sort 100k rows	ms	541.4	1,087.5	541.4	839.38	202.775
Select 100k rows	ms	195.3	336	221.2	236.5	50.897
Deselect 100k rows	ms	136.2	314.9	153.4	206.1	74.106

Generated by 🚫 dangerJS against 66ae329

[m4theushw]

Looks good! A topic for discussion. Should we sum the pinned rows when displaying the total row count in the footer? Technically they are rows.

[cherniavskii]

@m4theushw

Should we sum the pinned rows when displaying the total row count in the footer? Technically they are rows.

I'm not sure, there's few things to consider:

1. It depends on the data you put into pinned rows. If pinned rows are of the same type as rest of the rows - then it would make sense to include them in total row count, but If pinned rows are more like headers/footers with additional info - not necessarily.
2. Pagination - consider 18 rows + 2 pinned rows with a page size of 5. Since pinned rows are visible on each page, it's hard to represent rows count that won't be misleading, for example:
   • page 1: 1–7 of 20 - rows 1-5 + 2 pinned
   • page 2: 6-12 of 20 - rows 6-10 + 2 pinned
   • page 3: 11-17 of 20 - rows 11-15 + 2 pinned
   • page 4: 16-20 of 20 - rows 16-18 + 2 pinned
     Also, it's impossible to achieve behavior like this using TablePagination component.
     AG grid for example doesn't include pinned rows: https://plnkr.co/edit/XeF6TpAEZ3g7lY7K?open=main.js&preview

I would rather not include pinned rows in the row count. We can reconsider this once we get some feedback on it.
What do you think?

[joserodolfofreitas]

I think the documentation feels a tad too busy now with the multiple callouts.
Perhaps we can spread them along the row pinning documentation.

[joserodolfofreitas]

Again, great work, @cherniavskii!
Glad to see this live soon.

Just a couple last minor suggestions:
We're missing to add the feature at our features list on overview

[m4theushw]

I would rather not include pinned rows in the row count. We can reconsider this once we get some feedback on it.
What do you think?

No problem in waiting for feedback from the community, since the feature is experimental. About including the pinned rows when pagination is enabled, yeah it would be misleading. But in aria-rowcount I don't know what is the best approach. AG Grid includes the header row in it, we don't. Maybe they should also include header row + pinned rows and we follow the same.