テーブル
React Aria - semantic markup、キーボードナビゲーション、行選択およびソート可能な列で構築されたアクセス可能なテーブルのプリミティブ。以下の例のように、TanStack Tableでソート、フィルタリング、ペジネーションロジックをペアリングします。
結果の合計
48 お客様の声
| 購入 | ステータス | アクション | |||
|---|---|---|---|---|---|
 ジョン・クラークソン | 配達失敗しました | 2026年9月5日 | $3.412 | ||
 アスペン・ルビン | 配達失敗しました | 2026年3月25日 | $1.899 | ||
 マイケル・エストロム | 出荷済み | 2026年8月1日 | $2.752 | ||
 キアンナ・バカロ | 出荷済み | 2026年4月2日 | $145 | ||
 リヴィア・サリス | 配達失敗しました | 2026年11月14日 | $708 | ||
 ジェイドン・アミノフ | 配達の待っている | 2026年7月17日 | $224 | ||
 マリア・ルビン | 出荷済み | 2026年11月15日 | $2.959 | ||
 Ann Press | 配達の待っている | 2026年9月20日 | $2.646 |
インストール
このテーブルコンポーネントを CLI または手動で追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add table共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
サイズ
テーブルは2つのサイズで来ます: md (通常) と sm (コンパクトで、パディングとより小さいアバターで)。それらの間で変更することによって転換して下さい size プロップオン Table コンポーネント - 試してみてください ノーマル/コンパクト 上記のプレビューを切り替えます。
<Table size="md" aria-label="Customers"> {/* rest of the table components */}</Table>読み込み中
isLoading を渡すと、本物のヘッダーの下の本文が 1 ページ分の Skeleton の行になります。どちらの密度でも各セルは入る内容と同じ大きさなので、データが届いても何も動きません。
const { data, isLoading } = useCustomers();
// The header stays; the body is a page of Skeleton rows until the data lands.<DataTableExample isLoading={isLoading} />コンテンツの表
このガイドは、使用方法を示しています TanStack Table - 列、列、ソート、フィルタリング、選択のためのヘッドレスエンジン - 一緒に Table 独自のデータテーブルを構築するための原始的です。次のトピックをカバーします。
- テーブルのプリミティブが付いている基本的なテーブル
- 列選択
- 並び替え
- フィルタリング&検索
- ページネーション
- 再使用可能なコンポーネント