Kit
Available
Free
Design system
- Version
- 0.1.0
- Database part
- No
The contract
The shared look and the shared components such as tables and status badges.
Settings
| Name | What it does |
|---|---|
| locale | The locale the data table shows numbers and dates in, passed as its locale prop. Defaults to en-AU. |
| currency | The currency the data table shows amounts in, passed as its currency prop. Defaults to AUD. |
| statusTones | The app's own words for a state, mapped to a tone, passed to statusTone. Defaults to the shared list. |
| pageSize | How many rows a data table page shows, passed as its pageSize prop. Defaults to 10. |
| pageSizeOptions | The page sizes a person can pick in a data table. Defaults to 10, 25 and 50. |
Requires
Live demo
The data table
Search, sort, page and tick rows. Numbers, amounts and dates are written the Australian way. The table scrolls sideways on a narrow screen.
Grants
12 records
12 results
| Seniors lunch club | Completed | $5,400.00 | 30 Sept 2026 | 100% | |
| Winter shelter | Paid | $22,000.00 | 31 Oct 2026 | 100% | |
| Bush care days | Cancelled | $800.00 | 18 Nov 2026 | 0% | |
| Youth sport | Pending | $4,800.50 | 20 Nov 2026 | 35% | |
| Pool lessons | Sent | $3,900.00 | 25 Nov 2026 | 5% |
Rows 1 to 5 of 12
No rows are ticked.
Status badges
The words carry the meaning, with a dot, never colour alone. A word the block does not know is neutral, so a new state is never shown as good or bad by accident.
- Approved
- Pending
- Running
- Failed
- Needs review
- Draft
- On hold
The six tones are neutral, info, progress, success, warning, critical.
Buttons and empty states
Nothing to show
Add the first record to start.