table component

[karamba228]

Reference Issues or PRs

What does this implement/fix?

Put a x in the boxes that apply

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds a feature)
• Breaking change (fix or feature that would cause existing features not to work as expected)
• Documentation Update
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no API changes)
• Build related changes
• Other (please describe):

Testing

• Did you test the pull request locally?
• Did you add new tests?

Documentation

Access-centered content checklist

Text styling

• The content is written with plain language (where relevant).
• If there are headers, they use the proper header tags (with only one level-one header: H1 or # in markdown).
• All links describe where they link to (for example, check the Nebari website).
• This content adheres to the Nebari style guides.

Non-text content

• All content is represented as text (for example, images need alt text, and videos need captions or descriptive transcripts).
• If there are emojis, there are not more than three in a row.
• Don't use flashing GIFs or videos.
• If the content were to be read as plain text, it still makes sense, and no information is missing.

Any other comments?

[smeragoel]

Nice work @karamba228! A few things, roughly in priority order:

1. Accessibility (CC assisted code suggestions)

   1. Scroll container isn't keyboard-scrollable: The overflow-x-auto wrapper in Table has no tabIndex={0} / role="region" / aria-label, so when a static table overflows horizontally, a keyboard-only user can't scroll it (WCAG 2.1.1). Could we make the container focusable with an accessible name when it's scrollable?
   2. Sortable TableHead isn't announced as operable: A <th> with onClick + tabIndex gets keyboard activation, but screen readers don't convey it as a control (no role="button" / inner <button>). aria-sort communicates the sort state but not that the header is actionable. The WAI-ARIA sortable-table pattern wraps the label in a real <button> which could be worth considering.
   3. aria-sort is inconsistent between tests and stories: The stories leave inactive sortable columns aria-sort={undefined}, so assistive technology can't tell they're sortable; the test uses aria-sort="none". So we could make inactive-but-sortable headers "none" in the stories too.

2. UX / design

   1. Hover is per-cell instead of per-row: For a data table, row-level hover should be the default since it improves scannability.
   2. Sort indicators use Unicode glyphs (↑ ↓ ↕) rather than lucide icons, which the rest of the system uses. lucide (ArrowUp/ArrowDown/ChevronsUpDown) would render consistently and stay on-system.

3. Stories

   1. No complete default story: Other components lead with a complete Default, but Table opens with Props and a header-only render. Could we add a complete Default (caption + header + body + footer) as the first story?
   
   2. Additional examples: Table with a footer, selected-row state, empty-state example would also be useful.

[smeragoel]

Thanks for the changes @karamba228! A few additional things:

1. There is a double border on the header-only table
2. @jbouder suggested adding a separate DataTable component to the design system which offers a richer experience, and supports selection, sortable columns etc. Since that will be a separate component, we can remove those stories from this component (sorting, selected row)
3. We can remove the Cell story since it is not meaningful standalone.
4. Empty state container is hoverable when it shouldn't be. Also, let's remove the footer in this example.

[jbouder]

A few comments on the implementation:

• The header text looks too small
• Should the cell background be white, to match the design?
• I don't like this story, it has too much going on... 2 footers with 2 different background?

[smeragoel]

1. Good catch, the header text needs to match the designs (both header and cell text are 14px)
2. Yeah that makes sense.
3. Yeah I am not a big fan of the "Environment resource allocation" footers but I figured we need to add them for examples. Maybe we can just keep it on one of the story?

[jbouder]

Better, but the table header should still be gray. Sorry if there was any confusion.