Filterable table
A list screen composed from a toolbar with search and filter, removable chips, a selectable sortable data-table with status badges, a count and pagination; with empty and loading variants.
stable · light DOM · 4.0.0. Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.
Live variants
default
| Atlas library | Avery Kim | Ready | 24 | |
| Orion workspace | Jordan Lee | In progress | 12 | |
| Field notes | Morgan Noor | Ready | 38 | |
| Signal monitor | Riley Stone | Review | 6 | |
| No rows match. | ||||
| ⋯ Loading rows | ||||
<j3w1-filterable-table id="example-filterable-table-default"><section class="filterable-table" aria-label="Project records"><div class="filterable-table-toolbar"><j3w1-search-field><div class="search-field"><label class="search-field-label" for="example-filterable-table-default-records-search">Search projects</label><div class="search-field-root"><input class="search-field-input" id="example-filterable-table-default-records-search" type="search"><button class="search-field-clear" type="button" aria-label="Clear search">Clear</button></div></div></j3w1-search-field><label for="example-filterable-table-default-records-status">Status<select class="select-control" id="example-filterable-table-default-records-status" data-status-filter="" name="example-filterable-table-default-records-status"><option value="all">All statuses</option><option>Ready</option><option>In progress</option><option>Review</option></select></label></div><div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="data-table"><caption class="table-caption">Project records · synthetic fixture</caption><thead class="data-table-head"><tr><th class="data-table-header data-table-header-select" scope="col"><button class="data-table-select-all" type="button" role="checkbox" aria-checked="false" aria-label="Select all rows"><span class="data-table-check-glyph" aria-hidden="true">✓</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Project<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Owner<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Status<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Scope<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th></tr></thead><tbody class="data-table-body"><tr class="data-table-row" id="example-filterable-table-default-record-0" data-status="Ready" aria-selected="false" tabindex="0"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-0" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-0">Atlas library</td><td class="data-table-cell">Avery Kim</td><td class="data-table-cell">Ready</td><td class="data-table-cell">24</td></tr><tr class="data-table-row" id="example-filterable-table-default-record-1" data-status="In progress" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-1" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-1">Orion workspace</td><td class="data-table-cell">Jordan Lee</td><td class="data-table-cell">In progress</td><td class="data-table-cell">12</td></tr><tr class="data-table-row" id="example-filterable-table-default-record-2" data-status="Ready" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-2" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-2">Field notes</td><td class="data-table-cell">Morgan Noor</td><td class="data-table-cell">Ready</td><td class="data-table-cell">38</td></tr><tr class="data-table-row" id="example-filterable-table-default-record-3" data-status="Review" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-3" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-3">Signal monitor</td><td class="data-table-cell">Riley Stone</td><td class="data-table-cell">Review</td><td class="data-table-cell">6</td></tr><tr class="data-table-empty" hidden=""><td class="data-table-empty-cell" colspan="5">No rows match.</td></tr><tr class="data-table-loading" hidden=""><td colspan="5">⋯ Loading rows</td></tr></tbody></table></div><p class="filterable-table-count" role="status" data-table-status=""></p></section></j3w1-filterable-table>empty
| No rows match. | ||||
| ⋯ Loading rows | ||||
<j3w1-filterable-table id="example-filterable-table-empty"><section class="filterable-table" aria-label="Project records"><div class="filterable-table-toolbar"><j3w1-search-field><div class="search-field"><label class="search-field-label" for="example-filterable-table-empty-records-search">Search projects</label><div class="search-field-root"><input class="search-field-input" id="example-filterable-table-empty-records-search" type="search"><button class="search-field-clear" type="button" aria-label="Clear search">Clear</button></div></div></j3w1-search-field><label for="example-filterable-table-empty-records-status">Status<select class="select-control" id="example-filterable-table-empty-records-status" data-status-filter="" name="example-filterable-table-empty-records-status"><option value="all">All statuses</option><option>Ready</option><option>In progress</option><option>Review</option></select></label></div><div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="data-table"><caption class="table-caption">Project records · synthetic fixture</caption><thead class="data-table-head"><tr><th class="data-table-header data-table-header-select" scope="col"><button class="data-table-select-all" type="button" role="checkbox" aria-checked="false" aria-label="Select all rows"><span class="data-table-check-glyph" aria-hidden="true">✓</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Project<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Owner<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Status<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Scope<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th></tr></thead><tbody class="data-table-body"><tr class="data-table-empty"><td class="data-table-empty-cell" colspan="5">No rows match.</td></tr><tr class="data-table-loading" hidden=""><td colspan="5">⋯ Loading rows</td></tr></tbody></table></div><p class="filterable-table-count" role="status" data-table-status=""></p></section></j3w1-filterable-table>loading
| Atlas library | Avery Kim | Ready | 24 | |
| Orion workspace | Jordan Lee | In progress | 12 | |
| Field notes | Morgan Noor | Ready | 38 | |
| Signal monitor | Riley Stone | Review | 6 | |
| No rows match. | ||||
| ⋯ Loading rows | ||||
<j3w1-filterable-table id="example-filterable-table-loading"><section class="filterable-table" aria-label="Project records"><div class="filterable-table-toolbar"><j3w1-search-field><div class="search-field"><label class="search-field-label" for="example-filterable-table-loading-records-search">Search projects</label><div class="search-field-root"><input class="search-field-input" id="example-filterable-table-loading-records-search" type="search"><button class="search-field-clear" type="button" aria-label="Clear search">Clear</button></div></div></j3w1-search-field><label for="example-filterable-table-loading-records-status">Status<select class="select-control" id="example-filterable-table-loading-records-status" data-status-filter="" name="example-filterable-table-loading-records-status"><option value="all">All statuses</option><option>Ready</option><option>In progress</option><option>Review</option></select></label></div><div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="data-table" aria-busy="true"><caption class="table-caption">Project records · synthetic fixture</caption><thead class="data-table-head"><tr><th class="data-table-header data-table-header-select" scope="col"><button class="data-table-select-all" type="button" role="checkbox" aria-checked="false" aria-label="Select all rows"><span class="data-table-check-glyph" aria-hidden="true">✓</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Project<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Owner<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Status<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Scope<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th></tr></thead><tbody class="data-table-body"><tr class="data-table-row" id="example-filterable-table-loading-record-0" data-status="Ready" aria-selected="false" tabindex="0"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-loading-record-name-0" name="example-filterable-table-loading-value"></td><td class="data-table-cell" id="example-filterable-table-loading-record-name-0">Atlas library</td><td class="data-table-cell">Avery Kim</td><td class="data-table-cell">Ready</td><td class="data-table-cell">24</td></tr><tr class="data-table-row" id="example-filterable-table-loading-record-1" data-status="In progress" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-loading-record-name-1" name="example-filterable-table-loading-value"></td><td class="data-table-cell" id="example-filterable-table-loading-record-name-1">Orion workspace</td><td class="data-table-cell">Jordan Lee</td><td class="data-table-cell">In progress</td><td class="data-table-cell">12</td></tr><tr class="data-table-row" id="example-filterable-table-loading-record-2" data-status="Ready" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-loading-record-name-2" name="example-filterable-table-loading-value"></td><td class="data-table-cell" id="example-filterable-table-loading-record-name-2">Field notes</td><td class="data-table-cell">Morgan Noor</td><td class="data-table-cell">Ready</td><td class="data-table-cell">38</td></tr><tr class="data-table-row" id="example-filterable-table-loading-record-3" data-status="Review" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-loading-record-name-3" name="example-filterable-table-loading-value"></td><td class="data-table-cell" id="example-filterable-table-loading-record-name-3">Signal monitor</td><td class="data-table-cell">Riley Stone</td><td class="data-table-cell">Review</td><td class="data-table-cell">6</td></tr><tr class="data-table-empty" hidden=""><td class="data-table-empty-cell" colspan="5">No rows match.</td></tr><tr class="data-table-loading"><td colspan="5">⋯ Loading rows</td></tr></tbody></table></div><p class="filterable-table-count" role="status" data-table-status=""></p></section></j3w1-filterable-table>Install and register
Use the exact version. If npm publication is pending, install the release tarball from the installation guide.
npm install --save-exact @j3w1/ui@4.0.0import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/filterable-table.css';
import '@j3w1/ui/register/filterable-table';Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.
Copy the complete implementation
npx --package=@j3w1/ui@4.0.0 j3w1-ui copy filterable-table --out ./vendor/j3w1/filterable-tableThe CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.
Public API
attributes
| Name | Type / signature | Meaning |
|---|---|---|
disabled | CustomEvent | Disable the native controls owned by this instance. |
loading | CustomEvent | Mark the primary control busy and prevent duplicate activation. |
properties
| Name | Type / signature | Meaning |
|---|---|---|
disabled | boolean | Delegates disabled state to native children. |
name | string | Native control name; application form keys remain explicit. |
selectedIds | string[] | Stable selected row IDs. |
methods
| Name | Type / signature | Meaning |
|---|---|---|
refresh | (): void | Reconnect behavior after replacing native child structure. |
focus | (options?: FocusOptions): void | Focus the first usable native control. |
sort | (column: number, direction?: 'ascending' | 'descending'): void | Sort existing native rows by a column. |
filter | (query: string): void | Filter existing rows by literal text. |
events
| Name | Type / signature | Meaning |
|---|---|---|
j3w1-sort | CustomEvent | The user requested sorting. |
j3w1-selection | CustomEvent | Selected row identities changed. |
Dependencies and verification
Registered components: search-field. Style dependencies: data-table, menu, select, table, search-field.
Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.
Full implementation manifest, API and token dependency closure
Canonical specification
Filterable table filterable-table
A list screen composed from a toolbar with search and filter, removable chips, a selectable sortable data-table with status badges, a count and pagination; with empty and loading variants.
Report an issue with this component
Tokens
Focus a role to inspect its values; follow its link for persistent usage and source details.
| Part | Role | Value | Use |
|---|---|---|---|
root.bg | color.surface.defaultapproveduse | #0d0707 | D-041 surface.default: color.primitive.modern.panel. |
root.border | color.border.defaultapproveduse | #482b2b | D-041 border.default: color.primitive.modern.divider. |
toolbar.bg | color.surface.chromeapproveduse | #000000 | D-041 surface.chrome: color.primitive.ink.0. |
toolbar.border | color.border.dividerapproveduse | #482b2b | D-041 border.divider: color.primitive.modern.divider. |
toolbar.separator | color.border.defaultapproveduse | #482b2b | D-041 border.default: color.primitive.modern.divider. |
search.bg | color.surface.inputapproveduse | #000000 | Form-control fill. |
search.border | color.border.controlapproveduse | #c81a1a | D-041 owner correction: red control and floating-frame borders, distinct from rose text. |
search.text | color.text.defaultapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
search.placeholder | color.text.placeholderapproveduse | #bd787d | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
search.icon | color.icon.defaultapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
filter.text | color.text.defaultapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
filter.border | color.border.controlapproveduse | #c81a1a | D-041 owner correction: red control and floating-frame borders, distinct from rose text. |
new.bg | color.action.primary.bgapproveduse | #7d1310 | Primary button fill; D-026 darkened it off color12, which stays fixed as heritage ANSI 12. |
new.text | color.action.primary.textapproveduse | #ffa2a7 | Primary action labels: bright rose across rest, hover and pressed states (D-033). |
chip.bg | color.surface.defaultapproveduse | #0d0707 | D-041 surface.default: color.primitive.modern.panel. |
chip.border | color.border.controlapproveduse | #c81a1a | D-041 owner correction: red control and floating-frame borders, distinct from rose text. |
chip.text | color.text.defaultapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
chip.remove | color.text.mutedapproveduse | #d4868b | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
header.text | color.text.brightapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
header.rule | color.border.strongobserveduse | #9e231f | Emphasised 2px rule: sticky headers, section ends. |
row.text | color.text.defaultapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
row.rule | color.border.dividerapproveduse | #482b2b | D-041 border.divider: color.primitive.modern.divider. |
row.bg-hover | color.interaction.hover.bgapproveduse | #1c1010 | D-041 interaction.hover.bg: color.primitive.modern.hover. |
row.ring | color.interaction.focus.ringobserveduse | #e53935 | 1px dashed focus ring on controls and rows. |
row.selected-bg | color.interaction.selection.bgapproveduse | #531310 | Selected row, tab, workspace; D-027 recessed the fill, leaving the 2px indicator and the check to carry selection. |
row.selected-text | color.interaction.selection.textobserveduse | #f4eeee | Text on the selection. |
row.ring-on-selection | color.interaction.focus.ring-containerobserveduse | #ffa2a7 | Focus colour for containers and explicitly mapped filled controls (D-015); component rules determine ring geometry. |
check.bg | color.surface.inputapproveduse | #000000 | Form-control fill. |
check.border | color.border.controlapproveduse | #c81a1a | D-041 owner correction: red control and floating-frame borders, distinct from rose text. |
check.checked-bg | color.action.primary.bgapproveduse | #7d1310 | Primary button fill; D-026 darkened it off color12, which stays fixed as heritage ANSI 12. |
check.glyph | color.action.primary.textapproveduse | #ffa2a7 | Primary action labels: bright rose across rest, hover and pressed states (D-033). |
badge.tested-fill | color.status.success.fillapproveduse | #82d9a0 | D-041 status.success.fill: color.primitive.modern.green. |
badge.tested-text | color.status.success.on-fillapproveduse | #000000 | Text on the success fill (7.13:1). |
badge.demonstrated-fill | color.status.info.fillapproveduse | #82b4ff | D-041 status.info.fill: color.primitive.modern.blue. |
badge.demonstrated-text | color.status.info.on-fillapproveduse | #000000 | Text on the info fill (7.08:1). |
empty.text | color.text.mutedapproveduse | #d4868b | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
empty.heading | color.text.brightapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
empty.glyph | color.icon.decorativeapproveduse | #986f72 | D-041 icon.decorative: color.primitive.modern.control. |
count.text | color.text.mutedapproveduse | #d4868b | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
pagination.text | color.text.defaultapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
pagination.current | color.text.brightapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
pagination.disabled | color.text.disabledapproveduse | #a3676b | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
State matrix
Every declared state and combination, statically rendered; the default cell is live. Sizes: compact, comfortable (switch with the density control above).
| State | Eight of 43 | Nothing matches | Loading | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
default |
priority: R1
maturity: stable
|
priority: R1
maturity: stable
search: marquee
No components matchThree filters are active; none of the 43 components passes all of them. |
priority: R1
maturity: stable
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
hover | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
focus-visible | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
selected | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
no-results | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Purpose
Proves that navigation, display and feedback components compose around one data-table (find, filter, select, page), including nothing matching and still loading. It shows a whole list screen’s states; it does not prescribe a product.
Anatomy
Parts as listed in the anatomy; badges carry ✓ (Tested) and i (Demonstrated). Every part is the composed component’s own markup and classes.
States
| State | Visual | Non-colour channel |
|---|---|---|
| default | each component at rest; Name sorted ascending with ▲; Prev disabled | aria-sort; the glyph |
| hover | the pointed row takes color.interaction.hover.bg; toolbar controls and chips hover only on their own pointer events | cursor |
| focus-visible | dashed color.interaction.focus.ring on the focused row (the third in the specimen); toolbar and chips at rest | the ring |
| selected | two rows in color.interaction.selection.bg with color.interaction.selection.text and a checked box; select-all mixed with – | aria-selected; ✓ and – glyphs; aria-checked="mixed" |
| no-results | the body is the “No components match” row; count reads 0 of 43; the search status line announces it; chips stay so the cause is visible | text; role="status" |
The composed components keep their own pressed, sorted, disabled, loading and open treatments; only the states the whole screen adds are declared here.
Keyboard
As in the key table, following the toolbar and data-table contracts. The region, the search landmark and the pagination navigation are offered by name. A disabled Prev is not focusable.
Accessibility
The search field’s label and its status line are visually hidden so the
toolbar stays one row; the status line announces “No components match”
through role="status". The count is a second status region and changes once
per filter. Rows are named by their Name cell through aria-labelledby on
the row checkbox. Badge glyphs keep status readable without colour. Text and
badges meet 4.5:1; boundaries and the ring on the selection fill meet 3:1.
Portability
Every state renders without script from the root hooks
data-state-selected and data-state-no-results and the table’s own
aria-busy.
Non-examples
A rounded search pill with a magnifier in a shadowed toolbar. Chips as pills with a coloured fill per category. Zebra-striped rows. A selected row shown by a coloured left bar and no fill. A blue Material checkbox. A skeleton shimmer while loading. Infinite scroll with no count and no pages.
Contrast report
19 declared pairs measured on resolved sRGB values with the WCAG 2.x formula; 0 waived (decorative only), 0 failing. A pass is a design target for the named role, not an application-wide conformance claim.
| Pair | State | Kind | Foreground | Background | Ratio | Min | Result |
|---|---|---|---|---|---|---|---|
| filterable-table default text | default | text | color.text.default #e99499 | color.surface.default #0d0707 | 8.72 | 4.5 | pass |
| filterable-table hover text | hover | text | color.text.default #e99499 | color.interaction.hover.bg #1c1010 | 8.10 | 4.5 | pass |
| filterable-table focus-visible text | focus-visible | text | color.text.default #e99499 | color.surface.default #0d0707 | 8.72 | 4.5 | pass |
| filterable-table focus-visible outline | focus-visible | ui | color.interaction.focus.ring #e53935 | color.surface.default #0d0707 | 4.73 | 3 | pass |
| filterable-table selected text | selected | text | color.interaction.selection.text #f4eeee | color.interaction.selection.bg #531310 | 12.47 | 4.5 | pass |
| filterable-table no-results text | no-results | text | color.text.muted #d4868b | color.surface.default #0d0707 | 7.22 | 4.5 | pass |
| toolbar controls on the chrome surface | — | text | color.text.default #e99499 | color.surface.chrome #000000 | 9.16 | 4.5 | pass |
| search box and filter button boundaries on the chrome surface | — | ui | color.border.control #c81a1a | color.surface.chrome #000000 | 3.62 | 3 | pass |
| column headers, empty-state heading and current page | — | text | color.text.bright #ffa2a7 | color.surface.default #0d0707 | 10.45 | 4.5 | pass |
| count, chip remove glyph and empty-state text | — | text | color.text.muted #d4868b | color.surface.default #0d0707 | 7.22 | 4.5 | pass |
| Tested badge | — | text | color.status.success.on-fill #000000 | color.status.success.fill #82d9a0 | 12.38 | 4.5 | pass |
| Demonstrated badge | — | text | color.status.info.on-fill #000000 | color.status.info.fill #82b4ff | 9.92 | 4.5 | pass |
| New button and checked boxes | — | text | color.action.primary.text #ffa2a7 | color.action.primary.bg #7d1310 | 5.57 | 4.5 | pass |
| ring on a selected row | selected | ui | color.interaction.focus.ring-container #ffa2a7 | color.interaction.selection.bg #531310 | 7.48 | 3 | pass |
| chip and checkbox boundaries | — | ui | color.border.control #c81a1a | color.surface.default #0d0707 | 3.44 | 3 | pass |
| disabled Prev link (exempt; house floor 3:1) | — | ui | color.text.disabled #a3676b | color.surface.default #0d0707 | 4.48 | 3 | pass |
| header rule (decorative) | — | ui | color.border.strong #9e231f | color.surface.default #0d0707 | 2.58 | 1 | pass |
| panel edge and toolbar separator (decorative) | — | ui | color.border.default #482b2b | color.surface.default #0d0707 | 1.58 | 1 | pass |
| row, toolbar and footer rules (decorative) | — | ui | color.border.divider #482b2b | color.surface.default #0d0707 | 1.58 | 1 | pass |
Keys
| Key | Action |
|---|---|
| Tab / Shift+Tab | Into the toolbar (the search input is its stop), then each chip's Remove button, then the table (the first row is its stop), then Next. |
| Arrow keys | Inside the toolbar move between the search field, Filter, Columns and New; inside the table move between rows; Home and End reach the first and last row. |
| Enter / Space | Open the Filter menu; toggle Columns; activate New or a chip's Remove; on a header sort by it; on a row's checkbox toggle its selection. |
| Escape | Clears a non-empty search; closes the Filter menu and returns focus to its button. |
For agents
Component JSON ·Implementation brief ·Build a task kit ·
Related: toolbar search-field menu icon-button button chip data-table badge empty-state pagination
Stress fixtures: FX-STATE-MATRIX FX-320 FX-360 FX-ZOOM-200 FX-RM FX-HC FX-I18N FX-RTL FX-OVERFLOW FX-DENSITY