Data Tables blocks

Customers, orders and invoices on DataTable: search, filters, status badges, row actions and pagination.

3 variants. Every block is one file built from CK-UI components and works in light and dark mode.

Customers table

Search, a segment filter, status badges, a menu of actions per row and pagination on DataTable.

CK-UI components

Also copy the files they import: Checkbox, Field, Label, Pagination, Skeleton, Table, ThemeScope.

npm packages

npm install @radix-ui/react-checkbox @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-select @radix-ui/react-slot class-variance-authority framer-motion react-icons

Orders table

Status filter, search, row selection with a bulk action, sortable columns and pagination on DataTable.

Full preview

CK-UI components

Also copy the files they import: Checkbox, Field, Label, Pagination, Skeleton, Table.

npm packages

npm install @radix-ui/react-checkbox @radix-ui/react-label @radix-ui/react-slot @radix-ui/react-tabs class-variance-authority react-icons

Invoices table

Sortable invoices with amounts, due dates and status, a status filter and an empty result message.

Full preview

CK-UI components

Also copy the files they import: Checkbox, Field, Label, Pagination, Skeleton, Table, ThemeScope.

npm packages

npm install @radix-ui/react-checkbox @radix-ui/react-label @radix-ui/react-select @radix-ui/react-slot class-variance-authority react-icons