EccUtilsDesignTable Component
Overview
The ecc-utils-design-table component provides a flexible and accessible way to display tabular data. It consists of multiple compound components that work together to create a complete table structure with support for headers, body, footer, and captions.
Important: This table uses <div> elements instead of native HTML table elements because the HTML parser doesn't allow custom elements as direct children of <table>, <tr>, etc. The web standards community decided against fixing this parser limitation due to backward compatibility concerns. See WebComponents issue #59 (opens in a new tab) for details.
This component is composed of Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption to create a complete table interface. You must specify width classes on table cells to control column sizing (e.g., className="w-4/12"). Use regular Tailwind classes for widths, not the part: prefix.
Usage
Basic Table
This example shows a basic table with headers, body rows, and a footer.
Total: 3 users
Table with Caption
This example shows a table with a caption for additional context.
Components
| Component | Tag Name | Description |
|---|---|---|
Table | ecc-utils-design-table | The root container for the table. |
TableHeader | ecc-utils-design-table-header | The header section of the table. |
TableBody | ecc-utils-design-table-body | The body section containing the main data rows. |
TableFooter | ecc-utils-design-table-footer | The footer section of the table. |
TableRow | ecc-utils-design-table-row | A table row in any section. |
TableHead | ecc-utils-design-table-head | A header cell. |
TableCell | ecc-utils-design-table-cell | A data cell. |
TableCaption | ecc-utils-design-table-caption | A caption describing the table content. |
Properties
The table components do not have any custom properties. All styling and layout is controlled through CSS classes.
Events
The table components are primarily presentational and do not emit custom events. However, you can add standard event listeners to individual cells or rows as needed for your application logic.
