feat(toolbar): add a toolbar-end slot for consumer controls - #29
Merged
Merged
Conversation
Consumers wanting their own controls on the toolbar line (e.g. "Share view"/"Reset view" acting on the table's view state) had to put them in a separate row above the table — costly on a phone — or append DOM into the internal `.dt-toolbar` after mount, which breaks silently on any markup change. Adds a public slot at the end of the toolbar's action row, mirroring how Solid (JSXElement) and React (ReactNode), Vue's `#toolbar-end` slot, and vanilla's `toolbarEnd` option plus `setToolbarEnd(node)`. It renders right-aligned after "Clear all", and no wrapper at all when absent. The demos' persisted-table section now shows its view controls there. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
julien-f
added a commit
to julien-f/steam-common-games
that referenced
this pull request
Oct 4, 2026
U30 waits on vatesfr/data-table#29 (toolbar slot), U50 on data-table's own backlog U1 (checkbox names), U11 on its U5 (range bounds) and #30 (presets). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
julien-f
added a commit
that referenced
this pull request
Oct 4, 2026
A typed toolbar slot for consumer controls (PR #29, U9). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
.dt-toolbarafter mount, which depends on internal markup and breaks silently.showSearch/showColumns): a typed, per-adapter toolbar option instead of relying on internal class names.API
toolbarEnd?: JSXElementonDataTableView/DataTabletoolbarEnd?: ReactNodeonDataTableView/DataTable#toolbar-endslot (forwarded by<DataTable>)toolbarEnd?: Node | nulloption +setToolbarEnd(node).dt-toolbar-endwrapper (Vue:.dt__toolbar-end), right-aligned (margin-left: auto, dropped to0while "Clear all" is shown so the two sit together).null/falsein React) → no wrapper rendered.JSXElementrather thanJSX.Element: the latter failsvite:dts's type rollup ("Unable to follow symbol for JSX").docs/toolbar.md("Consumer toolbar content").Tests
margin-left: 0,falserenders nothing; vanilla:setToolbarEndadds, replaces and removes the node.npm run test: all pass (core 523, react 338, vue 336, solid 248, vanilla 270).npm run type-check,npm run lint(0 problems),npm run format:check,npm run check:docs,npm run buildandsizefor every package: pass. The four demo apps build.🤖 Generated with Claude Code