Skip to content

Commit

Permalink
fix(Table): allow nodes in header cells (#2001)
Browse files Browse the repository at this point in the history 
- add new story to cover this capability
  • Loading branch information
@booc0mtaco
booc0mtaco authored Jun 27, 2024
1 parent 0d6df78 commit e471fad
Show file tree
Hide file tree
Showing 3 changed files with 233 additions and 4 deletions.
42 changes: 42 additions & 0 deletions src/components/Table/Table.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,48 @@ export const TableWithCaption: Story = {
},
};

/**
* Headers can be more than text.
*/
export const TableWithStyledHeader: Story = {
args: {
children: (
<>
<Table.Caption>
Optional caption for the table. Must be first descendant of Table if
used.
</Table.Caption>

<Table.Header>
<Table.Row variant="header">
{tableColumns.map((item) => {
return (
<Table.HeaderCell key={'table-header-row-' + item.title}>
<em>{item.title}</em>
</Table.HeaderCell>
);
})}
</Table.Row>
</Table.Header>

<Table.Body>
{tableRows.map((item) => {
return (
<Table.Row key={item.value1.slice(0, 11)}>
<Table.Cell>{item.value1}</Table.Cell>
<Table.Cell>{item.value2}</Table.Cell>
<Table.Cell>{item.value3}</Table.Cell>
<Table.Cell>{item.value4}</Table.Cell>
<Table.Cell>{item.value5}</Table.Cell>
</Table.Row>
);
})}
</Table.Body>
</>
),
},
};

/**
* This implementation example shows how one might implement sort. Sort can be implemented to work based
* on the current content (if the full table is already rendered), or using request results from the server
Expand Down
6 changes: 2 additions & 4 deletions src/components/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ type TableHeaderCellProps = React.HTMLAttributes<HTMLTableCellElement> & {
/**
* Child node(s) that can be nested inside component
*/
children?: string;
children?: ReactNode;
/**
* CSS class names that can be appended to the component.
*/
Expand Down Expand Up @@ -253,9 +253,7 @@ const TableHeaderCell = ({
rank="tertiary"
size="sm"
title={iconTitle}
>
{children}
</Button>
></Button>
</>
) : (
children
Expand Down
189 changes: 189 additions & 0 deletions src/components/Table/__snapshots__/Table.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -736,3 +736,192 @@ exports[`<Table /> TableWithCaption story renders snapshot 1`] = `
</tbody>
</table>
`;

exports[`<Table /> TableWithStyledHeader story renders snapshot 1`] = `
<table
class="table"
>
<caption>
Optional caption for the table. Must be first descendant of Table if used.
</caption>
<thead>
<tr
class="table-row table-row--header"
>
<th
class="table-header-cell"
>
<div
class="table-header-cell__container"
>
<em>
Name
</em>
</div>
</th>
<th
class="table-header-cell"
>
<div
class="table-header-cell__container"
>
<em>
Status
</em>
</div>
</th>
<th
class="table-header-cell"
>
<div
class="table-header-cell__container"
>
<em>
Chart
</em>
</div>
</th>
<th
class="table-header-cell"
>
<div
class="table-header-cell__container"
>
<em>
Window
</em>
</div>
</th>
<th
class="table-header-cell"
>
<div
class="table-header-cell__container"
>
<em>
Last Update
</em>
</div>
</th>
</tr>
</thead>
<tbody>
<tr
class="table-row"
>
<td
class="table-cell"
>
Table Row 1, Table Cell 1
</td>
<td
class="table-cell"
>
Table Row 1, Table Cell 2
</td>
<td
class="table-cell"
>
Table Row 1, Table Cell 3
</td>
<td
class="table-cell"
>
Table Row 1, Table Cell 4
</td>
<td
class="table-cell"
>
Table Row 1, Table Cell 5
</td>
</tr>
<tr
class="table-row"
>
<td
class="table-cell"
>
Table Row 2, Table Cell 1
</td>
<td
class="table-cell"
>
Table Row 2, Table Cell 2
</td>
<td
class="table-cell"
>
Table Row 2, Table Cell 3
</td>
<td
class="table-cell"
>
Table Row 2, Table Cell 4
</td>
<td
class="table-cell"
>
Table Row 2, Table Cell 5
</td>
</tr>
<tr
class="table-row"
>
<td
class="table-cell"
>
Table Row 3, Table Cell 1
</td>
<td
class="table-cell"
>
Table Row 3, Table Cell 2
</td>
<td
class="table-cell"
>
Table Row 3, Table Cell 3
</td>
<td
class="table-cell"
>
Table Row 3, Table Cell 4
</td>
<td
class="table-cell"
>
Table Row 3, Table Cell 5
</td>
</tr>
<tr
class="table-row"
>
<td
class="table-cell"
>
Table Row 4, Table Cell 1
</td>
<td
class="table-cell"
>
Table Row 4, Table Cell 2
</td>
<td
class="table-cell"
>
Table Row 4, Table Cell 3
</td>
<td
class="table-cell"
>
Table Row 4, Table Cell 4
</td>
<td
class="table-cell"
>
Table Row 4, Table Cell 5
</td>
</tr>
</tbody>
</table>
`;

0 comments on commit e471fad

Please sign in to comment.