データテーブル
TanStack Tableを使ったデータテーブルです。独自の矢印による列の並べ替え、一部選択の状態を表示するヘッダー、行ごとの選択・チップ・操作、ページ分割のフッターを備えています。表示にはBoardUIのテーブル部品を使い、ロジックと見た目を分離しています。
結果の合計
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 または手動でこのデータテーブルブロックを追加できます。CLI は、テーブル、チェックボックス、チップ、選択、ペジネーション、セグメント制御のプリミティブをプルします。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLI
手動
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add data-table共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。