Скачать shadcn table - Скачать исходный код shadcn table

shadcn table

Другой исходный код

1.0.0

Скачать

Shadcn Table

Это таблица SHADCN с серверной сортировкой, фильтрацией и страстью. Он загружен с create-t3-app .

Shadcn Table

Предупреждение Этот проект все еще находится в разработке и не готов к использованию производства.
Он использует новые технологии (PPR, React Compiler), которые могут быть изменены и могут нарушить ваше приложение.

Технический стек

Структура: Next.js
Стиль: Tailwind CSS
Компоненты пользовательского интерфейса: shadcn/ui
Пакет таблиц: Tanstack/React-Table
База данных: Неон
Орм: дождь Орм
Валидация: Зод

Функции

Серверная страница, сортировка и фильтрация (через useDataTable крючок)
Настраиваемые столбцы ( dataTable и columns Reps)
Динамические дебютированные поисковые фильтры и азартные фильтры ( filterFields Prop)
Динамический Data-Table-Toolbar с поиском, фильтрами и действиями
Необязательное Notion , такое как расширенная фильтрация ( enableAdvancedFilter prop)
Необязательный Linear такого плавучего бара на выборе строк ( floatingBar Prop)

Бег на местном уровне

Клонировать репозиторий

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 -адрес базы данных, для этого примера мы используем базу данных MySQL2 PlanetScale. Наши схемы также будут сделаны с использованием этого.
Действия базы данных: для этого вы можете использовать любой ORM по вашему выбору, но для этого конкретного примера мы используем морярку ORM и Neon.
В качестве примера, давайте используем таблицу tasks .
- Создать схему таблицы по адресу @/db/schema.ts
- Создайте соответствующие ZOD Validations @/lib/validations/tasks.ts файл
Настройка таблицы
- Создайте файлы : создать page.tsx и, если это необходимо, layout.tsx в вашем каталоге приложений.
- Скопируйте каталоги : копирование ./_components и ./_lib Directory в ваш проект.
- Обновление запросов/мутаций : изменить ./_lib/queries.ts и ./_lib/actions.ts , чтобы соответствовать операциям с базой данных.
- Обновление плавающей панели : обновление ./_components/tasks-table-floating-bar.tsx в соответствии с действиями вашей таблицы (необязательно).
- Определить столбцы таблицы : обновление ./_components/tasks-table-columns.tsx для определения заголовков столбцов, действий, доступных для поиска и отфильтруемых столбцов.
- Установка данных : в ./page.tsx , определите getTasksPromise , getTaskCountByStatus и getTaskCountByPriority .
- Данные избранного : в ./_components/tasks-table.tsx , потребляйте обещание getTasksPromise с использованием крючка React.use . Обещание передается, чтобы вызвать границу suspense .
- Запомните столбцы таблицы : in ./_components/tasks-table.tsx , память столбцов, определенных в ./_components/tasks-table-columns.tsx с использованием React.useMemo Hook, чтобы предотвратить ненужные повторные Renders.
- Используйте таблицу данных крючком : в ./_components/tasks-table.tsx , вызов ./hooks/useTasksTable.tsx крючке для обработки страниц, сортировки и фильтрации на стороне сервера.
- Удалите поставщик таблиц задач : обязательно удалите поставщика с ./components/tasks-table-provider.tsx . Поставщик используется для демонстрации некоторых дополнительных функций, таких как плавучий батончик и расширенные фильтры.