[data grid] Implement Row spanning

[oliviertassinari]

TODO

• [ ] Clarify the scope with @joserodolfofreitas

Benchmarks

• https://www.telerik.com/kendo-react-ui/components/knowledge-base/merge-row-in-the-grid/

• https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/multi-row-layout

• https://ag-grid.com/javascript-grid-row-spanning/

• https://ej2.syncfusion.com/react/demos/#/material/grid/row-spanning

• https://ant.design/components/table/#components-table-demo-colspan-rowspan

User requests

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

[reginaldosantarosa]

yes

[daniel-refahi]

yes, please. such a useful feature

[azeem-sarwar]

Yes please we need this

[olavfosse]

(When) will this be implemented?

[olavfosse]

Also, will this be "Pro" or "Premium" feature?

[flaviendelangle]

Also, will this be "Pro" or "Premium" feature?

According to our Pricing page it will be available on all plans, so open source.

(When) will this be implemented?

We did not plan this feature yet. The Column Spanning has recently been released by the way.

[stellaliao01]

would be a very useful feature! upvote :D

[fpiaggio-ms]

This feature will be very useful! upvote!

[Bindeep]

Will be very useful! upvote!

[flaviendelangle]

I would be interested to have a few examples of the use cases around row spanning

[ayaviri]

I would be interested to have a few examples of the use cases around row spanning

i might have misunderstood the question, but one use case be to prevent the need for tool tip hovers such as these, which aren't accessible to keyboard users

[flaviendelangle]

But in this example, there is no cell that spans across several rows. Like on this example Do we agree that the spanning would not only occur on interaction but would always take place ?

Otherwise, you are probably looking for variable row height or dynamic row height

[BatgerelBill]

This feature will be very useful! upvote!

[stbaione]

Any updates on this feature? Would be very useful and is a pretty common table feature

[Rearden21M]

Upvoted — I needed this feature so I searched for it, only to find out that it's a long-awaited feature that has been "coming Soon™" for over 2 years. 🥲

[miguelpalacio]

@flaviendelangle, I believe this is a use case:

You guys actually have a very similar example for column spanning in your docs.

[dilipcm]

yes please add it soon..............................

[Crhist0]

Hello, I'm also waiting for this. We already use the pro version and this would be essential to our application.

[straps]

Essential feature, upvote

[BrianSparr]

this is needed ... upvote

[hyukkyukang]

Strongly desired, upvote!

[mamodev]

This feature will be very useful! upvote!

[Di-Nazavr]

necessary feature! upvote!

[drjele]

upvote

[vcarazza]

upvote!!

[aneeq-ur-rehman4]

Will be very useful! upvote!

[renatodts]

upvote

[rajat153]

we need row spanning

[vinnn]

please row spanning would be great!

[Crhist0]

still waiting for it, would be a nice addition 🙏😊

[Filipe-Bacof]

i'm still waiting for it

[stic-lab]

When will this feature be available, please? I am looking for a solution for spanning grids in a row but the only way I can do it, for now, is to use CSS. But I think it will be good if this feature is natively supported by MUI X.

[megaacheyounes]

Upvote

[nick-winter-vector]

Upvote

[Newbeecoderreal]

We need this. Upvote for this <3

[vpwang]

upvote

[sharmishthavirgo]

use CSS.

do you have solution that so we can look as we are also having trouble implementing on data-grid

[Rajesh-shetty]

any solution in css to make row span in datagrid

[stic-lab]

any solution in css to make row span in datagrid

Hey @Rajesh-shetty, if you want to do this in css, you can use library such tailwindcss or also you can ispire from tailwind and write your own css.

[MarioStipetic]

Upvote!

[jmelendez-cbs]

upvote

[oliviertassinari]

Does someone have another example (the first one being https://github.com/mui/mui-x/issues/207#issuecomment-1246078217) of how this feature would be used? This could help us once we need to create a demo in the docs. Thanks

[cbichis]

Does someone have another example (the first one being #207 (comment)) of how this feature would be used? This could help us once we need to create a demo in the docs. Thanks

I just have a case, 3 sales (orders within online shop) with only one invoice summarizing all these sales (and only one payment needed of course). So within data-grid is impossible to represent this unless you go with grouping or something else, which would be too complex for something simple to represent.

[Luv-m]

Hello :), Is there any update about when this feature will be ready? Thanks !

[rajat153]

how to pass a Total sum row at bottom of material UI datagrid table without purchase premium plan??

[fleischman718]

Hi,

Any plans on implementing this?

[pikitgb]

any updates on this ?

[Legys]

Does someone have another example (the first one being https://github.com/mui/mui-x/issues/207#issuecomment-1246078217) of how this feature would be used? This could help us once we need to create a demo in the docs. Thanks

We need this as we have dynamic cell content. In our case, one of the columns may have some value that we should represent in 2 rows visually grouped by one. Let's say we have a column that is showing items, but in a particular case, the column may represent divided parts of the data, i.e. it has sub-rows for showing a couple of statuses at the same time, for example.

[Volodymyr1Korol]

Hello from Ukraine! Upvoting this beutifull feature! Be safe and happy ;)

[ganeshkarthik-natarajan]

Hi Team, Upvoting this feature.