<tyro-ui-data-table>

Data Table

Modular table with optional search, per-column filters, sorting and pagination. Uses [tyroCol] directive for custom cell templates via ng-content.

Preview - full features

[searchable] [filterable] [paginated] + custom cells

Name	Email	Role	Status
Maxime Tournier	maxime@tyrolium.fr	Admin	Active
Alice Martin	alice@tyrolium.fr	Editor	Active
Bob Dupont	bob@solidserv.fr	Viewer	Inactive
Chloé Bernard	chloe@influnias.fr	Editor	Active
David Chen	david@tyrociel.fr	Viewer	Suspended

12 results

Inputs

Property	Type	Default	Description
`[columns]`	ITyroUiDataTableColumn[]	`[]`	Column definitions (key, label, width, sort, filter…)
`[data]`	unknown[]	`[]`	Data to display - accepts any array of objects
`[searchable]`	boolean	`false`	Displays a global search bar (filters all columns)
`[filterable]`	boolean	`false`	Displays individual per-column filters (requires `filterable: true` on the column)
`[paginated]`	boolean	`false`	Enables pagination with page navigation
`[pageSize]`	number	`10`	Number of rows displayed per page (ignored if `[paginated]="false"`)

Interface - ITyroUiDataTableColumn

Field	Type	Description
`key`	string	Key matching the property in the data object
`label`	string	Column header (fr)
`labelEn?`	string	Column header (en)
`sortable?`	boolean	Enables sorting on header click
`filterable?`	boolean	Includes this column in the individual filter panel
`width?`	string	Fixed column width (e.g. "160px")
`align?`	'left' \| 'center' \| 'right'	Text alignment in the column

Custom cells - [tyroCol] directive

Add <ng-template [tyroCol]="key" let-row> elements inside the component to override any column's cell rendering. Access the full row via let-row, then use $any(row).property to bypass TypeScript's unknown type.

<tyro-ui-data-table [columns]="cols" [data]="users">

  <ng-template tyroCol="status" let-row>
    <tyro-ui-chip variant="success" size="sm">
      {{ $any(row).status }}
    </tyro-ui-chip>
  </ng-template>

</tyro-ui-data-table>