Table

Try it in 3 steps

1. 1

   Prepare the pinned core package

   Requires Node.js 20 or later and npm. Create a temporary project pinned to table-core 9.2.6.

   demo=$(mktemp -d "${TMPDIR:-/tmp}/tanstack-table.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @tanstack/table-core@9.2.6Copy
2. 2

   Compose sorting and pagination

   Define name and score columns, then compose descending score sorting with a two-row page.

   printf '%s\n' 'import {constructTable,createColumnHelper,createPaginatedRowModel,createSortedRowModel,rowPaginationFeature,rowSortingFeature,tableFeatures} from '\''@tanstack/table-core'\''' 'import {storeReactivityBindings} from '\''@tanstack/table-core/store-reactivity-bindings'\''' 'const features=tableFeatures({coreReactivityFeature:storeReactivityBindings(),rowSortingFeature,sortedRowModel:createSortedRowModel(),rowPaginationFeature,paginatedRowModel:createPaginatedRowModel()})' 'const h=createColumnHelper()' 'const table=constructTable({features,data:[{id:'\''ada'\'',name:'\''Ada'\'',score:91},{id:'\''grace'\'',name:'\''Grace'\'',score:98},{id:'\''linus'\'',name:'\''Linus'\'',score:87}],columns:h.columns([h.accessor('\''name'\'',{header:'\''Name'\''}),h.accessor('\''score'\'',{header:'\''Score'\''})]),getRowId:r=>r.id,initialState:{sorting:[{id:'\''score'\'',desc:true}],pagination:{pageIndex:0,pageSize:2}}})' 'console.log(table.getRowModel().rows.map(r=>r.getValue('\''name'\'')).join('\'','\''))' > demo.mjsCopy
3. 3

   Verify the visible rows

   Require the first page to contain only Grace and Ada in descending score order.

   test "$(node demo.mjs)" = "Grace,Ada"Copy

Built with

• TypeScript
• React
• Svelte
• Vue
• JavaScript

Categories and tags

GitHub data

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Explore next

• shadcn/ui125,122 Stars

  2 shared tag(s) · 1 shared category(s) · Same language

  copy component source into a project and grow it into your own UI library

  TypeScript
• Virtual7,128 Stars

  5 shared tag(s) · 1 shared category(s) · Same language

  A headless virtualizer that calculates only the items near the viewport to reduce rendering work for long lists

  TypeScript
• TanStack Query50,394 Stars

  4 shared tag(s) · 1 shared category(s) · Same language

  Manage fetching, caching, refetching, and mutations for remote server state outside local UI-state code

  TypeScript
• Storybook91,200 Stars

  4 shared tag(s) · Same language

  capture UI states once and reuse them across docs, interaction tests, and agent tooling

  TypeScript
• Router15,152 Stars

  4 shared tag(s) · Same language

  A type-safe React router that connects routes, search parameters, and navigation through one inferred type model

  TypeScript
• Builder.io SDKs8,863 Stars

  4 shared tag(s) · Same language

  Connect a hosted visual-development platform to existing React, Vue, Svelte, and other frontends through open SDKs

  TypeScript