Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from "@hua-labs/hua";

John Doejohn@example.comAdmin
Active
Jane Smithjane@example.comEditor
Active
Bob Wilsonbob@example.comViewer
Inactive

Laptop Pro$1,29945
Electronics
Wireless Mouse$29120
Accessories
USB Hub$4980
Accessories
Monitor 27"$39925
Electronics

1$100.00
2$200.00
3$300.00

variant"default" | "bordered" | "striped""default"Table visual variant
size"sm" | "md" | "lg""md"Table cell padding size
children*React.ReactNode-Table content (TableHeader, TableBody, etc.)

docs:common.basicUsagetsx
1// Via framework (recommended)
2import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@hua-labs/hua';
3// Or direct import
4// import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@hua-labs/ui/data';
5 
6<Table>
7  <TableHeader>
8    <TableRow>
9      <TableHead>Name</TableHead>
10      <TableHead>Email</TableHead>
11      <TableHead>Role</TableHead>
12    </TableRow>
13  </TableHeader>
14  <TableBody>
15    <TableRow>
16      <TableCell>John Doe</TableCell>
17      <TableCell>john@example.com</TableCell>
18      <TableCell>Admin</TableCell>
19    </TableRow>
20  </TableBody>
21</Table>
docs:components.table.examples.stripedtsx
1<Table variant="striped">
2  <TableHeader>
3    <TableRow>
4      <TableHead>Product</TableHead>
5      <TableHead>Price</TableHead>
6    </TableRow>
7  </TableHeader>
8  <TableBody>
9    <TableRow variant="hover">
10      <TableCell>Item A</TableCell>
11      <TableCell>$10.00</TableCell>
12    </TableRow>
13    <TableRow variant="hover">
14      <TableCell>Item B</TableCell>
15      <TableCell>$20.00</TableCell>
16    </TableRow>
17  </TableBody>
18</Table>

  • • TableHeader -
  • • TableBody -
  • • TableFooter -
  • • TableRow -
  • • TableHead -
  • • TableCell -
  • • TableCaption -

  • •docs:components.table.accessibility.semantic: docs:components.table.accessibility.semanticDesc
  • •docs:components.table.accessibility.keyboard: docs:components.table.accessibility.keyboardDesc
  • •docs:components.table.accessibility.screenReader: docs:components.table.accessibility.screenReaderDesc
ColorPickerProCodeBlock