Data UI provides a predictable, enterprise-grade DataTable with selection, sorting, global search, pagination, and column visibility. It is design-system agnostic and ships with safe defaults.
Sortable, searchable table with selection and column visibility.
| Role | Status | Progress | Actions | ||
|---|---|---|---|---|---|
| Ahmed Hassan | Workspace admin | active | 92% | ||
| Sara Ali | Supervisor | active | 87% | ||
| Omar Youssef | Assistant | pending | 41% | ||
| Mona Ibrahim | Workspace admin | inactive | 12% | ||
| Youssef Adel | Intern | active | 66% |
import { DataTable, DataUIProvider, column } from "data-ui";
type Row = { id: string; project: string; manager: string; status: string; occupancy: number };
export function Example({ rows }: { rows: Row[] }) {
const columns = [
column.text<Row>("project", { label: "Project", sortable: true, truncate: true }),
column.text<Row>("manager", { label: "Manager", sortable: true }),
column.badge<Row>("status", { label: "Status" }),
column.progress<Row>("occupancy", { label: "Occupancy" }),
];
return (
<DataUIProvider>
<DataTable
data={rows}
columns={columns}
getRowId={(r) => r.id}
enableGlobalSearch
enableRowSelection
enableColumnVisibility
pageSize={5}
/>
</DataUIProvider>
);
}Select multiple rows and run actions. Uses Set-based selection for performance.
| Role | Status | Actions | ||
|---|---|---|---|---|
| A. Hassan | Admin | Active | ||
| S. Ali | Editor | Active | ||
| O. Youssef | Viewer | Suspended | ||
| M. Ibrahim | Viewer | Active | ||
| Y. Adel | Editor | Active |
// Bulk actions are powered by the DataTable API
// See: DataUITableBulkActionsPreview.client.tsxControl global filter, sorting, and pagination from outside the component.
| Priority | ||
|---|---|---|
| AGG-1024 | Operations | High |
| AGG-1025 | Security | Urgent |
| AGG-1026 | Finance | Normal |
| AGG-1027 | Support | Low |
| AGG-1028 | Operations | Normal |
// Controlled state (global filter, sorting, pagination)
// Use for server-backed tables.
// See: DataUITableControlledPreview.client.tsx