ui / data-display
PREVIEW READYTable
Composable, scroll-safe semantic data table primitives.
| Module | Status | Type | |
|---|---|---|---|
| Button | Stable | Primitive | |
| Command menu | Stable | Overlay | |
| Workbench | Preview | Pattern |
INSTALL / SOURCE REGISTRY
Add Table to your project
The command adds the component source and its DesignOS base dependency.
$
pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/table.jsonregistry/default/ui/table.tsx
import * as React from "react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"
export function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>) { return <div className="dos-table-wrap"><table className={cn("dos-table", className)} {...props} /></div> }
export function TableHeader(props: React.HTMLAttributes<HTMLTableSectionElement>) { return <thead {...props} /> }
export function TableBody(props: React.HTMLAttributes<HTMLTableSectionElement>) { return <tbody {...props} /> }
export function TableRow(props: React.HTMLAttributes<HTMLTableRowElement>) { return <tr {...props} /> }
export function TableHead(props: React.ThHTMLAttributes<HTMLTableCellElement>) { return <th scope={props.scope ?? "col"} {...props} /> }
export function TableCell(props: React.TdHTMLAttributes<HTMLTableCellElement>) { return <td {...props} /> }
export function TableCaption(props: React.HTMLAttributes<HTMLTableCaptionElement>) { return <caption {...props} /> }
Component contract
- Source-owned after installation
- Dark and light theme variables
- Keyboard and visible-focus behavior
- Reduced-motion fallback
- Responsive from 320px upward
- IBM Plex Sans + JetBrains Mono hierarchy