feat: add `Table` by kurtdoherty · Pull Request #730 · reapit/elements

kurtdoherty · 2025-08-29T05:50:47Z

Context

We have table atoms in @reapit/elements/lab/table, but these don't facilitate the level of nuance required by the DS. For example:
- They are pinned to semantic table elements like td, tr and so on, but we may need the flexibility of using them in a div-based DOM structure instead.
- They do not provide any solution for the primary row action (which is meant to appear like the row itself is interactive).
- They do not provide any solution for rendering row header cells.
- They require column widths to be defined at the cell-level of the table rather than once at the table-level.
We want to enhance the capability of our table atoms when implementing "official" core versions of them (i.e. the table atoms that will be available via @reapit/elements/core/table.
The first chunk of this work focused on atoms involved in the table's body and was completed over a number of PRs: feat: Add new TableRowPrimaryAction #715, feat: Add new TableCellPrimaryData #716, feat: Add new TableCellDoubleLineLayout #717, feat: Add new TableBodyCell #718, feat: Add new TableBodyRow #719, feat: Add new TableBody #720 and feat: Add new TableRowMoreActions #721.
The next chunk of work focused on the atoms involved in the table's head: feat: Add new TableCellSortButton #725, feat: Add new TableHeaderCell #726, feat: Add new TableHeaderRow #727, feat: Add new TableHead #728.

This PR

Adds Table. This component ties all the other atoms together, defining the CSS grid layout that the rows/columns align to.
Updates the column alignment approach. We now use justify-items and a CSS variable that other table atoms reference.

rpt-uk-github · 2025-08-29T05:50:55Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

✅ code/snyk check is complete. No issues have been found. (View Details)

kurtdoherty · 2025-08-29T05:52:35Z

src/core/table/__story__/table-wrapper.tsx

+  placement: ChildPlacement,
+  columns: string = '1fr 1fr 1fr min-content',
+): FC<{ children: ReactNode }> {
  return ({ children }) => {


note: no longer need these inline styles as our "real" Table component takes care of all this.

kurtdoherty · 2025-08-29T05:53:13Z

src/core/table/__story__/table-wrapper.tsx

 /** Simple factory that returns a component that renders valid table DOM hierarchy around its children */
-export function buildTableWrapper(placement: ChildPlacement): FC<{ children: ReactNode }> {
+export function buildTableWrapper(
+  placement: ChildPlacement,


note: added a new columns option to this factory so that some stories can build a table wrapper with specifically sized columns.

kurtdoherty · 2025-08-29T05:54:31Z

src/core/table/body-cell/body-cell.stories.tsx

@@ -172,12 +172,13 @@ export const Overflow: Story = {
    ),
  },
  decorators: [


note: switch around how the truncation was happening, so we're more correctly demonstrating the behaviour of the body cell, rather than the intermediate div. The div now wraps the whole table, so it's not interfering with layout concerns.

kurtdoherty · 2025-08-29T05:54:48Z

src/core/table/body-cell/body-cell.stories.tsx

-    justifyContent: 'end',
+    justifySelf: 'end',
  },
  decorators: [


note: same deal as above.

kurtdoherty · 2025-08-29T05:55:47Z

src/core/table/body-cell/body-cell.stories.tsx

@@ -228,15 +229,16 @@ export const EmptyCells: Story = {
 export const Alignment: Story = {
  args: {
    ...DoubleLineLayout.args,


note: because we switched to using justify-items, we now use justify-self to uniquely justify the content of cells

kurtdoherty · 2025-08-29T05:57:04Z

src/core/table/body-cell/styles.ts

  align-items: center;
-  justify-content: inherit;

  ${font('sm', 'regular')}


note: matching the adjustment made to the header cell.

kurtdoherty · 2025-08-29T05:57:42Z

src/core/table/body-cell/styles.ts

  padding: var(--spacing-2);

  overflow: hidden;



note: when a custom justification is applied to a cell, that cell and its descendants will have the overridden value for the new CSS variable.

kurtdoherty · 2025-08-29T05:58:59Z

src/core/table/body/body.stories.tsx

@@ -86,7 +86,7 @@ function buildRows(type: 'single-line' | 'double-line') {
      return (
        <>
          <TableBodyRow>


note: scouting some TS errors here... scope is no longer accepted (its auto-applied; see #723)

kurtdoherty · 2025-08-29T05:59:21Z

src/core/table/double-line-layout/double-line-layout.stories.tsx

@@ -91,7 +91,7 @@ export const Clipping: Story = {
  },
  decorators: [
    (Story) => (


note: small scout to make the clipping more obvious

kurtdoherty · 2025-08-29T06:00:07Z

src/core/table/header-cell/header-cell.stories.tsx

@@ -79,6 +81,39 @@ export const Sortable: Story = {
  decorators: [useTableDecorator('header-cell')],
 }



note: added a new story showing truncation for a header cell...though ideally header cells will never truncate.

kurtdoherty · 2025-08-29T06:03:20Z

src/core/table/header-cell/styles.ts

  padding: var(--spacing-2);

  ${font('2xs', 'bold')}
  color: var(--colour-text-secondary);


note: th elements in the table's head come with user-agent styles for text-align. We use the new CSS variable set by the table to override this default style so that it matches the chosen justification.

kurtdoherty · 2025-08-29T06:03:48Z

src/core/table/more-actions/more-actions-button.tsx

@@ -16,7 +17,7 @@ interface TableRowMoreActionsButtonProps extends Omit<ButtonHTMLAttributes<HTMLB
   * is preferred when the button should still be focusable while it's disabled; for example, to allow
   * a tooltip to be displayed that explains why the button is disabled.
   */


note: small scout to make these props optional

kurtdoherty · 2025-08-29T06:04:09Z

src/core/table/more-actions/more-actions-button.tsx

@@ -67,6 +68,7 @@ export function TableRowMoreActionsButton({
      className={cx(elTableRowMoreActionsButton, className)}
      disabled={disabled}
      onClick={handleClick}


note: small scout to pin the more actions trigger button to be a button, never a submit.

codacy-production · 2025-08-29T06:27:30Z

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
Report missing for `71bab0f`¹	✅ 100.00%

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (`71bab0f`)	Report Missing	Report Missing	Report Missing
Head commit (`4f55f9e`)	8591	7952	92.56%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#730)	48	48	100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings Change summary preferences

Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct. ↩

kurtdoherty marked this pull request as ready for review August 29, 2025 05:52

kurtdoherty commented Aug 29, 2025

View reviewed changes

kurtdoherty force-pushed the feat-add-table branch from c2df0e1 to 43e8bcb Compare August 29, 2025 06:02

kurtdoherty commented Aug 29, 2025

View reviewed changes

feat: add Table

4f55f9e

kurtdoherty force-pushed the feat-add-table branch from 43e8bcb to 4f55f9e Compare August 29, 2025 06:23

kurtdoherty merged commit 9d1c633 into main Aug 29, 2025
6 checks passed

kurtdoherty deleted the feat-add-table branch August 29, 2025 06:28

This was referenced Sep 10, 2025

v5 component refactor: Table Components #358

Closed

v5 component refactor: Table Information #357

Closed

		@@ -79,6 +81,39 @@ export const Sortable: Story = {
		decorators: [useTableDecorator('header-cell')],
		}

Conversation

kurtdoherty commented Aug 29, 2025

Context

This PR

Uh oh!

rpt-uk-github commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Snyk checks have passed. No issues have been found so far.

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kurtdoherty Aug 29, 2025 • 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!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codacy-production bot commented Aug 29, 2025

Coverage summary from Codacy

Footnotes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rpt-uk-github commented Aug 29, 2025 •

edited

Loading

kurtdoherty Aug 29, 2025 •

edited

Loading