Data table

実データのためのテーブルです。並べ替え、検索、行の選択、固定列、スティッキーヘッダー、ページネーションを備えています。

		Method	Country
[email protected]	paid	Card	United States	2026-01-01	$5.00
[email protected]	pending	PayPal	Japan	2026-02-02	$84.20
[email protected]	failed	Bank	Germany	2026-03-03	$163.40
[email protected]	paid	Apple Pay	Brazil	2026-04-04	$242.60
[email protected]	pending	Card	India	2026-05-05	$321.80
[email protected]	failed	PayPal	United States	2026-06-06	$401.00
[email protected]	paid	Bank	Japan	2026-07-07	$480.10
[email protected]	pending	Apple Pay	Germany	2026-08-08	$559.30
[email protected]	failed	Card	Brazil	2026-09-09	$638.50
[email protected]	paid	PayPal	India	2026-01-10	$717.70

0 of 42 rows selected

Page 1 of 5

"use client"

import { Badge, BadgeDot } from "@/components/ui/badge"
import {
  createDataTableColumns,
  DataTable,
  DataTableColumnHeader,
  DataTableContent,
  DataTablePagination,
  DataTableSearch,
  DataTableSelectAll,
  DataTableSelectRow,
  DataTableToolbar,
  DataTableViewOptions,
  useDataTable,
} from "@/components/ui/data-table"

type Payment = {
  id: string
  email: string
  status: "paid" | "pending" | "failed"
  amount: number
  method: string
  country: string
  date: string
}

const statuses = ["paid", "pending", "failed"] as const
const methods = ["Card", "PayPal", "Bank", "Apple Pay"]
const countries = ["United States", "Germany", "India", "Japan", "Brazil"]
const names = ["olivia", "jackson", "isabella", "william", "sofia", "liam"]

function makePayments(count: number): Payment[] {
  return Array.from({ length: count }, (_, index) => ({
    id: `pay_${String(index + 1).padStart(4, "0")}`,
    email: `${names[index % names.length]}.${Math.floor(index / names.length) + 1}@example.com`,
    status: statuses[(index * 7) % 3],
    amount: Math.round(((index * 7919) % 100000) / 10) / 10 + 5,
    method: methods[index % methods.length],
    country: countries[(index * 3) % countries.length],
    date: `2026-${String((index % 9) + 1).padStart(2, "0")}-${String((index % 27) + 1).padStart(2, "0")}`,
  }))
}

const payments = makePayments(42)

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
})

const statusVariant = {
  paid: "success",
  pending: "warning",
  failed: "destructive",
} as const

const helper = createDataTableColumns<Payment>()

const columns = helper.columns([
  helper.display({
    id: "select",
    header: ({ table }) => <DataTableSelectAll table={table} />,
    cell: ({ row }) => <DataTableSelectRow row={row} />,
    enableSorting: false,
    enableHiding: false,
  }),
  helper.accessor("email", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  }),
  helper.accessor("status", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    cell: ({ getValue }) => {
      const status = getValue()
      return (
        <Badge variant={statusVariant[status]}>
          <BadgeDot />
          <span className="capitalize">{status}</span>
        </Badge>
      )
    },
  }),
  helper.accessor("method", { header: "Method" }),
  helper.accessor("country", { header: "Country" }),
  helper.accessor("date", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Date" />
    ),
  }),
  helper.accessor("amount", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Amount" />
    ),
    cell: ({ getValue }) => currency.format(getValue()),
    meta: { align: "end" },
  }),
])

export function DataTableDemo() {
  const table = useDataTable({
    data: payments,
    columns,
    getRowId: (row) => row.id,
  })

  return (
    <DataTable table={table}>
      <DataTableToolbar>
        <DataTableSearch placeholder="Search payments…" />
        <DataTableViewOptions />
      </DataTableToolbar>
      <DataTableContent emptyMessage="No payments match your search." />
      <DataTablePagination />
    </DataTable>
  )
}

インストール

pnpm dlx shadcn@latest add https://hextaui.com/r/data-table.json

コンポーネント、HextaUIのテーマトークン、依存するHextaUIコンポーネントを追加します。

まだ追加していない場合は、グローバルCSSにテーマトークンを追加してください。

