From b6694355c8d2bd801da5cba6d6f82f2d023b7e6d Mon Sep 17 00:00:00 2001
From: Nesh Aleksandr <neschadin.oleksandr@gmail.com>
Date: Wed, 19 Mar 2025 12:51:31 +0200
Subject: [PATCH 1/2] fix(HeaderCell): add unique keys to column grouping cells
and update Storybook;
---
.storybook/stories/Misc/Footer/base.jsx | 10 ++++++++++
src/table/Cell/HeaderCell.tsx | 4 ++--
2 files changed, 12 insertions(+), 2 deletions(-)
diff --git a/.storybook/stories/Misc/Footer/base.jsx b/.storybook/stories/Misc/Footer/base.jsx
index 6c774ab..1242f79 100644
--- a/.storybook/stories/Misc/Footer/base.jsx
+++ b/.storybook/stories/Misc/Footer/base.jsx
@@ -30,6 +30,16 @@ const Component = () => {
<HeaderCell>Complete</HeaderCell>
<HeaderCell>Tasks</HeaderCell>
</HeaderRow>
+
+ <HeaderRow>
+ <HeaderCell
+ style={{ color: 'gray', fontWeight: 400 }}
+ gridColumnStart={1}
+ gridColumnEnd={6}
+ >
+ The spanned header cell that contains a large sentence
+ </HeaderCell>
+ </HeaderRow>
</Header>
<Body>
diff --git a/src/table/Cell/HeaderCell.tsx b/src/table/Cell/HeaderCell.tsx
index c58ad92..c95c86c 100644
--- a/src/table/Cell/HeaderCell.tsx
+++ b/src/table/Cell/HeaderCell.tsx
@@ -141,8 +141,8 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
</HeaderCellContainer>
{/* column grouping */}
- {Array.from({ length: colSpan }, () => (
- <HeaderCellContainer className={cs('th', 'hide', 'colspan')} />
+ {Array.from({ length: colSpan }, (_, i) => (
+ <HeaderCellContainer key={`colspan-${i}`} className={cs('th', 'hide', 'colspan')} />
))}
</>
);
From 693ffbae518fea3498131d500ee04a56953bc147 Mon Sep 17 00:00:00 2001
From: Nesh Aleksandr <neschadin.oleksandr@gmail.com>
Date: Wed, 19 Mar 2025 13:35:45 +0200
Subject: [PATCH 2/2] chore(Storybook): remove spanned HeaderCell;
---
.storybook/stories/Misc/Footer/base.jsx | 10 ----------
1 file changed, 10 deletions(-)
diff --git a/.storybook/stories/Misc/Footer/base.jsx b/.storybook/stories/Misc/Footer/base.jsx
index 1242f79..6c774ab 100644
--- a/.storybook/stories/Misc/Footer/base.jsx
+++ b/.storybook/stories/Misc/Footer/base.jsx
@@ -30,16 +30,6 @@ const Component = () => {
<HeaderCell>Complete</HeaderCell>
<HeaderCell>Tasks</HeaderCell>
</HeaderRow>
-
- <HeaderRow>
- <HeaderCell
- style={{ color: 'gray', fontWeight: 400 }}
- gridColumnStart={1}
- gridColumnEnd={6}
- >
- The spanned header cell that contains a large sentence
- </HeaderCell>
- </HeaderRow>
</Header>
<Body>