https://github.com/sadmann7/shadcn-table
Shadcn table with server-side sorting, filtering, and pagination.
https://github.com/sadmann7/shadcn-table
drizzle-orm nextjs open-source shadcn-ui table tanstack-table
Last synced: 8 days ago
JSON representation
Shadcn table with server-side sorting, filtering, and pagination.
- Host: GitHub
- URL: https://github.com/sadmann7/shadcn-table
- Owner: sadmann7
- License: mit
- Created: 2023-07-10T13:41:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-08T10:58:57.000Z (about 1 month ago)
- Last Synced: 2025-03-08T11:15:10.617Z (about 1 month ago)
- Topics: drizzle-orm, nextjs, open-source, shadcn-ui, table, tanstack-table
- Language: TypeScript
- Homepage: https://table.sadmn.com
- Size: 2.67 MB
- Stars: 4,175
- Watchers: 16
- Forks: 349
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-shadcn-ui - shadcn-table - Table component with server-side sorting, filtering, and pagination. (Libraries and components:)
- awesome-shadcn-ui - Link - 03-27 | (Libs and Components)
- awesome-shadcn-ui - shadcn-table-v2 - shadcn/ui table component with server-side sorting, filtering, and pagination. (Libs and Components)
- awesome-shadcn-ui - shadcn-table-v2 - shadcn/ui table component with server-side sorting, filtering, and pagination. (Libs and Components)
README
# [Shadcn Table](https://table.sadmn.com)
This is a shadcn table component with server-side sorting, filtering, and pagination. It is bootstrapped with `create-t3-app`.
[](https://table.sadmn.com)
## Documentation
See the [documentation](https://diceui.com/docs/components/data-table) to get started.
## Tech Stack
- **Framework:** [Next.js](https://nextjs.org)
- **Styling:** [Tailwind CSS](https://tailwindcss.com)
- **UI Components:** [shadcn/ui](https://ui.shadcn.com)
- **Table package:** [TanStack/react-table](https://tanstack.com/table/latest)
- **Database:** [Neon](https://neon.tech)
- **ORM:** [Drizzle ORM](https://orm.drizzle.team)
- **Validation:** [Zod](https://zod.dev)
## Features
- [x] Server-side pagination, sorting, and filtering
- [x] Customizable columns
- [x] Auto generated filters from column definitions
- [x] Dynamic `Data-Table-Toolbar` with search, filters, and actions
- [x] `Notion/Airtable` like advanced filtering
- [x] `Linear` like filter menu for command palette filtering
- [x] Action bar on row selection
## Running Locally
1. Clone the repository
```bash
git clone https://github.com/sadmann7/shadcn-table
```
2. Install dependencies using pnpm
```bash
pnpm install
```
3. Copy the `.env.example` to `.env` and update the variables.
```bash
cp .env.example .env
```
4. (Optional) Run database using docker-compose.yml file
```bash
docker compose up
```
5. Push the database schema
```bash
pnpm run db:push
```
6. Seed the database
```bash
pnpm run db:seed
```
7. Start the development server
```bash
pnpm run dev
```
## How do I deploy this?
Follow the deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.
## Credits
- [shadcn/ui](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/tasks) - For the initial implementation of the data table.