Data table

データテーブル

これは、 ShadCN UIコンポーネントとTanstackテーブルで構築されたデータテーブルです。

• Tanstack-Table
• shadcn-ui

このテーブルは、ShadCNドキュメントにある優れたチュートリアルと例に従って構築され、拡張されています。

構成

このプロジェクトはReact-Vite上に構築されており、 TypeScriptを使用しています。

• React Viteをインストールして、指示に従ってくださいプロジェクトを作成します。

 $ npm create vite@latest

• shadcnとtailwind：instruce：link for instructionsをインストールしてください

• 次に、各ShadCNコンポーネントが個別にインストールされます。

 $ npx shadcn-ui@latest add dropdown-menu
$ npx shadcn-ui@latest add button

データ

表は、従業員の架空のリストを示しています。

データは、実際のデータベースから取得されるのではなく、プロジェクト自体の配列内の単に偽のデータです。

特徴

これらはテーブルの特徴です。

ツールバー：

• 検索フィールド：名前による動的検索。
• ファセットフィルター：列値によるフィルタリング（場所、ステータス）;値は、列値に基づいて動的にリストされます。
  • タグをフィルターして、アクティブなフィルターを表示し、フィルターをクリアするボタンをクリアします。
• 列の可視性：表示される列を選択するボタン。
• リセット：すべてのフィルターと選択をクリアします。

テーブル：

• ソート：選択した列は、昇順または下降するソートを選択できます。
• 行の選択：最初の列のチェックボックスは行を選択します。
• 追加のアクションドロップダウン：各行は行の最後に追加のアクションを表示します。現在、最初のもののみが機能しており、従業員IDをクリップボードにコピーし、トーストメッセージを表示します。
• 列の再注文：最後の行には、列を右または左に移動する矢印があります。

フッター：

• 選択した行に関する情報：選択された行の数を示します。
• ページあたりの動的行ボタン：使用は、ページあたりの行が5のステップで増加または減少する可能性があります。
• ページネーションボタン：前進、後方、最後または最初のページに進む。

列の可視性：

---

ファセットフィルタードロップダウン：

---

フィルタータグとクリアボタン：

---

より多くのアクション：

---

フッター：

構造 ？

テーブルは3つの主要な部分で構成されています。

1. データを取得し、テーブルコンポーネントをレンダリングするページコンポーネント。
2. テーブルコンポーネント。
3. 個々の列コンテンツの構造とスタイリングを含む列変数。

再利用可能なコンポーネント：

1. ページネーションはコンポーネント上にあり、他のテーブルに再利用できます。
2. ファセットフィルターには長いコードが必要であり、独自のコンポーネントに分離されます。他のテーブルで再利用できます。
3. リトルポップアップトーストは、独自の再利用可能なコンポーネントです。

次のステップ？

tableテーブルコンポーネントを再利用可能なコンポーネントに要約し、小さなコンポーネントに分割します。

prop->異なるコンポーネントで発生する可能性があるため、テーブルデータをプロップとして渡すことを避けるために、テーブルデータの渡されないようにコンテキストを紹介します。

技術

• React-Vite
• shadcn ui
• Tanstack-Table
• 反応アイコン
• 追い風
• タイプスクリプト