依存関係をインストールします。

pnpm add @base-ui/react @tabler/icons-react @tanstack/react-table class-variance-authority cn

次のコードをコピーしてプロジェクトに貼り付けてください。

components/ui/data-table.tsx

"use client"

import * as React from "react"
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
import {
  IconAdjustmentsHorizontal,
  IconArrowDown,
  IconArrowUp,

components/ui/table.tsx

"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

function mergeRefs<T>(
  ...refs: (React.Ref<T> | ((node: T | null) => void) | undefined)[]

components/ui/button.tsx

"use client"

import * as React from "react"
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

components/ui/checkbox.tsx

"use client"

import * as React from "react"
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group"
import { IconCheck, IconMinus } from "@tabler/icons-react"
import { cn } from "cn"

components/ui/skeleton.tsx

"use client"

import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

インポートパスは、お使いのプロジェクト構成に合わせて更新してください。

使い方

Data table は、並べ替え、フィルタリング、ページネーション、選択、列の表示切り替えがすでに組み込まれた TanStack Table v9 です。createDataTableColumns で列を一度定義し、useDataTable でテーブルを作成し、必要なパーツを組み合わせます。

import {
  createDataTableColumns,
  DataTable,
  DataTableColumnHeader,
  DataTableContent,
  DataTablePagination,
  DataTableSearch,
  DataTableSelectAll,
  DataTableSelectRow,
  DataTableToolbar,
  DataTableViewOptions,
  useDataTable,
} from "@/components/ui/data-table"

type Payment = { id: string; email: string; amount: number }

const helper = createDataTableColumns<Payment>()

const columns = helper.columns([
  helper.display({
    id: "select",
    header: ({ table }) => <DataTableSelectAll table={table} />,
    cell: ({ row }) => <DataTableSelectRow row={row} />,
    enableSorting: false,
    enableHiding: false,
  }),
  helper.accessor("email", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  }),
  helper.accessor("amount", {
    header: "Amount",
    meta: { align: "end" },
  }),
])

export function Payments({ data }: { data: Payment[] }) {
  const table = useDataTable({
    data,
    columns,
    getRowId: (row) => row.id,
  })

  return (
    <DataTable table={table}>
      <DataTableToolbar>
        <DataTableSearch placeholder="Search payments…" />
        <DataTableViewOptions />
      </DataTableToolbar>
      <DataTableContent />
      <DataTablePagination />
    </DataTable>
  )
}

sorting や行の選択など、自分で管理したい TanStack の state を、その変更ハンドラーとともに渡します。

const [sorting, setSorting] = React.useState([{ id: "date", desc: true }])

const table = useDataTable({
  data,
  columns,
  state: { sorting },
  onSortingChange: setSorting,
})

コンポジション

DataTable
├── DataTableToolbar
│   ├── DataTableSearch
│   └── DataTableViewOptions
├── DataTableContent
└── DataTablePagination

DataTableColumnHeader、DataTableSelectAll、DataTableSelectRow は、列の header または cell として、列定義の中に入れます。

例

プレーンなテーブル

Data table の構成要素となるプレーンな <Table /> パーツ。静的なデータに対して、キャプションとフッターの合計とともに、単独で使えます。

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const invoices = [
  { id: "INV001", status: "Paid", method: "Credit card", amount: 250 },
  { id: "INV002", status: "Pending", method: "PayPal", amount: 150 },
  { id: "INV003", status: "Unpaid", method: "Bank transfer", amount: 350 },
  { id: "INV004", status: "Paid", method: "Credit card", amount: 450 },
]

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
})

export function TableDemo() {
  const total = invoices.reduce((sum, invoice) => sum + invoice.amount, 0)

  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead align="end">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.id}>
            <TableCell>{invoice.id}</TableCell>
            <TableCell>{invoice.status}</TableCell>
            <TableCell>{invoice.method}</TableCell>
            <TableCell align="end">{currency.format(invoice.amount)}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell align="end">{currency.format(total)}</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

読み込み中

loading を指定すると、スケルトン行が実際の行と同じ空間を埋めるため、データが届いたときに何も跳ねません。その間、テーブルには aria-busy が付きます。

"use client"

import * as React from "react"

