fix: add colspan and rowspan support by ZehranurC · Pull Request #79 · motif-ui/motifreact

ZehranurC · 2026-06-04T06:26:05Z

Description

Add colspan and rowspan configuration to table columns with proper cell rendering and pagination safety.

Type of Change

Screenshots / Preview

Checklist

Self-reviewed, no leftover logs or debug code
Uses design tokens — no hardcoded style values
Accessible (keyboard nav, ARIA, contrast)
Tests added/updated and passing
Storybook story added/updated

How to Test

[#EDKUI-1410]

atakanbayrak · 2026-06-04T08:13:33Z

      ) : (
-        visibleRows.map((row, index) => <DataRow key={row.motifIndex} rowNumberStatic={index + 1} row={row} />)
+        visibleRows.map((row, index) => (
+          <DataRow key={row.motifIndex} rowNumberStatic={index + 1} row={row} spannedCellsMap={spannedCellsMap} />


I see that we use index + 1 each time for rowNumber, so I am wondering for example how am I going to show second row to user? For example,

I didn't manage to show Santina, Isac, Antone at the table only the first row appears.

For empty row at least filled one should match with the rowSpan I guess,

It should be fixed after my fixes, but I'm not sure because I couldn't see the full data content. Can you verify?

aktasmehmet

This is my review v1 :) There are some issues to fix. Then I'll check later.

This PR is so so so important because it directly manipulates the performance related codes of the component. We'll probably need more reviewers here.

aktasmehmet · 2026-06-08T11:30:43Z

  footer?: Footer;
  width?: string;
  filter?: boolean;
+  colSpan?: number | ((rowData: object) => number);


why need numbertype here? If it is to apply colspan for every cell, then user can easily reduce the number of colums, so I dont see a need here?

There are two different needs:

Static span (colSpan: 2) — fixed across all rows, number type is sufficient

Dynamic span (colSpan: (row) => row.merged ? 2 : 1) — varies per row, function type is required

Modifying the data is incorrect because:

Data integrity breaks (missing rows become null/undefined)

Sorting/filtering breaks

Component dataKey stops working

example

// 4 rows of data, but Department column calculates rowSpan dynamically per group const data = [ { department: "Engineering", employee: "John" }, // rowSpan: 3 { department: "Engineering", employee: "Jane" }, // (skip) { department: "Engineering", employee: "Bob" }, // (skip) { department: "Sales", employee: "Alice" } // rowSpan: 1 ]; // Halving the data makes no sense — grouping is a UI concern, not a data concern rowSpan: (row) => row.firstInGroup ? groupSizes[row.department] : 1

I dont find useful information in this answer. The example shows the usage of the function, not the number.

I wonder that, what would be the result for the code below:

<Table data={[ { name: "Alice", age: 28, group: "A" }, { name: "Bob", age: 34, group: "B" }, { name: "Charlie", age: 29, group: "A" }, { name: "Dave", age: 42, group: "B" }, ]} columns={[ { title: "Group", dataKey: "group", rowSpan: 2 }, { title: "Name", dataKey: "name" }, { title: "Age", dataKey: "age" }, ]} border="cellBorders" />

Afaik, this would render only Alice and Charline lines, right? So this will show 1st row and 3rd row and so on... So, what I mean is that, user can filter the data himself without using rowspan? This will not effect the filtering also?

Am I missing something?

I might be misunderstood.
rowSpan doesn't filter. it only determines how cells are displayed.

If you set rowSpan: 2, the Group cell spans 2 rows. But which rows appear depends on your data.

// Pass this data:

data={[ { name: "Alice", age: 28, group: "A" }, { name: "Charlie", age: 29, group: "A" }, // 2 people = rowSpan: 2 works fine { name: "Bob", age: 34, group: "B" }, { name: "Dave", age: 42, group: "B" }, ]}

// Result: Group A cell spans 2 rows ✓
If Group A has 3 people, rowSpan: 2 won't be enough. Then use dynamic rowSpan:

rowSpan: (row) => row.firstInGroup ? groupSize[row.group] : 1

It has nothing to do with filtering — rowSpan just decides how to merge cells in the rows that are already shown.

aktasmehmet · 2026-06-08T12:11:41Z

+      const cellKey: SpannedCellKey = `${row.motifIndex}-${colIndex}`;
+      if (map.has(cellKey)) return;
+
+      const remainingRowsCount = rows.filter(r => r.motifIndex >= row.motifIndex).length;


Another and more dangerous problem here is that since it uses original index order, this sill clamp all rowSpan to 1 after any sort!

Just check the ss

here is the data to test:

<Table data={[ { basarili: "Evet", nasil: "İyi", sonuc: "Mutlu" }, { basarili: "Hayır", nasil: "Kötü", sonuc: "Mutsuz" }, { basarili: "Evet", nasil: "Orta", sonuc: "Kararsız" }, { basarili: "Belki", nasil: "Eh İşte", sonuc: "Belirsiz" }, { basarili: "Hayır", nasil: "Çok Kötü", sonuc: "Çok Mutsuz" }, { basarili: "Evet", nasil: "Mükemmel", sonuc: "Çok Mutlu" }, { basarili: "Belki", nasil: "Fena Değil", sonuc: "Kararsız" }, { basarili: "Hayır", nasil: "Berbat", sonuc: "Çok Mutsuz" }, { basarili: "Evet", nasil: "Harika", sonuc: "Çok Mutlu" }, { basarili: "Belki", nasil: "Orta", sonuc: "Kararsız" }, ]} columns={[ { dataKey: "basarili", title: "Başarılı", colSpan: obj => (obj.basarili === "Evet" ? 2 : 1) }, { dataKey: "nasil", title: "Nasıl" }, { dataKey: "sonuc", title: "Sonuç", rowSpan: obj => (obj.sonuc.includes("Mutlu") ? 2 : 1), sorting:{} }, ]} />

It should be fixed after my fixes. You can review them.

aktasmehmet · 2026-06-15T10:47:41Z

+export type ResolvedCellSpan = {
+  colSpan: number;
+  rowSpan: number;
+};
+
+export type SpannedCellKey = `${number}-${number}`;
+export type SpannedCellsMap = Map<SpannedCellKey, ResolvedCellSpan | undefined>;
+
+export type RenderableColumn = {
+  column: Column;
+  index: number;
+  colSpan?: number;
+};


There is already a types.ts file, so it would be better to move all these types there and access types from a single file for easy management.

This has been fixed in the latest commit. You can verify it.

aktasmehmet · 2026-06-15T10:59:43Z

  footer?: Footer;
  width?: string;
  filter?: boolean;
+  colSpan?: number | ((rowData: object) => number);


I dont find useful information in this answer. The example shows the usage of the function, not the number.

I wonder that, what would be the result for the code below:

<Table data={[ { name: "Alice", age: 28, group: "A" }, { name: "Bob", age: 34, group: "B" }, { name: "Charlie", age: 29, group: "A" }, { name: "Dave", age: 42, group: "B" }, ]} columns={[ { title: "Group", dataKey: "group", rowSpan: 2 }, { title: "Name", dataKey: "name" }, { title: "Age", dataKey: "age" }, ]} border="cellBorders" />

Afaik, this would render only Alice and Charline lines, right? So this will show 1st row and 3rd row and so on... So, what I mean is that, user can filter the data himself without using rowspan? This will not effect the filtering also?

Am I missing something?

aktasmehmet · 2026-06-15T12:10:08Z


 const ColumnFootArea = ({ background, customFooter }: Props) => {
-  const { originalRows, columns, showFixedRowNumbers, selectable, numberOfVisibleColumns } = useContext(TableContext);
+  const { usableRows, columns, showFixedRowNumbers, selectable, numberOfVisibleColumns } = useContext(TableContext);


switching from originalRowsto usableRows causes the avg footer to be shown as NaN when all rows are filtered out. You may filter with "x" Please check the ss.

Here is the sample test:

<Table data={[ { name: "Alice", score: 90 }, { name: "Bob", score: 80 }, { name: "Carol", score: 70 }, ]} columns={[ { title: "Name", dataKey: "name", filter: true }, { title: "Score", dataKey: "score", footer: { type: "avg" } }, ]} border="cellBorders" />

This should be fixed in the latest commit. You can verify it.

aktasmehmet · 2026-06-15T12:12:07Z


 const ColumnFootArea = ({ background, customFooter }: Props) => {
-  const { originalRows, columns, showFixedRowNumbers, selectable, numberOfVisibleColumns } = useContext(TableContext);
+  const { usableRows, columns, showFixedRowNumbers, selectable, numberOfVisibleColumns } = useContext(TableContext);


Now saw that this also breaks the filtered total. Previously, it was showin the total of the whole table but now, it only shows the filtered ones as total. This is not expected.

Here is the code (Sum should stay as 600):

<Table data={[ { name: "Alice", amount: 100 }, { name: "Bob", amount: 200 }, { name: "Carol", amount: 300 }, ]} columns={[ { title: "Name", dataKey: "name", filter: true }, { title: "Amount", dataKey: "amount", footer: { type: "sum" } }, ]} border="cellBorders" />

This should be fixed in the latest commit. You can verify it.

aktasmehmet · 2026-06-15T12:15:25Z

-    );
-  });
+        return (
+          <th key={"foot_" + column.dataKey} {...(actualColSpan > 1 && { colSpan: actualColSpan })}>


This change will lead to duplicate key error. Here is the scenario:

When :

selectable=true
AND
showFixedRowNumbers=true
AND
any data column has footer defined

--> columnsConsideringExtraCols prepends {title:''} and {title:'#'}, both with dataKey=undefined. key={'foot_' + column.dataKey} evaluates to 'foot_undefined' for both.

So this will cause the error:

<Table data={[ { name: "Alice", amount: 100 }, { name: "Bob", amount: 200 }, { name: "Carol", amount: 300 }, ]} columns={[ { title: "Name", dataKey: "name" }, { title: "Amount", dataKey: "amount", footer: { type: "sum" } }, ]} selectable showFixedRowNumbers border="cellBorders" />

This has been fixed in the latest commit. You can verify it.

feat(Table): add colspan and rowspan support

442c354

ZehranurC requested a review from a team June 4, 2026 06:26

ZehranurC requested a deployment to development June 4, 2026 06:26 — with GitHub Actions Waiting

github-actions Bot assigned ZehranurC Jun 4, 2026

github-actions Bot added the release:minor label Jun 4, 2026

fix: stories fixed

2fa7198

ZehranurC requested a deployment to development June 4, 2026 06:29 — with GitHub Actions Waiting

test(Table): Add colspan rowspan tests

dce1096

ZehranurC requested a deployment to development June 4, 2026 07:50 — with GitHub Actions Waiting

atakanbayrak requested changes Jun 4, 2026

View reviewed changes

ZehranurC changed the title ~~feat(Table): add colspan and rowspan support~~ fix: add colspan and rowspan support Jun 5, 2026

github-actions Bot added release:patch and removed release:minor labels Jun 5, 2026

aktasmehmet requested changes Jun 8, 2026

View reviewed changes

fix: review fixes

fe02b8e

ZehranurC requested a deployment to development June 12, 2026 13:38 — with GitHub Actions Waiting

fix: review fixes

f6a6580

ZehranurC requested a deployment to development June 12, 2026 13:41 — with GitHub Actions Waiting

Merge branch 'main' into feature/table-colspan-rowspan-implementation

659ee58

ZehranurC requested a deployment to development June 15, 2026 05:42 — with GitHub Actions Waiting

aktasmehmet reviewed Jun 15, 2026

View reviewed changes

aktasmehmet requested changes Jun 15, 2026

View reviewed changes

fix: review fixes

e2fffb6

ZehranurC requested a deployment to development June 17, 2026 11:12 — with GitHub Actions Waiting

ZehranurC requested review from aktasmehmet and atakanbayrak June 17, 2026 12:33

Conversation

ZehranurC commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Screenshots / Preview

Checklist

How to Test

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aktasmehmet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ZehranurC Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ZehranurC Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ZehranurC Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ZehranurC commented Jun 4, 2026 •

edited

Loading

ZehranurC Jun 17, 2026 •

edited

Loading

ZehranurC Jun 17, 2026 •

edited

Loading

ZehranurC Jun 17, 2026 •

edited

Loading