Table

3ステップで試す

1. 1

   固定版のコアを準備する

   Node.js 20以上とnpmが必要です。一時ディレクトリに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.6コピー
2. 2

   並べ替えとページ分割を構成する

   名前と点数の列を定義し、点数の降順に並べて1ページを2件にする行モデルを構成します。

   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.mjsコピー
3. 3

   表示対象の行を検証する

   最初のページが点数の高いGrace、Adaの順だけになることを確認します。

   test "$(node demo.mjs)" = "Grace,Ada"コピー

Built with

• TypeScript
• React
• Svelte
• Vue
• JavaScript

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• shadcn/ui125,122 Stars

  共通タグ 2件 · 共通カテゴリ 1件 · 同じ言語

  コンポーネントのソースをプロジェクトへ取り込み、自分のUIライブラリとして育てる

  TypeScript
• Virtual7,128 Stars

  共通タグ 5件 · 共通カテゴリ 1件 · 同じ言語

  長い一覧のうち画面付近の要素だけを計算し、描画量を抑えるヘッドレス仮想化ライブラリ

  TypeScript
• TanStack Query50,394 Stars

  共通タグ 4件 · 共通カテゴリ 1件 · 同じ言語

  remote/server stateのfetch・cache・refetch・mutationをUI frameworkから分離して管理するasync state library

  TypeScript
• Storybook91,200 Stars

  共通タグ 4件 · 同じ言語

  UI状態をstoryとして保存し、Docs・interaction test・AI toolへ再利用するfrontend workshop

  TypeScript
• Router15,152 Stars

  共通タグ 4件 · 同じ言語

  React向けの型安全な経路定義、検索条件、画面遷移を一つの型情報で結ぶルーター

  TypeScript
• Builder.io SDKs8,863 Stars

  共通タグ 4件 · 同じ言語

  Visual Development platformを既存のReact・Vue・Svelte等へ接続するOSS SDK群

  TypeScript