Skip to content

feat(table): add Table.SortIcon and TanStack Table sortable/resizable demo#273

Open
invisal wants to merge 4 commits intocloudflare:mainfrom
invisal:feat/table-sort-icon
Open

feat(table): add Table.SortIcon and TanStack Table sortable/resizable demo#273
invisal wants to merge 4 commits intocloudflare:mainfrom
invisal:feat/table-sort-icon

Conversation

@invisal
Copy link
Copy Markdown
Contributor

@invisal invisal commented Mar 20, 2026

Summary

  • Adds a new Table.SortIcon sub-component for use inside Table.Head to indicate sort direction.
  • The direction prop accepts false | "asc" | "desc" — matching TanStack Table's column.getIsSorted() return type exactly, so consumers can pass the value directly without any conversion.
  • Fixes Table.ResizeHandle to prevent click events from propagating to the column's sort handler after a drag.
  • Adds a TanStack Table integration demo to the docs showing sortable columns and draggable column resizing working together.

Usage

// With TanStack Table — no conversion needed
const isSorted = header.column.getIsSorted(); // false | "asc" | "desc"
<Table.SortIcon direction={isSorted} />

// Standalone
<Table.SortIcon direction="asc" />

invisal added 3 commits March 20, 2026 10:43
… demo

Add Table.SortIcon sub-component with direction prop (asc/desc/none), fix Table.ResizeHandle to prevent click propagation after drag, and add TanStack Table integration demo with sortable columns and column resizing.
Replace outdated manual sort icon pattern (ArrowUp/ArrowDown/ArrowsDownUp)
with Table.SortIcon, add canSort guard, filler col/row pattern, proper
indentation, and escape template literals in the code snippet.
@invisal invisal marked this pull request as draft March 20, 2026 15:42
@invisal invisal marked this pull request as ready for review March 22, 2026 19:42
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 23, 2026

npm i https://pkg.pr.new/@cloudflare/kumo@273

commit: a7a5c86

@github-actions
Copy link
Copy Markdown
Contributor

Docs Preview

View docs preview

Commit: a7a5c86

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.

1 participant