Table
A Table component is a structured UI element that organizes and displays data in rows and columns, making it easy to read and compare information. Tables can include features like sorting, filtering, pagination, and inline editing, allowing users to interact with the data efficiently. They are commonly used to present datasets, such as user information, product listings, or any structured content that benefits from a grid-like layout.
# Demo
Basic Table
Simple table with basic columns and data display for invoices and transactions.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Credit Card | $1,250.00 |
| INV-002 | Pending | Bank Transfer | $750.50 |
| INV-003 | Overdue | PayPal | $2,100.00 |
| INV-004 | Paid | Credit Card | $890.25 |
Enhanced Table with Custom Components
Table with custom cell renderers including status badges and action buttons for better interactivity.
| Invoice | Status | Payment Method | Amount | Actions |
|---|---|---|---|---|
| INV-001 | Paid | Credit Card | $1,250.00 | |
| INV-002 | Pending | Bank Transfer | $750.50 | |
| INV-003 | Overdue | PayPal | $2,100.00 | |
| INV-004 | Cancelled | Credit Card | $890.25 | |
| INV-005 | Paid | Stripe | $1,500.75 |
User Management Table
Comprehensive user management table with avatars, roles, and status indicators.
| User | Role | Department | Status | Last Login | Actions |
|---|---|---|---|---|---|
J John Doe john@example.com | Admin | Engineering | Active | 2 hours ago | |
J Jane Smith jane@example.com | Manager | Marketing | Active | 1 day ago | |
B Bob Johnson bob@example.com | Developer | Engineering | Inactive | 1 week ago | |
A Alice Brown alice@example.com | Designer | Design | Active | 30 minutes ago |
Product Catalog Table
Product listing table with ratings, pricing, and inventory management features.
| Product Name | Category | Price | Rating | Stock | Actions |
|---|---|---|---|---|---|
| Wireless Headphones | Electronics | $99.99 | (4) | 25 | |
| Smart Watch | Wearables | $299.99 | (5) | 12 | |
| Laptop Stand | Accessories | $49.99 | (3) | 8 | |
| USB-C Cable | Cables | $19.99 | (4) | 50 |
Project Progress Table
Project management table with progress bars, deadlines, and team information.
| Project Name | Team Lead | Progress | Deadline | Status | Actions |
|---|---|---|---|---|---|
| Website Redesign | Sarah Wilson | 75% | 2024-02-15 | In Progress | |
| Mobile App | Mike Chen | 45% | 2024-03-01 | In Progress | |
| API Integration | David Kim | 90% | 2024-01-30 | Nearly Complete | |
| Database Migration | Lisa Garcia | 100% | 2024-01-15 | Completed |
Compact Table
Compact table design for displaying essential information in limited space.
| ID | Name | Status | |
|---|---|---|---|
| 001 | John Doe | john@example.com | Active |
| 002 | Jane Smith | jane@example.com | Inactive |
| 003 | Bob Johnson | bob@example.com | Pending |
Striped Table
Table with alternating row colors for better readability and visual separation.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Credit Card | $1,250.00 |
| INV-002 | Pending | Bank Transfer | $750.50 |
| INV-003 | Overdue | PayPal | $2,100.00 |
| INV-004 | Paid | Credit Card | $890.25 |
Responsive Table
Table with responsive design that adapts to different screen sizes with horizontal scrolling.
| Invoice | Status | Payment Method | Amount | Actions |
|---|---|---|---|---|
| INV-001 | Paid | Credit Card | $1,250.00 | |
| INV-002 | Pending | Bank Transfer | $750.50 | |
| INV-003 | Overdue | PayPal | $2,100.00 | |
| INV-004 | Cancelled | Credit Card | $890.25 | |
| INV-005 | Paid | Stripe | $1,500.75 |
Table Best Practices
✅ Do's
- • Use clear, descriptive column headers
- • Implement proper sorting and filtering
- • Provide visual feedback for actions
- • Use consistent alignment (numbers right-aligned)
- • Include loading states for async data
- • Make tables responsive on mobile devices
- • Use zebra striping for better readability
- • Provide accessible table captions
❌ Don'ts
- • Don't overcrowd tables with too many columns
- • Don't use tables for layout purposes
- • Don't forget to handle empty states
- • Don't make action buttons too small
- • Don't ignore keyboard navigation
- • Don't use inconsistent data formatting
- • Don't forget pagination for large datasets
- • Don't neglect mobile responsiveness
Table Action Summary
Recent Table Actions
No actions performed yet. Try clicking on action buttons in the tables above.
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| className | string | ' ' | You can customise by passing tailwind classes. |
| captionClassName | string | ' ' | You can customise by passing tailwind classes. |
| headerClassName | string | ' ' | You can customise by passing tailwind classes. |
| headerRowClassName | string | ' ' | You can customise by passing tailwind classes. |
| headerCellClassName | string | ' ' | You can customise by passing tailwind classes. |
| bodyClassName | string | ' ' | You can customise by passing tailwind classes. |
| bodyRowClassName | string | ' ' | You can customise by passing tailwind classes. |
| bodyCellClassName | string | ' ' | You can customise by passing tailwind classes. |
| caption | string | Optional | Caption for the table. |
| columns | NTableColumn<T>[] | Required | Array of table columns. |
| data | T[] | Required | Array of table data. |
| tableProps | React.TableHTMLAttributes<HTMLTableElement> | Optional | Props for table element. |
| rowProps | (row: T, rowIndex: number) => React.HTMLAttributes<HTMLTableRowElement> | Optional | Function to get row props. |
| cellProps | (row: T, col: NTableColumn<T>, rowIndex: number, colIndex: number) => React.TdHTMLAttributes<HTMLTableCellElement> | Optional | Function to get cell props. |
# Tags