feat: add `Table.Checkbox` by kurtdoherty · Pull Request #741 · reapit/elements

kurtdoherty · 2025-09-02T06:15:39Z

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 second 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.
The next chunk of work is focused on row selection and batch actions and will include:
- Part 1: Table checkbox (this PR)
- Part 2: Table toolbar
- (maybe) Part 3: Batch actions

This PR

Adds TableCellCheckbox.
Updates TableBodyCell and TableHeaderCell to support the removal of their default padding.
Updates TableBodyRow to support "selected" styling.
Adds row selection examples to some docs.

`TableCheckbox`

`TableBodyCell` and `TableHeaderCell`

`TableBodyRow`

`TableBody`

rpt-uk-github · 2025-09-02T06:15:47Z

🎉 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)

codacy-production · 2025-09-02T06:19:42Z

Coverage summary from Codacy

See diff coverage on Codacy

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

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (`ad49aee`)	Report Missing	Report Missing	Report Missing
Head commit (`e54b1fe`)	8684	8045	92.64%

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 (#741)	33	33	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 · 2025-09-02T06:17:17Z

src/core/input/checkbox/styles.ts

@@ -2,12 +2,19 @@ import { css } from '@linaria/core'
 import { styled } from '@linaria/react'

 export const ElInputCheckboxContainer = styled.div`


note: some small scouts to the newly added InputCheckbox component.

kurtdoherty · 2025-09-02T06:17:55Z

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

@@ -242,6 +244,33 @@ export const Alignment: Story = {
  ],
 }



note: new "no padding" example for TableBodyCell

kurtdoherty · 2025-09-02T06:18:40Z

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

@@ -27,11 +28,11 @@ const meta = {
    children: {
      control: 'select',
      description: 'The row content.',


note: adding new canned children options that include checkboxes for the row. New stories demonstrating these are further down.

kurtdoherty · 2025-09-02T06:19:18Z

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

@@ -25,6 +25,13 @@ export const elTableBodyRow = css`
  min-height: var(--size-10);
  max-height: var(--size-18);



note: new selected styling. Take note of the code comment... we're doing the simplest thing that works for now.

kurtdoherty · 2025-09-02T06:19:38Z

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

@@ -3,6 +3,7 @@ import { Menu } from '#src/core/menu'
 import { TableBody } from './body'
 import { TableBodyCell } from '../body-cell'
 import { TableBodyRow } from '../body-row'


note: adding checkboxes to the TableBody docs

kurtdoherty · 2025-09-02T06:20:33Z

src/core/table/checkbox/checkbox.tsx

+/**
+ * A thin wrapper around [Input's checkbox implementation](./?path=/docs/core-input--docs) that is geared
+ * for use in tables built with [Table](./?path=/docs/core-table--docs).
+ */


note: super thin wrapper around the newly added Input

kurtdoherty · 2025-09-02T06:21:30Z

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

@@ -144,3 +146,30 @@ export const Alignment: Story = {
    ),
  ],
 }


note: same new "no padding" support for TableHeaderCell as added to TableBodyCell

kurtdoherty · 2025-09-02T06:21:42Z

src/core/table/primary-data/primary-data.stories.tsx

@@ -6,7 +6,7 @@ import { StatusIndicator } from '#src/core/status-indicator'
 import { TableCellPrimaryData } from './primary-data'
 import { TagGroup } from '#src/core/tag-group'
 import { Text } from '#src/core/text'


note: small scout

kurtdoherty · 2025-09-02T06:21:50Z

src/core/table/sort-button/sort-button.stories.tsx

@@ -1,12 +1,12 @@
 import { getNextSortDirection } from './sort-direction'
 import { TableCellSortButton } from './sort-button'


note: small scout

kurtdoherty · 2025-09-02T06:22:01Z

src/core/table/styles.ts

  grid-auto-rows: auto;
-  grid-template-columns: var(--__table-columns);
  justify-items: var(--__table-column-justification);
  justify-content: var(--__table-column-justification);


note: small fix for broken style

feat: add Table.Checkbox

e54b1fe

kurtdoherty commented Sep 2, 2025

View reviewed changes

kurtdoherty marked this pull request as ready for review September 2, 2025 06:22

kurtdoherty merged commit d7d2b17 into main Sep 2, 2025
6 checks passed

kurtdoherty deleted the feat-add-table-cell-checkbox branch September 2, 2025 06:22

This was referenced Sep 3, 2025

feat: add Table.Toolbar #743

Merged

v5 component refactor: Table Components #358

Closed

v5 component refactor: Table Information #357

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add `Table.Checkbox`#741

feat: add `Table.Checkbox`#741
kurtdoherty merged 1 commit intomainfrom
feat-add-table-cell-checkbox

kurtdoherty commented Sep 2, 2025

Uh oh!

rpt-uk-github commented Sep 2, 2025 •

edited

Loading

Uh oh!

codacy-production bot commented Sep 2, 2025

Uh oh!

kurtdoherty Sep 2, 2025

Uh oh!

kurtdoherty Sep 2, 2025

Uh oh!

kurtdoherty Sep 2, 2025

Uh oh!

kurtdoherty Sep 2, 2025

Uh oh!

kurtdoherty Sep 2, 2025

Uh oh!

kurtdoherty Sep 2, 2025

Uh oh!

kurtdoherty Sep 2, 2025

Uh oh!

kurtdoherty Sep 2, 2025

Uh oh!

kurtdoherty Sep 2, 2025

Uh oh!

kurtdoherty Sep 2, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -2,12 +2,19 @@ import { css } from '@linaria/core'
		import { styled } from '@linaria/react'

		export const ElInputCheckboxContainer = styled.div`

		@@ -25,6 +25,13 @@ export const elTableBodyRow = css`
		min-height: var(--size-10);
		max-height: var(--size-18);

@@ @@ -144,3 +146,30 @@ export const Alignment: Story = { @@
                   ),
                 ],
               }

		@@ -1,12 +1,12 @@
		import { getNextSortDirection } from './sort-direction'
		import { TableCellSortButton } from './sort-button'

Conversation

kurtdoherty commented Sep 2, 2025

Context

This PR

TableCheckbox

TableBodyCell and TableHeaderCell

TableBodyRow

TableBody

Uh oh!

rpt-uk-github commented Sep 2, 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!

codacy-production bot commented Sep 2, 2025

Coverage summary from Codacy

Footnotes

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

`TableCheckbox`

`TableBodyCell` and `TableHeaderCell`

`TableBodyRow`

`TableBody`

rpt-uk-github commented Sep 2, 2025 •

edited

Loading