mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-02 13:07:46 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
124 lines
3.2 KiB
TypeScript
124 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { type ColumnDef } from "@tanstack/react-table"
|
|
|
|
import { Badge } from "@/registry/new-york-v4/ui/badge"
|
|
import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
|
|
|
|
import { labels, priorities, statuses } from "../data/data"
|
|
import { type Task } from "../data/schema"
|
|
import { DataTableColumnHeader } from "./data-table-column-header"
|
|
import { DataTableRowActions } from "./data-table-row-actions"
|
|
|
|
export const columns: ColumnDef<Task>[] = [
|
|
{
|
|
id: "select",
|
|
header: ({ table }) => (
|
|
<Checkbox
|
|
checked={
|
|
table.getIsAllPageRowsSelected() ||
|
|
(table.getIsSomePageRowsSelected() && "indeterminate")
|
|
}
|
|
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
|
aria-label="Select all"
|
|
className="translate-y-[2px]"
|
|
/>
|
|
),
|
|
cell: ({ row }) => (
|
|
<Checkbox
|
|
checked={row.getIsSelected()}
|
|
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
|
aria-label="Select row"
|
|
className="translate-y-[2px]"
|
|
/>
|
|
),
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
},
|
|
{
|
|
accessorKey: "id",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Task" />
|
|
),
|
|
cell: ({ row }) => <div className="w-[80px]">{row.getValue("id")}</div>,
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
},
|
|
{
|
|
accessorKey: "title",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Title" />
|
|
),
|
|
cell: ({ row }) => {
|
|
const label = labels.find((label) => label.value === row.original.label)
|
|
|
|
return (
|
|
<div className="flex gap-2">
|
|
{label && <Badge variant="outline">{label.label}</Badge>}
|
|
<span className="max-w-[500px] truncate font-medium">
|
|
{row.getValue("title")}
|
|
</span>
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "status",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Status" />
|
|
),
|
|
cell: ({ row }) => {
|
|
const status = statuses.find(
|
|
(status) => status.value === row.getValue("status")
|
|
)
|
|
|
|
if (!status) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="flex w-[100px] items-center gap-2">
|
|
{status.icon && (
|
|
<status.icon className="size-4 text-muted-foreground" />
|
|
)}
|
|
<span>{status.label}</span>
|
|
</div>
|
|
)
|
|
},
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "priority",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Priority" />
|
|
),
|
|
cell: ({ row }) => {
|
|
const priority = priorities.find(
|
|
(priority) => priority.value === row.getValue("priority")
|
|
)
|
|
|
|
if (!priority) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
{priority.icon && (
|
|
<priority.icon className="size-4 text-muted-foreground" />
|
|
)}
|
|
<span>{priority.label}</span>
|
|
</div>
|
|
)
|
|
},
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
},
|
|
},
|
|
{
|
|
id: "actions",
|
|
cell: ({ row }) => <DataTableRowActions row={row} />,
|
|
},
|
|
]
|