Ask for supporting colSpan and rowSpan in MRT

[bradley329]

First if all, I really enjoyed using the MRT package, this package is amazing!

I recently get stuck in making the first column span multiple columns, like this:

I checked the doc, seems that this is not supported yet, and I did find some previous feature asks for this, looks like it's not trivial to implement due to the limitation of TanStack? Since I saw the Material UI supports it, I really would like to see this as well in the MRT!

Please forgive me that I am asking this feature support again here, as I don't want to switch back to Material UI as we would lose the cool search/filter from TanStack.

[KevinVandy]

I might take a crack at seeing if something can be improved here

[bradley329]

Thanks a lot! I think this is a great feature and I believe people would love it once it gets rolled out!
Would you mind providing an update on the potential inclusion of this feature in an upcoming version?

[KevinVandy]

I looked at it a few weeks ago, but didn't see an easy way to implement it. I'm not really working on this, but am open to ideas.

[bradley329]

thanks! i think the table in MRT is implementing data grid from here: https://mui.com/x/react-data-grid/column-spanning/
but i believe it's not as easy as wrapping and calling the colSpan if we want MRT to support it? May I ask what is the major obstacles?

[szduda]

Hey, I'm using Mantine not Material table, but hopefully this is achievable in both.
I needed to add colSpan to some of the sub row cols, that's what I did.

In our MRT wrapper component I added a prop

subRowColSpan?: Record<string, number>;
// example values; keys are column ids, values are desired colSpans with 0 meaning we hide the column
subRowColSpan={{ startTime: 0, startDate: 0, title: 3 }}

then added these lines to the table config object

const subRowHiddenCols = Object.keys(subRowColSpan).filter(
  (colId) => subRowColSpan[colId] === 0,
);

// MRT config
mantineTableBodyCellProps: ({ row, cell }) => ({
  colSpan:
    cell.column.id in subRowColSpan && row.parentId
      ? subRowColSpan[cell.column.id]
      : 1,
  style: 
    row.parentId && subRowHiddenCols.includes(cell.column.id) && {
      display: "none",
    },
}),

The final effect