A Next.js demo app for the Custom Table component: a feature-rich, type-safe table with view, edit, delete, download, pagination, Excel export, and light/dark theme.
- Next.js 14 (App Router)
- React 18 with TypeScript
- react-hot-toast for confirmations and notifications
- xlsx for Excel export
- Sass for table styles
# Install dependencies
npm install
# Run development server
npm run devOpen http://localhost:3000. The Demo page shows a full-width table with sample employee data. Use the Documentation link for API and usage details.
| Command | Description |
|---|---|
npm run dev |
Start dev server (Next.js) |
npm run build |
Production build |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm test |
Run Jest tests |
- Table: Pagination, row actions (view, edit, delete, download), select-all checkbox, grand total row
- Bulk actions: Delete selected rows, download full table as Excel (with confirmation toasts)
- Delete confirmation: Single-row and bulk delete ask for confirmation via react-hot-toast
- Theming: Light/dark theme with CSS variables; toggle in the header
- Layout: Full-width responsive table; action buttons aligned top-right
- Export: Export full table or single row to Excel (.xlsx)
src/
├── app/
│ ├── layout.tsx # Root layout, Toaster, ThemeProvider
│ ├── page.tsx # Demo page (table + modals)
│ ├── documentation/ # In-app docs
│ └── globals.css # Theme variables, layout, buttons
├── components/
│ ├── CustomTable.tsx # Main table component
│ ├── Modal.tsx
│ ├── Header.tsx
│ ├── Footer.tsx
│ ├── ThemeProvider.tsx
│ ├── ThemeToggle.tsx
│ └── table.scss # Table-specific styles
├── data/
│ └── employees.ts # Demo data (deterministic for SSR)
└── utils/
└── exportExcel.ts # Excel export helpers
In-app documentation is available at /documentation and covers:
- What Custom Table is and how to install it
- Usage as a component or plugin
- Features, API reference (props, column type, BaseRow)
- Theming with CSS variables
- Publishing to npm
Private / use as needed.