Data Table
A searchable, filterable data table with status badges and row actions.
Team Members
| Name | Role | Status | Joined | Actions |
|---|---|---|---|---|
Alex Chen alex@example.com | Admin | active | Jan 2024 | |
Maria Santos maria@example.com | Member | active | Feb 2024 | |
James Park james@example.com | Member | inactive | Mar 2024 | |
Sara Kim sara@example.com | Editor | active | Mar 2024 | |
Tom Wilson tom@example.com | Member | pending | Apr 2024 | |
Priya Nair priya@example.com | Admin | active | Apr 2024 |
Showing 6 of 6 members
Installation
This block uses the following components. Add any you don't have yet:
npx radk add badge button input select tableUsage
import { DataTableBlock } from "@/components/blocks/data-table"<DataTableBlock />Source
Replace the static users array with your own data source. The search and role filter use local state — swap these for server-side query params as needed.