import { Badge, BadgeDot } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  createDataTableColumns,
  DataTable,
  DataTableColumnHeader,
  DataTableContent,
  DataTablePagination,
  DataTableSearch,
  DataTableSelectAll,
  DataTableSelectRow,
  DataTableToolbar,
  DataTableViewOptions,
  useDataTable,
} from "@/components/ui/data-table"

type Payment = {
  id: string
  email: string
  status: "paid" | "pending" | "failed"
  amount: number
  method: string
  country: string
  date: string
}

const statuses = ["paid", "pending", "failed"] as const
const methods = ["Card", "PayPal", "Bank", "Apple Pay"]
const countries = ["United States", "Germany", "India", "Japan", "Brazil"]
const names = ["olivia", "jackson", "isabella", "william", "sofia", "liam"]

function makePayments(count: number): Payment[] {
  return Array.from({ length: count }, (_, index) => ({
    id: `pay_${String(index + 1).padStart(4, "0")}`,
    email: `${names[index % names.length]}.${Math.floor(index / names.length) + 1}@example.com`,
    status: statuses[(index * 7) % 3],
    amount: Math.round(((index * 7919) % 100000) / 10) / 10 + 5,
    method: methods[index % methods.length],
    country: countries[(index * 3) % countries.length],
    date: `2026-${String((index % 9) + 1).padStart(2, "0")}-${String((index % 27) + 1).padStart(2, "0")}`,
  }))
}

const payments = makePayments(5)

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
})

const statusVariant = {
  paid: "success",
  pending: "warning",
  failed: "destructive",
} as const

const helper = createDataTableColumns<Payment>()

const columns = helper.columns([
  helper.display({
    id: "select",
    header: ({ table }) => <DataTableSelectAll table={table} />,
    cell: ({ row }) => <DataTableSelectRow row={row} />,
    enableSorting: false,
    enableHiding: false,
  }),
  helper.accessor("email", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  }),
  helper.accessor("status", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    cell: ({ getValue }) => {
      const status = getValue()
      return (
        <Badge variant={statusVariant[status]}>
          <BadgeDot />
          <span className="capitalize">{status}</span>
        </Badge>
      )
    },
  }),
  helper.accessor("method", { header: "Method" }),
  helper.accessor("country", { header: "Country" }),
  helper.accessor("date", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Date" />
    ),
  }),
  helper.accessor("amount", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Amount" />
    ),
    cell: ({ getValue }) => currency.format(getValue()),
    meta: { align: "end" },
  }),
])

export function DataTableLoading() {
  const [loading, setLoading] = React.useState(true)
  const table = useDataTable({
    data: payments,
    columns,
    getRowId: (row) => row.id,
  })

  return (
    <div className="flex w-full flex-col items-start gap-3">
      <Button
        variant="outline"
        size="sm"
        onClick={() => setLoading((value) => !value)}
      >
        {loading ? "Finish loading" : "Load again"}
      </Button>
      <DataTable table={table}>
        <DataTableToolbar>
          <DataTableSearch placeholder="Search payments…" />
          <DataTableViewOptions />
        </DataTableToolbar>
        <DataTableContent loading={loading} />
        <DataTablePagination />
      </DataTable>
    </div>
  )
}

Empty

emptyMessage は、データがない場合や、検索に一致するものがない場合に、本体を埋めます。

"use client"

import { Badge, BadgeDot } from "@/components/ui/badge"
import {
  createDataTableColumns,
  DataTable,
  DataTableColumnHeader,
  DataTableContent,
  DataTablePagination,
  DataTableSearch,
  DataTableSelectAll,
  DataTableSelectRow,
  DataTableToolbar,
  DataTableViewOptions,
  useDataTable,
} from "@/components/ui/data-table"

type Payment = {
  id: string
  email: string
  status: "paid" | "pending" | "failed"
  amount: number
  method: string
  country: string
  date: string
}

const statuses = ["paid", "pending", "failed"] as const
const methods = ["Card", "PayPal", "Bank", "Apple Pay"]
const countries = ["United States", "Germany", "India", "Japan", "Brazil"]
const names = ["olivia", "jackson", "isabella", "william", "sofia", "liam"]

