| 123 Main Street | Austin, TX | John Smith | High | ||
| 456 Oak Avenue | Phoenix, AZ | Jane Doe | Medium | ||
| 789 Pine Road | Denver, CO | Bob Johnson | Low | ||
| 321 Maple Lane | Seattle, WA | Alice Williams | Medium | ||
| 654 Cedar Court | Miami, FL | Michael Brown | High |
Rows per page
"use client";
import { type ColumnDef } from "@tanstack/react-table";
import { Button } from "@smartacteam/ambient-web/button";
import { Checkbox } from "@smartacteam/ambient-web/checkbox";
import { DataTable, useDataTable } from "@smartacteam/ambient-web/data-table";
import { IconDotGrid1x3Horizontal } from "@smartacteam/ambient-web/icons/icon-dot-grid-1x-3-horizontal";
import { Input } from "@smartacteam/ambient-web/input";
import { Menu } from "@smartacteam/ambient-web/menu";
type Home = {
id: string;
address: string;
city: string;
customer: string;
risk: string;
};
const data: Home[] = [
{
id: "1",
address: "123 Main Street",
city: "Austin, TX",
customer: "John Smith",
risk: "High",
},
{
id: "2",
address: "456 Oak Avenue",
city: "Phoenix, AZ",
customer: "Jane Doe",
risk: "Medium",
},
{
id: "3",
address: "789 Pine Road",
city: "Denver, CO",
customer: "Bob Johnson",
risk: "Low",
},
{
id: "4",
address: "321 Maple Lane",
city: "Seattle, WA",
customer: "Alice Williams",
risk: "Medium",
},
{
id: "5",
address: "654 Cedar Court",
city: "Miami, FL",
customer: "Michael Brown",
risk: "High",
},
];
const columns: ColumnDef<Home>[] = [
{
id: "select",
header: ({ table }) => (
<Checkbox
checked={table.getIsAllPageRowsSelected()}
indeterminate={table.getIsSomePageRowsSelected()}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="Select all"
/>
),
cell: ({ row }) => (
<Checkbox
checked={row.getIsSelected()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="Select row"
/>
),
enableSorting: false,
enableHiding: false,
},
{
accessorKey: "address",
header: ({ column }) => (
<DataTable.ColumnHeader title="Address" column={column} />
),
cell: ({ row }) => (
<span className="font-medium text-text-primary">
{row.getValue("address")}
</span>
),
},
{
accessorKey: "city",
header: ({ column }) => (
<DataTable.ColumnHeader title="City" column={column} />
),
},
{
accessorKey: "customer",
header: ({ column }) => (
<DataTable.ColumnHeader title="Customer" column={column} />
),
},
{
accessorKey: "risk",
header: ({ column }) => (
<DataTable.ColumnHeader title="Risk" column={column} />
),
},
{
id: "actions",
enableHiding: false,
cell: ({ row }) => {
const home = row.original;
return (
<Menu.Root>
<Menu.Trigger
render={
<Button className="size-8 p-0">
<span className="sr-only">Open menu</span>
<IconDotGrid1x3Horizontal />
</Button>
}
/>
<Menu.Content align="end">
<Menu.Item onClick={() => navigator.clipboard.writeText(home.id)}>
Copy home ID
</Menu.Item>
<Menu.Separator />
<Menu.Item>View details</Menu.Item>
<Menu.Item>Schedule service</Menu.Item>
</Menu.Content>
</Menu.Root>
);
},
},
];
export function DataTableDemo() {
const { table } = useDataTable({ columns, data });
return (
<div className="w-full">
<div className="flex items-center py-4">
<Input.Text
size="sm"
className="max-w-sm"
placeholder="Filter addresses..."
value={(table.getColumn("address")?.getFilterValue() as string) ?? ""}
onChange={(event) =>
table.getColumn("address")?.setFilterValue(event.target.value)
}
/>
<DataTable.ViewOptions table={table} />
</div>
<DataTable.Content table={table} columns={columns} />
<DataTable.Pagination table={table} />
</div>
);
}