Table

<ts-table> vv0.6.3

A styled wrapper for native HTML tables. Consumers place standard <table>, <thead>, <tbody>, <tr>, <th>, <td> elements inside.

Uses light DOM (no Shadow DOM) so nested table elements can be styled directly via the component’s CSS.

Open in Storybook for interactive demos.

Preview

<ts-table selectedRows="[]" sort-direction="none">Content</ts-table>

Property	Attribute	Type	Default	Description
`bordered`	`bordered`	`boolean`	`false`	Adds borders to all cells.
`compact`	`compact`	`boolean`	`false`	Reduces cell padding for denser display.
`hoverable`	`hoverable`	`boolean`	`false`	Highlights rows on hover.
`selectable`	`selectable`	`boolean`	`false`	Enables row selection with checkboxes.
`selectedRows`	—	`string[]`	`[]`	Array of selected row values (matches `data-value` on `<tr>`).
`sortColumn`	`sort-column`	`string \| undefined`	—	The column identifier currently sorted by (matches `data-column` on `<th>`).
`sortDirection`	`sort-direction`	`"asc" \| "desc" \| "none"`	`'none'`	The current sort direction.
`sortable`	`sortable`	`boolean`	`false`	Enables column sorting on header click.
`stickyHeader`	`sticky-header`	`boolean`	`false`	Makes the table header stick to the top on scroll.
`striped`	`striped`	`boolean`	`false`	Applies alternating row background colors.

Event	Detail	Bubbles	Composed	Description
`tsSelectionChange`	`\{ selectedRows: string[]; \}`	Yes	Yes	Emitted when row selection changes.
`tsSort`	`{ column: string; direction: “desc"	"asc”; }`	Yes	Yes

Name	Description
`(default)`	Default slot for the native `<table>` element.

<ts-table selectedRows="[]" sort-direction="none">Content</ts-table>

import { TsTable } from '@tessera-ui/react';

<TsTable selectedRows="[]" sortDirection="none">Content</TsTable>