function makePayments(count: number): Payment[] {
  return Array.from({ length: count }, (_, index) => ({
    id: `pay_${String(index + 1).padStart(4, "0")}`,
    email: `${names[index % names.length]}.${Math.floor(index / names.length) + 1}@example.com`,
    status: statuses[(index * 7) % 3],
    amount: Math.round(((index * 7919) % 100000) / 10) / 10 + 5,
    method: methods[index % methods.length],
    country: countries[(index * 3) % countries.length],
    date: `2026-${String((index % 9) + 1).padStart(2, "0")}-${String((index % 27) + 1).padStart(2, "0")}`,
  }))
}

const payments: Payment[] = []

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
})

const statusVariant = {
  paid: "success",
  pending: "warning",
  failed: "destructive",
} as const

const helper = createDataTableColumns<Payment>()

const columns = helper.columns([
  helper.display({
    id: "select",
    header: ({ table }) => <DataTableSelectAll table={table} />,
    cell: ({ row }) => <DataTableSelectRow row={row} />,
    enableSorting: false,
    enableHiding: false,
  }),
  helper.accessor("email", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  }),
  helper.accessor("status", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    cell: ({ getValue }) => {
      const status = getValue()
      return (
        <Badge variant={statusVariant[status]}>
          <BadgeDot />
          <span className="capitalize">{status}</span>
        </Badge>
      )
    },
  }),
  helper.accessor("method", { header: "Method" }),
  helper.accessor("country", { header: "Country" }),
  helper.accessor("date", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Date" />
    ),
  }),
  helper.accessor("amount", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Amount" />
    ),
    cell: ({ getValue }) => currency.format(getValue()),
    meta: { align: "end" },
  }),
])

export function DataTableEmpty() {
  const table = useDataTable({
    data: payments,
    columns,
    getRowId: (row) => row.id,
  })

  return (
    <DataTable table={table}>
      <DataTableToolbar>
        <DataTableSearch placeholder="Search payments…" />
        <DataTableViewOptions />
      </DataTableToolbar>
      <DataTableContent emptyMessage="No payments yet." />
      <DataTablePagination />
    </DataTable>
  )
}

固定ヘッダー

containerClassName でコンテナに最大の高さを指定し、stickyHeader を設定します。ヘッダーは固定されたままで、行がその下にスクロールすると細い線が加わります。チェックボックス上で Shift キーを押しながらドラッグし、ボックスの端に近づくとスクロールします。

"use client"

import { Badge, BadgeDot } from "@/components/ui/badge"
import {
  createDataTableColumns,
  DataTable,
  DataTableColumnHeader,
  DataTableContent,
  DataTablePagination,
  DataTableSearch,
  DataTableSelectAll,
  DataTableSelectRow,
  DataTableToolbar,
  DataTableViewOptions,
  useDataTable,
} from "@/components/ui/data-table"

type Payment = {
  id: string
  email: string
  status: "paid" | "pending" | "failed"
  amount: number
  method: string
  country: string
  date: string
}

const statuses = ["paid", "pending", "failed"] as const
const methods = ["Card", "PayPal", "Bank", "Apple Pay"]
const countries = ["United States", "Germany", "India", "Japan", "Brazil"]
const names = ["olivia", "jackson", "isabella", "william", "sofia", "liam"]

function makePayments(count: number): Payment[] {
  return Array.from({ length: count }, (_, index) => ({
    id: `pay_${String(index + 1).padStart(4, "0")}`,
    email: `${names[index % names.length]}.${Math.floor(index / names.length) + 1}@example.com`,
    status: statuses[(index * 7) % 3],
    amount: Math.round(((index * 7919) % 100000) / 10) / 10 + 5,
    method: methods[index % methods.length],
    country: countries[(index * 3) % countries.length],
    date: `2026-${String((index % 9) + 1).padStart(2, "0")}-${String((index % 27) + 1).padStart(2, "0")}`,
  }))
}

const payments = makePayments(1000)

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
})

const statusVariant = {
  paid: "success",
  pending: "warning",
  failed: "destructive",
} as const

const helper = createDataTableColumns<Payment>()

const columns = helper.columns([
  helper.display({
    id: "select",
    header: ({ table }) => <DataTableSelectAll table={table} />,
    cell: ({ row }) => <DataTableSelectRow row={row} />,
    enableSorting: false,
    enableHiding: false,
  }),
  helper.accessor("email", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  }),
  helper.accessor("status", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    cell: ({ getValue }) => {
      const status = getValue()
      return (
        <Badge variant={statusVariant[status]}>
          <BadgeDot />
          <span className="capitalize">{status}</span>
        </Badge>
      )
    },
  }),
  helper.accessor("method", { header: "Method" }),
  helper.accessor("country", { header: "Country" }),
  helper.accessor("date", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Date" />
    ),
  }),
  helper.accessor("amount", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Amount" />
    ),
    cell: ({ getValue }) => currency.format(getValue()),
    meta: { align: "end" },
  }),
])

export function DataTableStickyHeader() {
  const table = useDataTable({
    data: payments,
    columns,
    getRowId: (row) => row.id,
    initialState: { pagination: { pageIndex: 0, pageSize: 100 } },
  })

  return (
    <DataTable table={table}>
      <DataTableToolbar>
        <DataTableSearch placeholder="Search 1,000 payments…" />
        <DataTableViewOptions />
      </DataTableToolbar>
      <DataTableContent stickyHeader containerClassName="max-h-80" />
      <DataTablePagination />
    </DataTable>
  )
}

固定列

選択列と最初のデータ列は、デフォルトで固定されます。pinStart で独自に選べます。テーブルが横にスクロールすると、柔らかい影が端を示します。

"use client"

import { Badge, BadgeDot } from "@/components/ui/badge"
import {
  createDataTableColumns,
  DataTable,
  DataTableColumnHeader,
  DataTableContent,
  DataTablePagination,
  DataTableSearch,
  DataTableSelectAll,
  DataTableSelectRow,
  DataTableToolbar,
  DataTableViewOptions,
  useDataTable,
} from "@/components/ui/data-table"

type Payment = {
  id: string
  email: string
  status: "paid" | "pending" | "failed"
  amount: number
  method: string
  country: string
  date: string
}

const statuses = ["paid", "pending", "failed"] as const
const methods = ["Card", "PayPal", "Bank", "Apple Pay"]
const countries = ["United States", "Germany", "India", "Japan", "Brazil"]
const names = ["olivia", "jackson", "isabella", "william", "sofia", "liam"]

function makePayments(count: number): Payment[] {
  return Array.from({ length: count }, (_, index) => ({
    id: `pay_${String(index + 1).padStart(4, "0")}`,
    email: `${names[index % names.length]}.${Math.floor(index / names.length) + 1}@example.com`,
    status: statuses[(index * 7) % 3],
    amount: Math.round(((index * 7919) % 100000) / 10) / 10 + 5,
    method: methods[index % methods.length],
    country: countries[(index * 3) % countries.length],
    date: `2026-${String((index % 9) + 1).padStart(2, "0")}-${String((index % 27) + 1).padStart(2, "0")}`,
  }))
}

const payments = makePayments(12)

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
})

const statusVariant = {
  paid: "success",
  pending: "warning",
  failed: "destructive",
} as const

const helper = createDataTableColumns<Payment>()

const columns = helper.columns([
  helper.display({
    id: "select",
    header: ({ table }) => <DataTableSelectAll table={table} />,
    cell: ({ row }) => <DataTableSelectRow row={row} />,
    enableSorting: false,
    enableHiding: false,
  }),
  helper.accessor("email", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  }),
  helper.accessor("status", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    cell: ({ getValue }) => {
      const status = getValue()
      return (
        <Badge variant={statusVariant[status]}>
          <BadgeDot />
          <span className="capitalize">{status}</span>
        </Badge>
      )
    },
  }),
  helper.accessor("method", { header: "Method" }),
  helper.accessor("country", { header: "Country" }),
  helper.accessor("date", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Date" />
    ),
  }),
  helper.accessor("amount", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Amount" />
    ),
    cell: ({ getValue }) => currency.format(getValue()),
    meta: { align: "end" },
  }),
])

