Neumorphism UI

Data Table

並べ替え、絞り込み、ページ分割、行選択を必要とする一覧に使います。単純な静的行には Table を使います。

プレビュー

ワークスペースのプロジェクト管理

共通のテーブル状態で検索、絞り込み、並べ替え、ページをまたぐ選択、表示件数の変更を扱います。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/data-table

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

ワークスペースのプロジェクト管理

npx shadcn@latest add @neumorphism-ui/data-table @neumorphism-ui/checkbox @neumorphism-ui/input @neumorphism-ui/select @neumorphism-ui/button
Registry JSON

使い方

データと列を定義し、必要な機能を持つ TanStack のテーブルを DataTable に渡します。検索、列見出し、ページ操作を同じインスタンスに接続します。

"use client";

import { columnVisibilityFeature, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
import { DataTable } from "@/components/ui/data-table";

const features = tableFeatures({ columnVisibilityFeature, rowSelectionFeature, rowSortingFeature });
const data = [{ name: "Atlas", seats: 12 }, { name: "Beacon", seats: 4 }];
const columns = [
  { accessorKey: "name", header: "Project", enableSorting: false },
  { accessorKey: "seats", header: "Seats", enableSorting: false },
];

export default function Example() {
  const table = useTable({ features, data, columns });
  return <DataTable table={table} caption="Workspace projects" />;
}

API リファレンス

データと状態は呼び出し側のTanStack Tableが管理し、UIは描画を担当します。例では固定IDでページやフィルターを変更しても選択を保持します。

コンポーネントプロパティ型デフォルト説明
DataTabletableReactTable<TFeatures, TData>—行モデルと状態を持つTanStack Tableです。
DataTablecaption / emptyMessage / childrenstring / ReactNode—表題、空結果メッセージ、検索・フィルターツールです。
DataTablePaginationlabels / pageSizesPaginationLabels / number[]—ページ移動の文言とページサイズを設定します。

アクセシビリティ

  • 01

    表題、aria-sort、キーボードで入れるスクロール領域を提供します。

  • 02

    現在のページの選択と全選択数を区別してください。サーバーページ方式では選択状態を外部で管理します。