Data Table
Styled table primitives.
import { Badge } from "@/components/ui/badge";import { DataTable, DataTableBody, DataTableCell, DataTableCellPrimary, DataTableHead, DataTableHeaderCell, DataTableRoot, DataTableRow,} from "@/registry/new-york/items/manpowerhub-data-table/components/data-table";export function ManpowerhubDataTableBasic() { return ( <DataTable className="rounded-lg border border-border bg-card"> <DataTableRoot> <DataTableHead> <tr> <DataTableHeaderCell>Worker</DataTableHeaderCell> <DataTableHeaderCell>Status</DataTableHeaderCell> </tr> </DataTableHead> <DataTableBody> <DataTableRow> <DataTableCellPrimary>Ahmed Al-Rashid</DataTableCellPrimary> <DataTableCell> <Badge variant="success">Active</Badge> </DataTableCell> </DataTableRow> <DataTableRow> <DataTableCellPrimary>Priya Nair</DataTableCellPrimary> <DataTableCell> <Badge variant="success">Active</Badge> </DataTableCell> </DataTableRow> </DataTableBody> </DataTableRoot> </DataTable> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/ui/data-table.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
function DataTable({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="data-table" className={cn("overflow-x-auto", className)} {...props} /> );}
function DataTableRoot({ className, ...props }: React.ComponentProps<"table">) { return ( <table data-slot="data-table-root" className={cn("w-full border-collapse text-[13px]", className)} {...props} /> );}
function DataTableHead({ className, ...props }: React.ComponentProps<"thead">) { return <thead data-slot="data-table-head" className={className} {...props} />;}
function DataTableBody({ className, ...props }: React.ComponentProps<"tbody">) { return <tbody data-slot="data-table-body" className={className} {...props} />;}
function DataTableRow({ className, ...props }: React.ComponentProps<"tr">) { return ( <tr data-slot="data-table-row" className={cn( "transition-colors [&:last-child_td]:border-b-0 [&:hover_td]:bg-[var(--surface-2)]", className, )} {...props} /> );}
function DataTableHeaderCell({ className, ...props}: React.ComponentProps<"th">) { return ( <th data-slot="data-table-header-cell" className={cn( "border-b border-border bg-[var(--surface-2)] px-3.25 py-2.25 text-left text-[11px] font-medium tracking-[0.3px] whitespace-nowrap text-[var(--text-3)] uppercase", className, )} {...props} /> );}
function DataTableCell({ className, ...props }: React.ComponentProps<"td">) { return ( <td data-slot="data-table-cell" className={cn( "border-b border-[var(--color-border-subtle)] px-3.25 py-2.75 align-middle text-[var(--text-2)]", className, )} {...props} /> );}
function DataTableCellPrimary({ className, ...props}: React.ComponentProps<"td">) { return ( <DataTableCell className={cn("font-medium text-foreground", className)} {...props} /> );}
export { DataTable, DataTableRoot, DataTableHead, DataTableBody, DataTableRow, DataTableHeaderCell, DataTableCell, DataTableCellPrimary,};Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this data table:
npx shadcn@latest add @woxcn/manpowerhub-data-table