export function DataTablePinnedColumns() {
  const table = useDataTable({
    data: payments,
    columns,
    getRowId: (row) => row.id,
  })

  return (
    <div className="w-full max-w-md">
      <DataTable table={table}>
        <DataTableToolbar>
          <DataTableSearch placeholder="Search payments…" />
          <DataTableViewOptions />
        </DataTableToolbar>
        <DataTableContent pinStart={["select", "email", "status"]} />
        <DataTablePagination />
      </DataTable>
    </div>
  )
}

右から左

すべてのラベルと件数は、labels と整形関数で置き換えられます。ページネーションの矢印と固定列は、方向に合わせて反転します。

"use client"

import { Badge, BadgeDot } from "@/components/ui/badge"
import {
  createDataTableColumns,
  DataTable,
  DataTableColumnHeader,
  DataTableContent,
  DataTablePagination,
  DataTableSearch,
  DataTableSelectAll,
  DataTableSelectRow,
  DataTableToolbar,
  DataTableViewOptions,
  useDataTable,
} from "@/components/ui/data-table"

type Payment = {
  id: string
  email: string
  status: "paid" | "pending" | "failed"
  amount: number
  method: string
  country: string
  date: string
}

const statuses = ["paid", "pending", "failed"] as const
const methods = ["Card", "PayPal", "Bank", "Apple Pay"]
const countries = ["United States", "Germany", "India", "Japan", "Brazil"]
const names = ["olivia", "jackson", "isabella", "william", "sofia", "liam"]

function makePayments(count: number): Payment[] {
  return Array.from({ length: count }, (_, index) => ({
    id: `pay_${String(index + 1).padStart(4, "0")}`,
    email: `${names[index % names.length]}.${Math.floor(index / names.length) + 1}@example.com`,
    status: statuses[(index * 7) % 3],
    amount: Math.round(((index * 7919) % 100000) / 10) / 10 + 5,
    method: methods[index % methods.length],
    country: countries[(index * 3) % countries.length],
    date: `2026-${String((index % 9) + 1).padStart(2, "0")}-${String((index % 27) + 1).padStart(2, "0")}`,
  }))
}

const payments = makePayments(6)

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
})

const statusVariant = {
  paid: "success",
  pending: "warning",
  failed: "destructive",
} as const

const helper = createDataTableColumns<Payment>()

const columns = helper.columns([
  helper.display({
    id: "select",
    header: ({ table }) => <DataTableSelectAll table={table} />,
    cell: ({ row }) => <DataTableSelectRow row={row} />,
    enableSorting: false,
    enableHiding: false,
  }),
  helper.accessor("email", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  }),
  helper.accessor("status", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    cell: ({ getValue }) => {
      const status = getValue()
      return (
        <Badge variant={statusVariant[status]}>
          <BadgeDot />
          <span className="capitalize">{status}</span>
        </Badge>
      )
    },
  }),
  helper.accessor("method", { header: "Method" }),
  helper.accessor("country", { header: "Country" }),
  helper.accessor("date", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Date" />
    ),
  }),
  helper.accessor("amount", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Amount" />
    ),
    cell: ({ getValue }) => currency.format(getValue()),
    meta: { align: "end" },
  }),
])

const arabicNumber = new Intl.NumberFormat("ar")

export function DataTableRtl() {
  const table = useDataTable({
    data: payments,
    columns,
    getRowId: (row) => row.id,
  })

  return (
    <div dir="rtl" className="w-full">
      <DataTable table={table}>
        <DataTableToolbar>
          <DataTableSearch placeholder="ابحث في المدفوعات…" />
          <DataTableViewOptions label="عرض" groupLabel="إظهار الأعمدة" />
        </DataTableToolbar>
        <DataTableContent emptyMessage="لا توجد نتائج." />
        <DataTablePagination
          labels={{
            rowsPerPage: "صفوف في الصفحة",
            firstPage: "الصفحة الأولى",
            previousPage: "الصفحة السابقة",
            nextPage: "الصفحة التالية",
            lastPage: "الصفحة الأخيرة",
          }}
          formatSelection={(selected, total) =>
            `تم تحديد ${arabicNumber.format(selected)} من ${arabicNumber.format(total)}`
          }
          formatPage={(page, count) =>
            `صفحة ${arabicNumber.format(page)} من ${arabicNumber.format(count)}`
          }
        />
      </DataTable>
    </div>
  )
}

