@loke/design-system/dist/components/table/table.d.ts

A design system with individually importable components

import { type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from "react";
/**
 * Table component for displaying tabular data
 *
 * The Table component provides a structured way to present data in rows and columns. It's designed to be flexible and customizable, supporting various table structures and styles.
 *
 * Key features:
 * - Responsive design with horizontal scrolling for small screens
 * - Customizable appearance through className props
 * - Support for complex table structures with header, body, and footer
 * - Hover and selected states for rows
 * - Accessible, using semantic HTML table elements
 *
 * Usage considerations:
 * - Use for presenting structured data that benefits from a tabular format
 * - Consider the amount of data and screen sizes when deciding to use a table
 * - Use TableHeader, TableBody, and TableFooter for proper table structure
 * - Provide clear column headers using TableHead components
 * - Use TableCaption to give context or summary of the table contents
 */
declare const Table: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;
/**
 * TableHeader component for the header section of a table
 *
 * This component is used to group the header content of a table. It typically contains a row of TableHead components.
 */
declare const TableHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
/**
 * TableBody component for the main content of a table
 *
 * This component contains the main data rows of the table. It typically consists of multiple TableRow components.
 */
declare const TableBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
/**
 * TableFooter component for the footer section of a table
 *
 * This component is used for the footer of a table, typically containing summary information or totals.
 */
declare const TableFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
/**
 * TableRow component for a row in a table
 *
 * This component represents a single row of data in the table. It can be used in TableHeader, TableBody, or TableFooter.
 */
declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
/**
 * TableHead component for a header cell in a table
 *
 * This component is used for column headers in a table. It should be placed within a TableRow in the TableHeader.
 */
declare const TableHead: import("react").ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;
/**
 * TableCell component for a cell in a table
 *
 * This component represents an individual data cell in the table. It should be used within TableRow components in the TableBody.
 */
declare const TableCell: import("react").ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;
/**
 * TableCaption component for a caption for a table
 *
 * This component provides a caption or summary for the entire table. It should be used as a direct child of the Table component.
 */
declare const TableCaption: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & import("react").RefAttributes<HTMLTableCaptionElement>>;
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };