#Table

import Table from "@poodle/ui/Table";

Table is a simple table component to display tabular data.

Please use Table component with other table components set to maximize the theming and efficiency.

• TableHead
• TableRow
• TableBody
• TableCell

We can set table outer border with prop withBorder={true}.

We can add row divider with prop withDivider={true}. Also, we can add background color when the user hover on the row with props withHover={true}.

We can add mark a row is selected by add props isSelected={true} to <TableRow /> component.

The component with propisSelected={true} will add attribute data-selected="true" to tr element.

Change table size via prop sizeStyle.

Default table sizes are s, m, l. If you do not set size, the button will use the size m as default.

Please check theming component document here.

export type TableStyleKeys = "root" | "table"

export interface TableThemeConfig
  extends StandardThemeConfig<TableStyleKeys, TableProps> {}

export interface TableProps
    extends BoxProps<"table">,
        StandardComponentProps,
        LocalTableProps {}