Table

CombricDocumentation version

Native table family within a focusable horizontal overflow boundary.

Import and usage

import { TableContainer, Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from "@combric/react";

Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.

Examples

Data table

Projects
Project	Status
Docs	Ready

import { Table, TableBody, TableCaption, TableCell, TableContainer, TableHead, TableHeader, TableRow } from "@combric/react";

export function Example() {
  return <TableContainer aria-label="Project inventory"><Table><TableCaption>Projects</TableCaption><TableHeader><TableRow><TableHead>Project</TableHead><TableHead>Status</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Docs</TableCell><TableCell>Ready</TableCell></TableRow></TableBody></Table></TableContainer>;
}

Public API

Public exports
Name
`TableContainer`
`Table`
`TableHeader`
`TableBody`
`TableFooter`
`TableRow`
`TableHead`
`TableCell`
`TableCaption`

Documented contracts
Property / capability	Published contract
Contract	Native table element props
Contract	TableHead defaults scope to col

Accessibility

Preserves table semantics; label the focusable TableContainer so users understand its scrollable content.

CSS and customization

Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.

Source

View source on GitHub