This project showcases an advanced datatable using features from TanStack Table
| 🛠️ Technology | 🌟 Description |
|---|---|
| ⚛️ React | UI library for building apps |
| 🧑💻 TypeScript | Typed superset of JavaScript |
| 🏗️ Vite | Fast build tool & dev server |
| 📊 TanStack Table | Headless table logic |
| 🎨 TailwindCSS | Styling |
| 🦄 Shadcn UI library | Reusable components |
- 🔍 Global Search: Instantly filter table data
- 🧩 Advanced Filtering: Multi-column, custom logic
- 📑 Pagination: Easy navigation through data
- 👁️ Column Visibility: Choose which columns to hide
- 🎛️ Reusable UI Components: Buttons, inputs, selects, tables
- ⚡ Fast & Responsive: Powered by Vite & React
- 📝 Type-Safe: Built with TypeScript
Install dependencies
npm installStart the dev server
npm run dev├── public/ # Static assets
├── src/
│ ├── assets/ # Images & icons
│ ├── components/ # Table & UI components
│ │ ├── advanced-filter-examples.tsx
│ │ ├── advanced-filter.tsx
│ │ ├── data-table-pagination.tsx
│ │ ├── data-table.tsx
│ │ ├── global-search.tsx
│ │ └── ui/ # Button, Input, Select, Table
│ ├── lib/ # Utilities
│ ├── App.tsx # Main app
│ ├── App.css # App styles
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── package.json # Project metadata
├── vite.config.ts # Vite config
└── ...