Data table
The one table for every list in the suite: selection, sorting, drag to reorder, row actions, sticky header, loading and empty states, and cards on a phone.
When to use it
Use this for every record list rather than a hand-built table, so a fix or a new feature reaches every module at once. Server-rendered lists sort with sortHref, which keeps the order in the URL; lists that live in the browser use onSort. Reordering answers the arrow keys as well as a drag.
Sortable
Click Lead, City or Value. Click again to flip the direction.
Stage
Owner
Follow-up
Shree Textiles
Bhandara
New
₹52,00,000
Rahul Kulkarni
14 Sept 2026
Hotel Rajdhani
Wardha
Site survey
₹22,00,000
Nikhil Rane
11 Sept 2026
Meera Joshi
Amravati
Negotiation
₹8,90,000
Sneha Patil
09 Sept 2026
Kavita Rao
Nagpur
Won
₹6,15,600
Sneha Patil
02 Sept 2026
Anil Deshpande
Pune
Contacted
₹3,50,000
Priya Sharma
05 Sept 2026
Shree Textiles
- City
- Bhandara
- Stage
- New
- Value
- ₹52,00,000
Hotel Rajdhani
- City
- Wardha
- Stage
- Site survey
- Value
- ₹22,00,000
Meera Joshi
- City
- Amravati
- Stage
- Negotiation
- Value
- ₹8,90,000
Kavita Rao
- City
- Nagpur
- Stage
- Won
- Value
- ₹6,15,600
Anil Deshpande
- City
- Pune
- Stage
- Contacted
- Value
- ₹3,50,000
Drag to reorder
Drag by the grip, or focus a grip and use the arrow keys.
Lead
City
Stage
Value
Owner
Follow-up
Kavita Rao
Nagpur
Won
₹6,15,600
Sneha Patil
02 Sept 2026
Anil Deshpande
Pune
Contacted
₹3,50,000
Priya Sharma
05 Sept 2026
Meera Joshi
Amravati
Negotiation
₹8,90,000
Sneha Patil
09 Sept 2026
Hotel Rajdhani
Wardha
Site survey
₹22,00,000
Nikhil Rane
11 Sept 2026
Shree Textiles
Bhandara
New
₹52,00,000
Rahul Kulkarni
14 Sept 2026
Kavita Rao
- City
- Nagpur
- Stage
- Won
- Value
- ₹6,15,600
Anil Deshpande
- City
- Pune
- Stage
- Contacted
- Value
- ₹3,50,000
Meera Joshi
- City
- Amravati
- Stage
- Negotiation
- Value
- ₹8,90,000
Hotel Rajdhani
- City
- Wardha
- Stage
- Site survey
- Value
- ₹22,00,000
Shree Textiles
- City
- Bhandara
- Stage
- New
- Value
- ₹52,00,000
Order: Kavita, Anil, Meera, Hotel, Shree
Sticky header
Lead
City
Stage
Value
Owner
Follow-up
Kavita Rao
Nagpur
Won
₹6,15,600
Sneha Patil
02 Sept 2026
Anil Deshpande
Pune
Contacted
₹3,50,000
Priya Sharma
05 Sept 2026
Meera Joshi
Amravati
Negotiation
₹8,90,000
Sneha Patil
09 Sept 2026
Hotel Rajdhani
Wardha
Site survey
₹22,00,000
Nikhil Rane
11 Sept 2026
Shree Textiles
Bhandara
New
₹52,00,000
Rahul Kulkarni
14 Sept 2026
Kavita Rao
Nagpur
Won
₹6,15,600
Sneha Patil
02 Sept 2026
Anil Deshpande
Pune
Contacted
₹3,50,000
Priya Sharma
05 Sept 2026
Meera Joshi
Amravati
Negotiation
₹8,90,000
Sneha Patil
09 Sept 2026
Hotel Rajdhani
Wardha
Site survey
₹22,00,000
Nikhil Rane
11 Sept 2026
Shree Textiles
Bhandara
New
₹52,00,000
Rahul Kulkarni
14 Sept 2026
Kavita Rao
- City
- Nagpur
- Stage
- Won
- Value
- ₹6,15,600
Anil Deshpande
- City
- Pune
- Stage
- Contacted
- Value
- ₹3,50,000
Meera Joshi
- City
- Amravati
- Stage
- Negotiation
- Value
- ₹8,90,000
Hotel Rajdhani
- City
- Wardha
- Stage
- Site survey
- Value
- ₹22,00,000
Shree Textiles
- City
- Bhandara
- Stage
- New
- Value
- ₹52,00,000
Kavita Rao
- City
- Nagpur
- Stage
- Won
- Value
- ₹6,15,600
Anil Deshpande
- City
- Pune
- Stage
- Contacted
- Value
- ₹3,50,000
Meera Joshi
- City
- Amravati
- Stage
- Negotiation
- Value
- ₹8,90,000
Hotel Rajdhani
- City
- Wardha
- Stage
- Site survey
- Value
- ₹22,00,000
Shree Textiles
- City
- Bhandara
- Stage
- New
- Value
- ₹52,00,000
Loading
Loading…
Lead
City
Stage
Value
Owner
Follow-up
Empty
No matches
No leads match these filters.
Options
Everything you can pass to Data table.
| Prop | Type | Default | What it does |
|---|---|---|---|
| rows | Row[] | — | The records to show, already filtered and paged by the caller. |
| columns | Column<Row>[] | — | Exactly one column should be primary. It carries the record link and leads each phone card. |
| getRowId | (row) => string | — | Stable id used for selection, reordering and keys. |
| href | (row) => string | — | Links the primary cell to the record. |
| selected / onSelectedChange | string[] / (ids) => void | — | Adds a checkbox column with select-all. |
| rowActions | (row) => ReactNode | — | A last cell revealed on hover, usually a Menu. |
| sort + sortHref | { key, dir } + (key) => string | — | Server sorting through the URL. Set sortKey on the columns that sort. |
| sort + onSort | { key, dir } + (key) => void | — | Sorting in the browser. The caller re-orders rows. |
| onReorder | (ids) => void | — | Adds a drag grip. Also works with ArrowUp and ArrowDown on the grip. |
| stickyHeader + maxHeight | boolean + string | false | Pins the header inside a scrolling body. Sticky needs the height to stick inside. |
| loading | boolean | false | Shows a skeleton with the real column names. |
| empty | ReactNode | — | Rendered in place of the table when there are no rows. |