Skip to content

Add data-table built on @tanstack/angular-table#63

Merged
sjoerdbeentjes merged 6 commits into
mainfrom
feat/angular-data-table
Jul 1, 2026
Merged

Add data-table built on @tanstack/angular-table#63
sjoerdbeentjes merged 6 commits into
mainfrom
feat/angular-data-table

Conversation

@sjoerdbeentjes

@sjoerdbeentjes sjoerdbeentjes commented Jun 30, 2026

Copy link
Copy Markdown
Collaborator

Adds a data-table to @surfnet/angular, mirroring the React one. Built on @tanstack/angular-table on top of the existing helm table, with sorting, filtering, pagination, column visibility and row selection.

What's included:

  • injectDataTable() — headless helper (based on React's useDataTable)
  • HlmDataTableContent, HlmDataTablePagination, hlmDataTableToolbar
  • Default / Empty / CustomToolbar stories

Note: uses @tanstack/angular-table v8 (stable, matches React's table version).

Verified: build, type-check and format pass; sorting, filtering and row selection work in Storybook.

@sjoerdbeentjes sjoerdbeentjes changed the title feat(angular): add data-table built on @tanstack/angular-table Add data-table built on @tanstack/angular-table Jun 30, 2026
@sjoerdbeentjes sjoerdbeentjes force-pushed the feat/angular-data-table branch from 027aad5 to b0a1066 Compare June 30, 2026 13:30
@sjoerdbeentjes sjoerdbeentjes requested a review from loofpc June 30, 2026 14:00
Comment thread packages/angular/src/lib/ui/data-table/src/lib/hlm-data-table.stories.ts Outdated
Mirror the React data-table for @surfnet/angular. Ships a headless
injectDataTable helper plus presentational pieces (HlmDataTableContent,
HlmDataTablePagination, hlmDataTableToolbar) for sorting, filtering,
pagination, column visibility and row selection on top of the existing
helm table.

Uses @tanstack/angular-table v8 (stable, version-matched to React's
@tanstack/react-table) and reuses the existing dataTableContract.
ng-packagr doesn't resolve tsconfig path aliases when bundling, so vendored
helm-to-helm imports through @spartan-ng/helm/* were leaking into dist as
unresolved external imports (that package doesn't exist on npm), sometimes
alongside a correctly inlined duplicate of the same symbol. Add a codemod
(fix-helm-imports, run via jiti) to rewrite them to relative paths after
every `ng g` run.
Record the @spartan-ng/helm alias/ng-packagr incompatibility and the
decision to rewrite cross-component imports to relative paths, per the
existing PoC decision log convention (brought over from main, which this
branch predates).
@sjoerdbeentjes sjoerdbeentjes force-pushed the feat/angular-data-table branch from 0d19d2c to 22975d9 Compare July 1, 2026 14:17
@sjoerdbeentjes sjoerdbeentjes merged commit b76499f into main Jul 1, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants