Download shadcn table - shadcn table download de código -fonte

shadcn table

Outro código-fonte

1.0.0

Baixar

Tabela Shadcn

Esta é uma tabela Shadcn com classificação, filtragem e paginação no lado do servidor. É inicializado com create-t3-app .

Tabela Shadcn

Aviso que este projeto ainda está em desenvolvimento e não está pronto para o uso da produção.
Ele usa novas tecnologias (PPR, Compiler React) que estão sujeitas a alterações e podem quebrar seu aplicativo.

Pilha de tecnologia

Estrutura: next.js
Estilo: CSS de Tailwind
Componentes da interface do usuário: shadcn/ui
Pacote de tabela: TanStack/React-Table
Banco de dados: neon
ORM: regue Orm
Validação: Zod

Características

Paginação do lado do servidor, classificação e filtragem (via gancho useDataTable )
Colunas personalizáveis (adereços dataTable e columns )
Filtros dinâmicos de pesquisa debounted e filtros facetados ( filterFields Prop)
Data-Table-Toolbar com pesquisa, filtros e ações
Notion opcional como filtragem avançada ( enableAdvancedFilter prop)
Linear opcional como barra flutuante na seleção de linhas (suporte floatingBar )

Executando localmente

Clone o repositório

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

Instale dependências usando PNPM
```
pnpm install
```
Copie o .env.example para .env e atualize as variáveis.
```
cp .env.example .env
```
Inicie o servidor de desenvolvimento
```
pnpm run dev
```
Empurre o esquema do banco de dados
```
pnpm run db:push
```

Construa sua própria mesa

Copie as seguintes pastas e arquivos em seu projeto (configurado com) nos locais específicos exatos

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

Instale também os componentes shadcn necessários e outros pacotes necessários com os seguintes comandos:

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

Configure suas variáveis de ambiente e configure o URL do banco de dados, para este exemplo, estamos usando o banco de dados MySQL2 da escala de planetas. Nossos esquemas também serão feitos usando isso.
Ações do banco de dados: Para isso, você pode usar qualquer ORM de sua escolha, mas, para o bem deste exemplo em particular, estamos usando o Drizzle Orm e o Neon.
Como exemplo, vamos usar a tabela tasks .
- Crie o esquema da tabela em @/db/schema.ts
- Crie as validações zod associadas @/lib/validations/tasks.ts arquivo
Configurando a tabela
- Crie arquivos : crie page.tsx e, se necessário, layout.tsx no diretório do seu aplicativo.
- Copiar diretórios : copiar ./_components e ./_lib Diretórios em seu projeto.
- Atualize consultas/mutações : modifique ./_lib/queries.ts e ./_lib/actions.ts para corresponder às operações do banco de dados.
- Atualize a barra flutuante : atualize ./_components/tasks-table-floating-bar.tsx para corresponder às ações da sua tabela (opcional).
- Defina colunas da tabela : atualize ./_components/tasks-table-columns.tsx para definir cabeçalhos de coluna, ações, colunas pesquisáveis e filtráveis.
- Configurar dados de dados : em ./page.tsx , define getTasksPromise , getTaskCountByStatus e getTaskCountByPriority .
- Fetch Data : in ./_components/tasks-table.tsx , consuma a promessa getTasksPromise usando o gancho React.use . A promessa é passada para desencadear o limite suspense .
- Colunas de tabela de memórias : em ./_components/tasks-table.tsx , colunas de memórias definidas em ./_components/tasks-table-columns.tsx usando React.useMemo para evitar renderizadores desnecessários.
- Use o gancho da tabela de dados : em ./_components/tasks-table.tsx , ligue para ./hooks/useTasksTable.tsx Hook para lidar com a paginação, classificação e filtragem do lado do servidor.
- Remova o provedor da tabela de tarefas : remova o provedor de ./components/tasks-table-provider.tsx . O provedor é usado para mostrar alguns recursos adicionais, como barra flutuante e filtros avançados.