Table
A set of composable components that work together in the same way as native HTML table elements.
Tables can be built using the following components: table, table-head, table-body, table-row, table-cell, and table-header-cell. They work together in the same way as native HTML table elements.
The Table provides a consistent, accessible structure and styling. All data handling and interaction behaviour (such as sorting, filtering, or selection) is owned by the consuming application. As the component evolves, we will introduce recommended patterns and examples for common interaction behaviours and incrementally add complexity where appropriate.
Column widths are controlled using CSS, by applying width or min-width to column header cells.
Table cells can contain any Vivid component, allowing you to compose rich, meaningful rows. Partials (such as Status and Country) are specifically designed to work well within tables, providing compact, scannable information.
There are more examples including various sorting mechanisms. Please check out use cases.
Standard sorting (alphabetical or numerical) is straightforward, but real-world tables often require complex, custom strategies. Additionally, data handling varies between client-side processing and server-side requests. A built-in mechanism would be too rigid to support these diverse use cases.
This is why we provide the vwc-table-sorting-button as a visual-only component. It handles the UI affordances - the button and direction indicators - without enforcing any logic.
- When clicked, it emits a
sortevent to trigger your custom logic. - The component updates its own direction state by default. To manage the state externally, you can intercept this by calling
event.preventDefault()(or using Vue’s@sort.preventmodifier).