table-library
diff --git a/‎.storybook/stories/Misc/Footer/base.jsx‎
Lines changed: 10 additions & 0 deletions b/‎.storybook/stories/Misc/Footer/base.jsx‎
Lines changed: 10 additions & 0 deletions
diff --git a/‎src/table/Cell/HeaderCell.tsx‎
Lines changed: 2 additions & 2 deletions b/‎src/table/Cell/HeaderCell.tsx‎
Lines changed: 2 additions & 2 deletions
@@ -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>
 
@@ -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')} />
  ))}
  </>
  );