Something went wrong. Try again.
A design system in a box. hip-ui.tngl.io/docs/introduction
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152import * as stylex from "@stylexjs/stylex";
import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow,} from "@/components/table";
const styles = stylex.create({ table: { width: "100%", },});
const columns = [ { id: "name", name: "Name" }, { id: "email", name: "Email" }, { id: "role", name: "Role" },];
const rows = [ { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" }, { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" }, { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "User" },];
export function Basic() { return ( <Table style={styles.table}> <TableHeader> {columns.map((column) => ( <TableColumn key={column.id} id={column.id}> {column.name} </TableColumn> ))} </TableHeader> <TableBody items={rows}> {(item) => ( <TableRow key={item.id} id={item.id}> <TableCell>{item.name}</TableCell> <TableCell>{item.email}</TableCell> <TableCell>{item.role}</TableCell> </TableRow> )} </TableBody> </Table> );}