A powerful, feature-rich React data table component built with TypeScript, featuring drag-and-drop functionality, animations, pagination, sorting, and more.
##Video Showcase
This data-table component is a comprehensive, production-ready solution that combines the power of TanStack Table with modern React patterns, providing extensive customization options while maintaining excellent performance and user experience.
- Multi-column sorting with visual indicators (ascending/descending)
- Sortable columns with customizable sort behavior per column
- Sort reset functionality to clear all sorting states
- Server-side and client-side sorting support
- URL state persistence for sorting
- Configurable page sizes (10, 20, 50, 100 items per page)
- Server-side pagination with total count tracking
- Pagination reset functionality
- Navigation controls (first, previous, next, last pages)
- Page information display (current page, total pages, total items)
- Column hiding/showing with view options dropdown
- Column pinning (left/right pinning for important columns)
- Column resizing capabilities
- Column reordering via drag-and-drop
- Responsive column visibility controls
- Single row selection (radio buttons)
- Multi-row selection (checkboxes)
- Select all/deselect all functionality
- Selection state management with visual indicators
- Row reordering via drag-and-drop
- Custom drag end handlers for data manipulation
- Visual feedback during drag operations
- Normalized drag end events for consistent data handling
- Row click handlers for custom actions
- Expandable rows with dynamic content
- Animated row transitions for smooth UX
- Loading states with skeleton placeholders
- Row actions dropdown menus
- CSV download functionality (framework in place)
- Data export controls in the table header
- Theme support with CSS variables
- Customizable classNames for all table elements
- Responsive design with mobile-friendly layouts
- Status indicators and badges for data states
- Modal dialogs for detailed views
The project includes 9 different table implementations showcasing various features:
- Default Table - Basic table with all standard features
- With Modal - Click cells to open detailed modal dialogs
- With Dynamic Row - Expandable rows showing full content
- With Navigation - Row clicks navigate to detail pages
- With Checkbox - Multi-select functionality with checkboxes
- With Radio - Single-select functionality with radio buttons
- With Row Actions - Dropdown menus with row-specific actions
- Double Tables - Master-detail tables with radio selection
- Table Inside Modal - Nested tables within modal dialogs
- Virtual scrolling support (via container height limits)
- Debounced search/filtering (configurable timing)
- Efficient re-rendering with React optimizations
- Memory management for large datasets
- TypeScript support with full type safety
- Composable architecture with reusable components
- Extensible meta configuration for custom behaviors
- URL state synchronization with query parameters
- Hook-based API (
useDataTable) for easy integration
- ARIA labels and roles for screen readers
- Keyboard navigation support
- Focus management for interactive elements
- Semantic HTML structure
Framer Motion integration for smooth transitions
Row entry/exit animations
Drag feedback animations
Loading state animations
Framework: Next.js 16
Table Logic: TanStack React Table v8
Drag & Drop: @dnd-kit
Animations: Framer Motion
UI Components: Radix UI
Styling: Tailwind CSS v4
State Management: NuQS for URL state
Icons: Lucide React
Forms: React Hook Form
Validation: Zod
TypeScript: Full type safety
npm install
# or
yarn install
# or
bun installnpm run dev
# or
yarn dev
# orwhat s
bun devOpen http://localhost:3000 to see the demo.
npm run build
npm run startimport{DataTable,useDataTable}from'@/components/data-table'import{columns}from'./columns'functionMyTable({ data }: {data: MyData[]}){const{ table }=useDataTable({
data,
columns,enableRowSelection: true,meta: {enableRowAnimations: true,enableRowDrag: true,enablePaginationReset: true,enableResetSortings: true,enableViewOptions: true,totalItems: data.length,},})return<DataTabletable={table}/>}const{ table }=useDataTable({
data,
columns,pageCount: 10,initialState: {columnPinning: {left: ['id'],right: ['actions'],},},meta: {enableRowAnimations: true,enableRowDrag: true,enableDownload: true,onDragEnd: handleDragEnd,},})interfaceDataTableProps<TData>{table: TanstackTable<TData>isLoading?: booleanclassName?: {wrapper?: stringcontainer?: stringtable?: stringthead?: stringtrHeader?: stringth?: stringtbody?: stringtr?: stringtd?: stringpagination?: string}}interfaceUseDataTableProps<TData>{data?: TData[]columns: ColumnDef<TData,any>[]pageCount?: numberenableRowSelection?: booleangetRowId?: (originalRow: TData)=>stringinitialState?: {columnPinning?: ColumnPinningStatesorting?: ISort[]}meta?: {enableRowAnimations?: booleanenableRowDrag?: booleanenableDownload?: booleanenablePaginationReset?: booleanenableResetSortings?: booleanenableViewOptions?: booleantotalItems?: numberonDragEnd?: (event: DragEndEvent)=>void}}The component uses CSS variables for easy theming. Customize in data-table.component.css:
:root {
--table-width:100%;
--table-text-size:0.875rem;
--table-border-collapse: collapse;
--header-height:2.5rem;
--header-bg:#ffffff;
--header-color:#374151;
--row-height:3rem;
--row-hover-bg:#f9fafb;
--cell-padding:0.75rem;
/* ... more variables */
}Use data attributes for custom styling:
/* Dragging state */
[data-dragging="true"] {
opacity:0.5;
}
/* Pinned columns */
[data-pinned="left"] {
position: sticky;
left:0;
z-index:1;
}
/* Selected rows */
[data-state="selected"] {
background-color:#dbeafe;
}components/data-table/
├── components/ # Table sub-components
│ ├── table-body-content.tsx
│ ├── table-header-content.tsx
│ ├── table-pagination.tsx
│ ├── table-primitive.tsx
│ ├── table-reset-sorting.tsx
│ ├── table-skeleton.tsx
│ └── table-view-options.tsx
├── motions/ # Animation & DnD components
│ ├── table-animated-row.tsx
│ ├── table-dnd-wrapper.tsx
│ ├── table-drag-cell.tsx
│ └── table-draggable-row.tsx
├── types/ # TypeScript definitions
├── utils/ # Utility functions
├── data-table.component.css # Styles
├── data-table.tsx # Main component
└── index.ts # Exports
- Linting: Biome for fast linting and formatting
- TypeScript: Strict type checking enabled
- CSS: Tailwind CSS with custom properties
{
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start"
}
}- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is private and proprietary.
- TanStack Table - The foundation of our table logic
- DnD Kit - Excellent drag-and-drop primitives
- Framer Motion - Smooth animations
- Radix UI - Accessible UI primitives
- Tailwind CSS - Utility-first styling