インタラクション

並べ替え可能なヘッダーをクリックすると昇順、もう一度で降順、3 回目で解除になります。別のヘッダーを Shift キーを押しながらクリックすると、2 次ソートが追加されます。
行のチェックボックスを Shift キーを押しながらクリックすると、前回クリックした行との間のすべての行が選択されます。Shift キーを押しながらチェックボックス上をドラッグすると、範囲を一度に選択または解除できます。
検索は、選択列を除くすべての列に一致し、最初のページに戻ります。
View メニューで列を非表示にしてもメニューは開いたままなので、複数の列をまとめて切り替えられます。

キーボード

キー	アクション
`Tab`	検索、View メニュー、並べ替え可能なヘッダー、行のチェックボックス、ページネーションの間を移動します。
`EnterSpace`	フォーカス中のヘッダーで並べ替えます。
`Space`	フォーカス中のチェックボックスを切り替えます。
`Esc`	テキストが入力されている場合、検索をクリアします。

アクセシビリティ

並べ替え可能なヘッダーには aria-sort が付き、polite なライブリージョンが、新しい並べ替えと、入力の少し後に結果の件数を通知します。
ページインジケーターはライブリージョンなので、次へまたは前へを押した後、スクリーンリーダーが新しいページを読み上げます。
チェックボックスにはデフォルトでラベルが付いています。<DataTableSelectAll /> と <DataTableSelectRow /> の aria-label で上書きできます。

APIリファレンス

以下のパーツはすべて、テーブルを共有する <DataTable /> の内側でレンダリングする必要があります。

useDataTable

TanStack Table のオプションを受け取り、テーブルを返します。initialState.pagination で指定しない限り、1 ページは 10 行です。

プロパティ	型	デフォルト
`data`	`TData[]`	`–`
`columns`createDataTableColumns で作成します。	`ColumnDef[]`	`–`
`getRowId`行が移動しても、選択を安定して保ちます。デフォルトは行のインデックスです。	`(row: TData) => string`	`–`
`initialState`	`Partial<TableState>`	`{ pagination: { pageIndex: 0, pageSize: 10 } }`
`state`sorting、rowSelection、globalFilter、pagination、columnVisibility を制御します。	`Partial<TableState>`	`–`
`onSortingChange`制御可能な各 state には、onRowSelectionChange のような対応するハンドラーがあります。	`OnChangeFn<SortingState>`	`–`
`enableRowSelection`	`boolean \| (row) => boolean`	`true`

createDataTableColumns

accessor、display、columns を持つ、型付きの列ヘルパーを返します。数値の列に meta: { align: "end" } を設定すると、ヘッダーとセルが揃います。

DataTable

プロパティ	型	デフォルト
`table`useDataTable が返すテーブル。	`DataTableInstance<TData>`	`–`
`className`	`string`	`–`

属性	説明
`data-slot="data-table"`	すべてのパーツを囲むラッパー。
`data-slot="data-table-announcer"`	視覚的に非表示のライブリージョン。

DataTableContent

プロパティ	型	デフォルト
`emptyMessage`	`ReactNode`	`"No results."`
`loading`	`boolean`	`false`
`loadingRows`読み込み中のスケルトン行の数。	`number`	`5`
`pinStart`開始側の端に固定する列の id。	`string[]`	`["select", firstColumnId]`
`stickyHeader`コンテナに最大の高さが必要です。	`boolean`	`false`
`containerClassName`スクロールコンテナに適用されます。	`string`	`–`
`swipeSelect`チェックボックス上で Shift キーを押しながらドラッグすると、範囲を選択できます。	`boolean`	`true`
`className`table 要素に適用されます。	`string`	`–`

属性	説明
`data-slot="table-container"`	スクロールコンテナ。
`data-scrolled-start`	コンテナが開始側の端からスクロールしているときに付与されます。
`data-scrolled-end`	終了側の端の方向にスクロールできる余地がある間、付与されます。
`data-scrolled-top`	行が縦にスクロールされると付与されます。
`data-swipe-selecting`	Shift キーを押しながらのドラッグ中、コンテナに付与されます。
`data-state="selected"`	選択された行に付与されます。
`data-row-id`	getRowId から返される行 id。
`data-slot="data-table-loading-row"`	各スケルトン行。
`data-slot="data-table-empty"`	空の行。

