| Project | Type | Status |
|---|---|---|
| Main site | Website | PUBLISHED |
| Customer portal | Application | IN DEVELOPMENT |
| Component guide | Documentation | PUBLISHED |
| Total projects | 3 | Meeko team |
| Environment | Development |
| Environment | Value |
|---|---|
| No data. | |
Typed columns and rows
<script lang="ts">
import type { TableColumn } from '@meekojs/ui/runtime'
interface Project { id: number; name: string; status: string }
const columns = [
{ key: 'name', label: 'Project' },
{ key: 'status', label: 'Status', format: value => value.toUpperCase() },
] satisfies TableColumn<Project>[]
const rows = signal<Project[]>([
{ id: 1, name: 'Main site', status: 'Published' },
])
</script>
<template>
<UITable bind:columns="columns" bind:rows="rows.value"
rowKey="id" caption="Team projects" />
</template>
TableColumn<T>
relates
key
to the value that
format
receives. Use
satisfies
to keep that check without losing inference.
rowKey
can be a property with string/number values or a function.
| Name | Type / default | Description |
|---|---|---|
rows
|
readonly T[]
| Required. Data of the rows. |
columns
|
readonly TableColumn<T>[]
| Required. key, label, optional format and optional footer. |
rowKey
|
TableRowKey<T>
| Required. Stable key of each row. |
layout
|
native | grid
native
| Layout of the columns. |
gridColumns
|
string
| CSS column template for the grid mode. |
caption
|
string
| Visible and accessible name of the table. |
hideHeader
|
boolean
false
| Hides the header. |
emptyText
|
string
No data.
| Fallback content when there are no rows. The default follows the language of the document (see Theming). |
class
|
string
| Additional classes of the table. |
Customize the cells
The optional snippets are
header(column),
cell(row, column, value, index),
footer(column, rows)
and
empty(). The footer appears when there is footer content. The container allows horizontal scrolling on narrow screens.
Cells per column
Each key of the row has its own snippets:
cell-<key>(row, value), with
value
of the type of that column, and
header-<key>(column). A key the row does not have is a type error.
cell-<key>
wins; then
cell
and finally
format. In the header,
header-<key>,
header
and the label.
| Project | Type | Status |
|---|---|---|
| Main site | Website | Published |
| Customer portal | Application | In development |
| Component guide | Documentation | Published |
| Total projects | 3 | Meeko team |
<UITable bind:columns="columns" bind:rows="rows.value" rowKey="id">
<!-- value is a string: the type of Project['status']. -->
<snippet name="cell-status" params="row, value">
<UIBadge bind:tone="value === 'Published' ? 'accent' : 'neutral'">{value}</UIBadge>
</snippet>
<snippet name="header-name" params="column">
<abbr title="Project name">{column.label}</abbr>
</snippet>
<!-- name="cell-email" does not compile: Project has no email. -->
</UITable>