Skip to content

refactor(data-table): keep ColumnSettings composable (toolbar API consistency)#400

Draft
itsprade wants to merge 2 commits into
mainfrom
feat/data-table-column-controls
Draft

refactor(data-table): keep ColumnSettings composable (toolbar API consistency)#400
itsprade wants to merge 2 commits into
mainfrom
feat/data-table-column-controls

Conversation

@itsprade

@itsprade itsprade commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Draft — API consistency follow-up to #382. The columns feature shipped in #382 (now on main, not yet released). This is a small refactor of the toolbar API before release, per review feedback.

Problem

#382 merged with column settings exposed as a boolean prop on the toolbar:

<DataTable.Toolbar columnSettings>
  <DataTable.Filters />
</DataTable.Toolbar>

That's inconsistent with every other toolbar piece (DataTable.Filters, DataTable.Pagination), which are composed sub-components. Flagged by @seiya — worth cleaning up before the next release so the API is uniform.

Change

Revert to a composed sub-component, DataTable.ColumnSettings:

<DataTable.Toolbar>
  <DataTable.Filters />
  <DataTable.ColumnSettings />   {/* right-aligns itself */}
</DataTable.Toolbar>
  • DataTable.ColumnSettings is public again (matches Filters / Pagination).
  • It carries ml-auto, so filters flow from the left and the Columns control parks on the right — one row, no consumer layout code.
  • DataTable.Toolbar is a plain flex row (drops the columnSettings prop).

Behavior and appearance are unchanged — this is purely an API shape change (and the feature hasn't shipped yet, so it's not a breaking change).

Not included (separate follow-up)

@seiya's larger idea — splitting Filters into slots (slot="add" addIconOnly / slot="chips") for finer toolbar-layout control — is a bigger Filters refactor and is not in this PR. Proposed as a follow-up so we can land the consistency fix now.

Verification

type-check, lint, test (1394 pass), oxfmt --check, and examples/vite-app type-check all pass; verified live in the DataTable Lab (filters + Columns share one row, popover works).

🤖 Generated with Claude Code

…bar API)

Per review (Seiya): the toolbar's built-in controls should share one API.
Revert the `columnSettings` toolbar prop back to a composed sub-component,
`DataTable.ColumnSettings`, matching `DataTable.Filters` / `DataTable.Pagination`.

- `DataTable.ColumnSettings` is public again; it right-aligns itself (`ml-auto`),
  so `<Filters/> <ColumnSettings/>` lays out filters-left / Columns-right on one
  row with no consumer layout work.
- `DataTable.Toolbar` is a plain flex row (no special props).
- Docs, catalogue skill, changeset, tests, and the lab example updated to the
  composed form.

Behavior and appearance are unchanged from the prop version.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@itsprade
itsprade force-pushed the feat/data-table-column-controls branch from acefd61 to df54949 Compare July 23, 2026 09:28
@itsprade itsprade changed the title feat(data-table): sticky columns and column settings (composable toolbar) refactor(data-table): keep ColumnSettings composable (toolbar API consistency) Jul 23, 2026
@IzumiSy

IzumiSy commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

@copilot rebase branch to main

Copilot AI commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

@copilot rebase branch to main

Rebased locally onto main; the updated HEAD is 962d9da. Pushing the rebased branch back to the PR is currently blocked by an engine-tools-report_progress GPG signing failure in the sync step.

Copilot AI requested a review from IzumiSy July 24, 2026 07:15
…n-controls

# Conflicts:
#	docs/components/data-table.md
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.

3 participants