Skip to content

feat(fleet): standard DataTable with in-table filters, sorting, pagination#42

Merged
Bugs5382 merged 16 commits into
mainfrom
feat/41-fm-table-controls
Jul 8, 2026
Merged

feat(fleet): standard DataTable with in-table filters, sorting, pagination#42
Bugs5382 merged 16 commits into
mainfrom
feat/41-fm-table-controls

Conversation

@Bugs5382

@Bugs5382 Bugs5382 commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

What and why

Adds one shared, config-driven <DataTable> (built on @tanstack/react-table) and adopts it across all eight Fleet Manager list surfaces. Every table gets the standard control set — sortable column headers, per-column filtering, and pagination — following the canonical shadcn/TanStack DataTable pattern on the app's existing shadcn tokens. Table state (sorting, column filters, pagination) is held in local React state, with no URL/query coupling.

Closes #41.

Controls

  • Sorting: every sortable column header is a button with a direction icon (up / down / unsorted); clicking toggles ascending and descending.
  • Filtering (in-table): a filter row directly beneath the headers — a text input for text columns and a single-select of the column's distinct values for enum columns. Choosing a value replaces the current one; selecting "All" clears it.
  • Pagination: a footer with rows-per-page (10/20/30/50), "Page X of Y", and Prev/Next, always visible.

Surfaces migrated

Certificates, Enrollment, Audit, Nodes, Root, Profiles, Protocols, and the nested node cert inventory. Each page's hand-rolled table and ad-hoc filter controls are replaced by column definitions plus <DataTable>, preserving every cell renderer and action (Renew, Enable/Disable, the Revoke dialog, enrollment approve).

Notes

This shipped after live review. The first cut placed filters in a toolbar above the table and synced all control state to the URL query; per feedback both were dropped in favor of the standard in-table controls backed by local state. The faceted-filter toolbar component and the URL-state hook were removed. If shareable or deep-linkable table state is wanted later, it can be reintroduced deliberately as an opt-in.

Testing

npm test (101 tests), npm run build, eslint, prettier, and task license all clean. Sorting, filtering, and pagination were verified in a real browser.

Follow-ups (non-blocking)

  • Optional emptyMessage prop to distinguish a genuinely-empty table from a filtered-empty one (both currently show "No matching rows.").

@Bugs5382 Bugs5382 self-assigned this Jul 8, 2026
@github-actions github-actions Bot added the enhancement New feature (feat). Minor version bump. label Jul 8, 2026
@Bugs5382 Bugs5382 changed the title feat(fleet): in-table search, filter, sort, pagination feat(fleet): standard DataTable with in-table filters, sorting, pagination Jul 8, 2026
@Bugs5382 Bugs5382 merged commit cb8e7cf into main Jul 8, 2026
21 of 22 checks passed
@Bugs5382 Bugs5382 deleted the feat/41-fm-table-controls branch July 8, 2026 18:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature (feat). Minor version bump.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(fleet): in-table search, filter, sort, pagination

1 participant