# Digitexa UI > Open-source, copy-paste React components for dense, warm desktop interfaces (Next.js, Tailwind CSS v4, Radix). Components are installed as source files with the `dx` CLI and styled only with semantic --dx-* tokens. ## table Dense data table with density-aware rows. Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add table` Also adds: utils, theme ```tsx import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from "@/components/ui/table"; ``` ### Example ```tsx import { Avatar } from "@/components/ui/avatar"; import { StatusBadge } from "@/components/ui/badge"; import { Card } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; export default function Demo() { const rows = [ { name: "Website redesign", lead: "Ada Lovelace", status: "progress", pct: 50 }, { name: "Mobile app", lead: "Alan Turing", status: "review", pct: 72 }, { name: "Brand refresh", lead: "Grace Hopper", status: "done", pct: 100 }, ] as const; return ( Project Lead Status Progress {rows.map((r) => ( {r.name} {r.lead.split(" ")[0]} {r.pct}% ))}

); } ``` ### Source: ui/table.tsx ```tsx import * as React from "react"; import { cn } from "@/lib/utils"; function Table({ className, ...props }: React.ComponentProps<"table">) { return (

); } function TableHeader({ className, ...props }: React.ComponentProps<"thead">) { return ; } function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { return ; } function TableRow({ className, ...props }: React.ComponentProps<"tr">) { return ( ); } function TableHead({ className, ...props }: React.ComponentProps<"th">) { return (

; } export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption }; ```
); } function TableCell({ className, ...props }: React.ComponentProps<"td">) { return	; } function TableCaption({ className, ...props }: React.ComponentProps<"caption">) { return

Project	Lead	Status	Progress
Website redesign	ALAda	In progress	50%
Mobile app	ATAlan	In review	72%
Brand refresh	GHGrace	Done	100%

Project	Lead	Status	Progress
Website redesign	ALAda	In progress	50%
Mobile app	ATAlan	In review	72%
Brand refresh	GHGrace	Done	100%

Table

Installation

Usage

Table

Installation

Usage