DataTable

ソート・フィルタ・ページネーション対応のデータテーブル。

インポート

'use client'

基本的な使い方

interface User {
  id: number
  name: string
  email: string
  status: 'active' | 'inactive'
}
 
const columns = [
  { id: 'name', header: '名前', accessorKey: 'name', sortable: true },
  { id: 'email', header: 'メール', accessorKey: 'email' },
  { id: 'status', header: 'ステータス', accessorKey: 'status' },
]
 
const data: User[] = [
  { id: 1, name: '山田太郎', email: '[email protected]', status: 'active' },
  { id: 2, name: '鈴木花子', email: '[email protected]', status: 'inactive' },
]
 
<DataTable columns={columns} data={data} />

ページネーション付き

<DataTable
  columns={columns}
  data={data}
  pagination={{
    pageSize: 10,
    pageIndex: 0,
  }}
/>

Props

Prop	Type	Default	Description
`columns*`	`ColumnDef[]`	`-`	カラム定義の配列
`data*`	`T[]`	`-`	テーブルに表示するデータ
`pagination`	`{ pageSize: number; pageIndex: number }`	`-`	ページネーション設定

DataTable

インポート

基本的な使い方

ページネーション付き

Props

On this page