DataTableToolbar

検索、View メニュー、独自のフィルター用の、折り返す行。div のすべての props を受け付け、data-slot として data-table-toolbar を持ちます。

DataTableSearch

プロパティ	型	デフォルト
`placeholder`	`string`	`"Search…"`
`aria-label`	`string`	`"Search table"`
`clearLabel`クリアボタンのアクセシブルな名前。	`string`	`"Clear search"`

属性	説明
`data-slot="data-table-search"`	検索フィールドのラッパー。

DataTableViewOptions

プロパティ	型	デフォルト
`label`	`string`	`"View"`
`groupLabel`	`string`	`"Toggle columns"`
`getLabel`デフォルトは、列の文字列のヘッダー、または先頭を大文字にした id です。	`(column) => string`	`–`

非表示にできるすべての列を一覧表示します。除外するには、列に enableHiding: false を設定します。

属性	説明
`data-slot="data-table-view-options"`	メニューのポップアップ。

DataTableColumnHeader

プロパティ	型	デフォルト
`column`	`Column`	`–`
`title`	`string`	`–`

並べ替え可能な列には並べ替えボタンを、それ以外にはプレーンテキストをレンダリングします。

属性	説明
`data-slot="data-table-column-header"`	ヘッダーのラッパー。
`data-sorted`	列が並べ替えられている間、並べ替えボタンに付与されます。
`aria-sort`	ヘッダーセルに付与されます: 昇順、降順、またはなし。

DataTableSelectAll

プロパティ	型	デフォルト
`table`	`Table`	`–`
`aria-label`	`string`	`"Select all rows on this page"`

現在のページの行を選択し、一部のみが選択されている場合は不確定状態を表示します。

DataTableSelectRow

プロパティ	型	デフォルト
`row`	`Row`	`–`
`aria-label`	`string`	`"Select row"`

DataTablePagination

プロパティ	型	デフォルト
`pageSizes`	`number[]`	`[10, 20, 50, 100]`
`showSelection`行数の代わりに、選択された件数を表示します。	`boolean`	`true`
`labels`rowsPerPage、firstPage、previousPage、nextPage、lastPage。	`Partial<DataTablePaginationLabels>`	`–`
`formatSelection`	`(selected: number, total: number) => ReactNode`	`"2 of 42 rows selected"`
`formatRows`	`(total: number) => ReactNode`	`"42 rows"`
`formatPage`	`(page: number, pageCount: number) => ReactNode`	`"Page 1 of 5"`

属性	説明
`data-slot="data-table-pagination"`	ページネーションバー。

useDataTableContext

最も近い <DataTable /> からテーブルを返します。ステータスフィルターなど、独自のツールバーコントロールを作るのに使います。

Table

プロパティ	型	デフォルト
`stickyHeader`スクロールするコンテナ内で、ヘッダー行を固定します。	`boolean`	`false`
`containerClassName`スクロールコンテナに適用されます。	`string`	`–`
`containerRef`	`Ref<HTMLDivElement>`	`–`

属性	説明
`data-slot="table"`	table 要素。
`data-sticky-header`	stickyHeader がオンのとき、コンテナに付与されます。
`--table-bg`	行と固定セルの背景。配置先のカードやポップオーバーに従います。

TableHead と TableCell

プロパティ	型	デフォルト
`align`終了側に揃えられたセルも、等幅数字を使います。	`"start" \| "center" \| "end"`	`"start"`
`pinned`テーブルが横にスクロールしても、セルをその場に保ちます。--pin-offset でオフセットします。	`"start" \| "end"`	`–`
`pinnedEdge`スクロール中、最後の固定列に柔らかい影を描画します。	`boolean`	`false`

属性	説明
`data-align`	現在の配置。
`data-pinned`	固定されている場合は start または end。
`data-pinned-edge`	各側の最後の固定セルに付与されます。
`--pin-offset`	固定された端からの距離。自動で設定されます。

その他のテーブルパーツ

TableHeader、TableBody、TableFooter、TableRow、TableCaption は、対応するテーブル要素をレンダリングし、そのすべての props を受け付けます。