[DataGrid] Column spanning

[cherniavskii]

Closes #192

Docs: https://deploy-preview-4020--material-ui-x.netlify.app/x/react-data-grid/columns/#column-spanning
Storybook demo: https://deploy-preview-4020--material-ui-x.netlify.app/storybook/?path=/story/datagridpro-test-columns--column-spanning

Changelog

• 🎁 Add support for Column spanning ([DataGrid] Column spanning #4020) @cherniavskii

  

TODO:

• Add release notes
• Mark Column Spanning as completed in https://mui.com/pricing/ after column spanning is released - [website] Mark DataGrid Column spanning done on Pricing page material-ui#32305
• Fix flickering of last columns in row virtualization story
• Add example to docs
• More docs
• Update docs warning to mention column hiding
• Unit test: colSpan + column resize
• Unit test: colSpan + pagination
• Update api docs (blocked by [core] yarn docs:api ignores some interfaces #4024)
• Combinations with other features:
  • colSpan + column virtualization (BLOCKER) - demo showing the issue
    Check if this can be solved by columnThreshold={0}
  • colSpan + CSV export - extracted to separate issue [data-grid] Support column spanning in CSV export #4213
  • colSpan + print export
  • colSpan + column resize
  • colSpan + hidden columns
  • colSpan + column reorder
  • colSpan + column pinning
  • colSpan + keyboard navigation
  • colSpan + row virtualization
  • colSpan + renderCell / renderEditCell
  • colSpan + cell editing
• Accessibility (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan)
• colSpan number signature
• colSpan function signature

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	247	655.8	344.5	420.72	174.566
Sort 100k rows	ms	490.3	985.6	797.5	741.26	208.086
Select 100k rows	ms	148	199.6	181.6	176.58	17.766
Deselect 100k rows	ms	102.9	292.4	149.2	174.64	67.802

Generated by 🚫 dangerJS against 919cffb

[cherniavskii]

Check if this can be solved by columnThreshold={0}.

Changing columnThreshold doesn't help, but disabling column virtualization solves the issue (columnBuffer={columns.length}).
Not sure if it is acceptable solution for now

[m4theushw]

I've one proposal to add support for column virtualization.

First, open https://codesandbox.io/s/columnspanning-material-demo-forked-zcu0n0 and scroll horizontally 201px:

document.querySelector('.MuiDataGrid-virtualScroller').scrollLeft = 201

Since the Quantity column is not fully visible, renderContext.firstColumnIndex=2 and firstColumnToRender=1 (I modified the buffer). In this position, only the non-spanned Quantity cells are rendered. After the last item, we should see a yellow background from the spanned Subtotal but we don't see it. It's not rendered because, in the current implementation, the first cell of a spanned column takes the width necessary for the other cells and if that cell is not rendered the width is not taken.

To solve that we can render the first cell of the spanned column. The proposal is basically to modify firstColumnToRender in a way where if its value touches a cell from a spanned column we decrease it until no cell in the current firstColumnToRender is coming from a spanned column.

In pseudo-code:

firstColumnToRender = getFirstColumnToRender(scrollLeft, columnBuffer) // we already have this

while firstColumnToRender > 0 and willTouchSpannedColumn(firstColumnToRender, scrollLeft)
  firstColumnToRender--

function willTouchSpannedColumn(columnIndex, scrollLeft)
  for i=firstRowToRender to lastRowToRender
    // gets the left position of the cell at x=columnIndex and y=i
    // needs to consider that it may be spanned by other columns
    left=columnPositions[columnIndex - getSpannedBy(columnIndex, i)]
    if left < scrollLeft
      return true
  return false

[joserodolfofreitas]

Nice job with the feature!
I loved the example exploring the function signature with the week calendar.

Leaving just a couple of minor tweaks on the docs page.

[m4theushw]

I think it's good enough to be released. Later https://mui.com/x/react-data-grid/group-pivot/#row-grouping can use column spanning in the grouping columns.

[cherniavskii]

@m4theushw

Later mui.com/x/react-data-grid/group-pivot/#row-grouping can use column spanning in the grouping columns.

Where exactly column spanning may be useful?

[m4theushw]

Where exactly column spanning may be useful?

The grouping column could span the entire row. Currently, we cut the text.

[flaviendelangle]

With aggregation the other cells can contain data (even without aggregation, users can populate them if they want, but it's probably not very frequent)