shadcn tableのダウンロード-ShadCN shadcn tableソースコードのダウンロード

shadcn table

その他のソースコード

1.0.0

ダウンロード

Shadcnテーブル

これは、サーバー側の並べ替え、フィルタリング、およびページネーションを備えたShadCNテーブルです。 create-t3-appでブートストラップされています。

Shadcnテーブル

警告このプロジェクトはまだ開発中であり、生産の使用ができていません。
新しいテクノロジー（PPR、Reactコンパイラ）を使用して、変更される可能性があり、アプリケーションを破る可能性があります。

技術スタック

フレームワーク： next.js
スタイリング： Tailwind CSS
UIコンポーネント： SHADCN/UI
テーブルパッケージ： Tanstack/React-Table
データベース：ネオン
Orm： drizzle orm
検証： ZOD

特徴

サーバー側のページネーション、ソート、フィルタリング（ useDataTableフックを介して）
カスタマイズ可能な列（ dataTableとcolumns小道具）
ダイナミックデバウンス検索フィルターとファセットフィルター（ filterFieldsプロップ）
検索、フィルター、およびアクションを備えた動的なData-Table-Toolbar
高度なフィルタリングなどのオプションのNotion （ enableAdvancedFilterプロップ）
行の選択のオプションのLinearフローティングバー（ floatingBar小道具）

ローカルで実行されます

リポジトリをクローンします

git clone https://github.com/sadmann7/shadcn-table

PNPMを使用して依存関係をインストールします
```
pnpm install
```
.env.example .envにコピーし、変数を更新します。
```
cp .env.example .env
```
開発サーバーを開始します
```
pnpm run dev
```
データベーススキーマを押します
```
pnpm run db:push
```

独自のテーブルを構築します

次のフォルダーとファイルを正確な特定の場所でプロジェクト（構成）にコピーします

src/components/data-table
src/db/index.ts
src/hooks
src/lib
src/types

また、必要なShadCNコンポーネントやその他の必要なパッケージを次のコマンドとともにインストールします。

pnpm dlx shadcn@latest init

pnpm dlx shadcn@latest add badge button calendar checkbox command dialog dropdown-menu form input label popover select separator skeleton sonner table toggle-group tooltip drawer

pnpm add drizzle-orm postgres @tanstack/react-table zod @t3-oss/env-nextjs
pnpm add -D drizzle-kit dotenv-cli pg tsx

環境変数を構成し、データベースURLを設定します。この例では、PlanetScale MySQL2データベースを使用しています。私たちのスキーマもこれを使用して作成されます。
データベースアクション：これには、選択した任意のORMを使用できますが、この特定の例のために、Drizzle OrmとNeonを使用しています。
例として、 tasksテーブルを使用してみましょう。
- @/db/schema.tsでテーブルスキーマを作成します
- 関連するZOD検証@/lib/validations/tasks.tsファイルを作成します
テーブルのセットアップ
- ファイルの作成： page.tsxを作成し、必要に応じて、アプリディレクトリにlayout.tsx 。
- ディレクトリをコピー：プロジェクトにコピー./_componentsと./_libディレクトリ。
- クエリ/突然変異を更新します：Modify ./_lib/queries.ts 、および./_lib/actions.tsデータベース操作を一致させます。
- フローティングバーの更新：更新./_components/tasks-table-floating-bar.tsxは、テーブルのアクションを一致させます（オプション）。
- テーブル列の定義：更新./_components/tasks-table-columns.tsxは、列ヘッダー、アクション、検索可能およびフィルタブル列を定義します。
- セットアップデータフェッチ： getTaskCountByPriority ./page.tsx 、およびgetTasksPromise getTaskCountByStatus定義します。
- データの取得：in ./_components/tasks-table.tsxで、 React.useフックを使用してgetTasksPromise約束を消費します。 suspense境界をトリガーするために約束が可決されます。
- メモ化テーブル列：in ./_components/tasks-table.tsxで定義されたメモ列、 React.useMemoフック./_components/tasks-table-columns.tsx使用して、不必要な再レンダーを防ぐ。
- データテーブルフックを使用：in ./_components/tasks-table.tsx ./hooks/useTasksTable.tsx hook fook fook fool fool fool fool fool server side pagination、sorting、filteringを処理します。
- タスクを削除するテーブルプロバイダー： ./components/tasks-table-provider.tsx -table-provider.tsxからプロバイダーを削除してください。プロバイダーは、フローティングバーや高度なフィルターなどの追加機能を紹介するために使用されます。