shadcn table下载 - shadcn table源代码下载

shadcn table

其他源码

1.0.0

下载

Shadcn表

这是一个带有服务器端排序，过滤和分页的ShadCN表。它是用create-t3-app引导的。

Shadcn表

警告该项目仍在开发中，尚未准备好生产使用。
它使用新技术（PPR，React编译器），这些技术可能会更改并可能打破您的应用程序。

技术堆栈

框架： next.js
造型：尾风CSS
UI组件： shadcn/ui
表软件包： Tanstack/React-Table
数据库：霓虹灯
ORM：毛毛雨
验证： zod

特征

服务器端分页，排序和过滤（通过useDataTable ）
可自定义的列（ dataTable和columns Props）
动态辩论过滤器和刻面滤波器（ filterFields Prop）
带有搜索，过滤器和操作的Data-Table-Toolbar
可选的Notion例如高级过滤（ enableAdvancedFilter Prop）
可选的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，但是为了这个特定的示例，我们使用了毛毛雨ORM和霓虹灯。
例如，让我们使用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以匹配表的操作（可选）。
- 定义表列：Update ./_components/tasks-table-columns.tsx以定义列标题，操作，可搜索和可过滤列。
- 设置数据获取：in ./page.tsx ，定义getTasksPromise ， getTaskCountByStatus和getTaskCountByPriority 。
- 获取数据：in ./_components/tasks-table.tsx ，使用React.use Hook消耗getTasksPromise Promise。通过承诺以触发suspense边界。
- 记忆表列：in ./_components/tasks-table.tsx ，使用React.useMemo挂钩在./_components/tasks-table-columns.tsx中定义的列进行记忆。
- 使用数据表钩：in ./_components/tasks-table.tsx ，呼叫./hooks/useTasksTable.tsx钩处理服务器端的分页，分类和过滤。
- 删除任务表提供商：确保从./components/tasks-table-provider.tsx中删除提供商。提供商用于展示一些其他功能，例如浮栏和高级过滤器。