Data display
Table
A native HTML table for tabular data.
| Class name | Type | Description |
|---|---|---|
tableplf:table | Component | Styles a native table, its caption and cells |
table-wrapperplf:table-wrapper | Part | Scrolls a wide table |
table-zebraplf:table-zebra | Modifier | Shades even body rows |
table-borderedplf:table-bordered | Modifier | Borders around every cell |
table-pin-rowsplf:table-pin-rows | Modifier | Keeps the header and footer in view |
table-pin-colsplf:table-pin-cols | Modifier | Keeps each row's first header in view |
| Component | Behavior |
|---|---|
| Badge | Static label |
| Alert | Static message |
| Table | Native tabular content |
<div class="table-wrapper" tabindex="0" role="region" aria-labelledby="table-default-caption">
<table class="table">
<caption id="table-default-caption">Simple table without modifiers</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">Behavior</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Badge</th>
<td>Static label</td>
</tr>
<tr>
<th scope="row">Alert</th>
<td>Static message</td>
</tr>
<tr>
<th scope="row">Table</th>
<td>Native tabular content</td>
</tr>
</tbody>
</table>
</div><div class="plf:table-wrapper" tabindex="0" role="region" aria-labelledby="table-default-caption">
<table class="plf:table">
<caption id="table-default-caption">Simple table without modifiers</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">Behavior</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Badge</th>
<td>Static label</td>
</tr>
<tr>
<th scope="row">Alert</th>
<td>Static message</td>
</tr>
<tr>
<th scope="row">Table</th>
<td>Native tabular content</td>
</tr>
</tbody>
</table>
</div>import { useId } from 'react';
import { Table, TableWrapper } from '@pelatform/react';
export function Example() {
const id = useId();
return (
<TableWrapper aria-labelledby={id}>
<Table>
<caption id={id}>Simple table without modifiers</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">Behavior</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Badge</th>
<td>Static label</td>
</tr>
<tr>
<th scope="row">Alert</th>
<td>Static message</td>
</tr>
<tr>
<th scope="row">Table</th>
<td>Native tabular content</td>
</tr>
</tbody>
</Table>
</TableWrapper>
);
}import { useId } from 'react';
import { Table, TableWrapper } from '@pelatform/react/prefixed';
export function Example() {
const id = useId();
return (
<TableWrapper aria-labelledby={id}>
<Table>
<caption id={id}>Simple table without modifiers</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">Behavior</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Badge</th>
<td>Static label</td>
</tr>
<tr>
<th scope="row">Alert</th>
<td>Static message</td>
</tr>
<tr>
<th scope="row">Table</th>
<td>Native tabular content</td>
</tr>
</tbody>
</Table>
</TableWrapper>
);
}Give every table a <caption>. Mark each column header with scope="col", and the first cell that names its row with scope="row": screen readers then read each cell with its headers, such as Static label with Behavior and Badge.
| Title | Status | Author | Updated |
|---|---|---|---|
| Getting started with Pelatform UI | Published | Alex Morgan | |
| A practical guide to accessible settings and meaningful feedback | Needs review | Sam Rivera | |
| Independent roots and themes | Draft | Taylor Lee |
<div class="table-wrapper" tabindex="0" role="region" aria-labelledby="table-bordered-caption">
<table class="table table-bordered table-zebra">
<caption id="table-bordered-caption">Recent publishing activity (example data)</caption>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Author</th>
<th scope="col">Updated</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Getting started with Pelatform UI</th>
<td><span class="badge badge-success badge-soft">Published</span></td>
<td>Alex Morgan</td>
<td><time datetime="2026-10-01">Oct 1, 2026</time></td>
</tr>
<tr>
<th scope="row">A practical guide to accessible settings and meaningful feedback</th>
<td><span class="badge badge-warning badge-soft">Needs review</span></td>
<td>Sam Rivera</td>
<td><time datetime="2026-09-30">Sep 30, 2026</time></td>
</tr>
<tr>
<th scope="row">Independent roots and themes</th>
<td><span class="badge">Draft</span></td>
<td>Taylor Lee</td>
<td><time datetime="2026-09-29">Sep 29, 2026</time></td>
</tr>
</tbody>
</table>
</div><div class="plf:table-wrapper" tabindex="0" role="region" aria-labelledby="table-bordered-caption">
<table class="plf:table plf:table-bordered plf:table-zebra">
<caption id="table-bordered-caption">Recent publishing activity (example data)</caption>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Author</th>
<th scope="col">Updated</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Getting started with Pelatform UI</th>
<td><span class="plf:badge plf:badge-success plf:badge-soft">Published</span></td>
<td>Alex Morgan</td>
<td><time datetime="2026-10-01">Oct 1, 2026</time></td>
</tr>
<tr>
<th scope="row">A practical guide to accessible settings and meaningful feedback</th>
<td><span class="plf:badge plf:badge-warning plf:badge-soft">Needs review</span></td>
<td>Sam Rivera</td>
<td><time datetime="2026-09-30">Sep 30, 2026</time></td>
</tr>
<tr>
<th scope="row">Independent roots and themes</th>
<td><span class="plf:badge">Draft</span></td>
<td>Taylor Lee</td>
<td><time datetime="2026-09-29">Sep 29, 2026</time></td>
</tr>
</tbody>
</table>
</div>import { useId } from 'react';
import { Badge, Table, TableWrapper } from '@pelatform/react';
export function Example() {
const id = useId();
return (
<TableWrapper aria-labelledby={id}>
<Table bordered zebra>
<caption id={id}>Recent publishing activity (example data)</caption>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Author</th>
<th scope="col">Updated</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Getting started with Pelatform UI</th>
<td><Badge color="success" variant="soft">Published</Badge></td>
<td>Alex Morgan</td>
<td><time dateTime="2026-10-01">Oct 1, 2026</time></td>
</tr>
<tr>
<th scope="row">A practical guide to accessible settings and meaningful feedback</th>
<td><Badge color="warning" variant="soft">Needs review</Badge></td>
<td>Sam Rivera</td>
<td><time dateTime="2026-09-30">Sep 30, 2026</time></td>
</tr>
<tr>
<th scope="row">Independent roots and themes</th>
<td><Badge>Draft</Badge></td>
<td>Taylor Lee</td>
<td><time dateTime="2026-09-29">Sep 29, 2026</time></td>
</tr>
</tbody>
</Table>
</TableWrapper>
);
}import { useId } from 'react';
import { Badge, Table, TableWrapper } from '@pelatform/react/prefixed';
export function Example() {
const id = useId();
return (
<TableWrapper aria-labelledby={id}>
<Table bordered zebra>
<caption id={id}>Recent publishing activity (example data)</caption>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Author</th>
<th scope="col">Updated</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Getting started with Pelatform UI</th>
<td><Badge color="success" variant="soft">Published</Badge></td>
<td>Alex Morgan</td>
<td><time dateTime="2026-10-01">Oct 1, 2026</time></td>
</tr>
<tr>
<th scope="row">A practical guide to accessible settings and meaningful feedback</th>
<td><Badge color="warning" variant="soft">Needs review</Badge></td>
<td>Sam Rivera</td>
<td><time dateTime="2026-09-30">Sep 30, 2026</time></td>
</tr>
<tr>
<th scope="row">Independent roots and themes</th>
<td><Badge>Draft</Badge></td>
<td>Taylor Lee</td>
<td><time dateTime="2026-09-29">Sep 29, 2026</time></td>
</tr>
</tbody>
</Table>
</TableWrapper>
);
}| Title | Status | Author | Updated |
|---|---|---|---|
| Getting started with Pelatform UI | Published | Alex Morgan | |
| A practical guide to accessible settings and meaningful feedback | Needs review | Sam Rivera | |
| Independent roots and themes | Draft | Taylor Lee |
<div class="table-wrapper" tabindex="0" role="region" aria-labelledby="table-scroll-caption">
<table class="table table-bordered table-zebra" style="--plf-table-min-width: 48rem">
<caption id="table-scroll-caption">Recent publishing activity (example data)</caption>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Author</th>
<th scope="col">Updated</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Getting started with Pelatform UI</th>
<td><span class="badge badge-success badge-soft">Published</span></td>
<td>Alex Morgan</td>
<td><time datetime="2026-10-01">Oct 1, 2026</time></td>
</tr>
<tr>
<th scope="row">A practical guide to accessible settings and meaningful feedback</th>
<td><span class="badge badge-warning badge-soft">Needs review</span></td>
<td>Sam Rivera</td>
<td><time datetime="2026-09-30">Sep 30, 2026</time></td>
</tr>
<tr>
<th scope="row">Independent roots and themes</th>
<td><span class="badge">Draft</span></td>
<td>Taylor Lee</td>
<td><time datetime="2026-09-29">Sep 29, 2026</time></td>
</tr>
</tbody>
</table>
</div><div class="plf:table-wrapper" tabindex="0" role="region" aria-labelledby="table-scroll-caption">
<table class="plf:table plf:table-bordered plf:table-zebra" style="--plf-table-min-width: 48rem">
<caption id="table-scroll-caption">Recent publishing activity (example data)</caption>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Author</th>
<th scope="col">Updated</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Getting started with Pelatform UI</th>
<td><span class="plf:badge plf:badge-success plf:badge-soft">Published</span></td>
<td>Alex Morgan</td>
<td><time datetime="2026-10-01">Oct 1, 2026</time></td>
</tr>
<tr>
<th scope="row">A practical guide to accessible settings and meaningful feedback</th>
<td><span class="plf:badge plf:badge-warning plf:badge-soft">Needs review</span></td>
<td>Sam Rivera</td>
<td><time datetime="2026-09-30">Sep 30, 2026</time></td>
</tr>
<tr>
<th scope="row">Independent roots and themes</th>
<td><span class="plf:badge">Draft</span></td>
<td>Taylor Lee</td>
<td><time datetime="2026-09-29">Sep 29, 2026</time></td>
</tr>
</tbody>
</table>
</div>import { useId, type CSSProperties } from 'react';
import { Badge, Table, TableWrapper } from '@pelatform/react';
export function Example() {
const id = useId();
return (
<TableWrapper aria-labelledby={id}>
<Table bordered zebra style={{ '--plf-table-min-width': '48rem' } as CSSProperties}>
<caption id={id}>Recent publishing activity (example data)</caption>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Author</th>
<th scope="col">Updated</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Getting started with Pelatform UI</th>
<td><Badge color="success" variant="soft">Published</Badge></td>
<td>Alex Morgan</td>
<td><time dateTime="2026-10-01">Oct 1, 2026</time></td>
</tr>
<tr>
<th scope="row">A practical guide to accessible settings and meaningful feedback</th>
<td><Badge color="warning" variant="soft">Needs review</Badge></td>
<td>Sam Rivera</td>
<td><time dateTime="2026-09-30">Sep 30, 2026</time></td>
</tr>
<tr>
<th scope="row">Independent roots and themes</th>
<td><Badge>Draft</Badge></td>
<td>Taylor Lee</td>
<td><time dateTime="2026-09-29">Sep 29, 2026</time></td>
</tr>
</tbody>
</Table>
</TableWrapper>
);
}import { useId, type CSSProperties } from 'react';
import { Badge, Table, TableWrapper } from '@pelatform/react/prefixed';
export function Example() {
const id = useId();
return (
<TableWrapper aria-labelledby={id}>
<Table bordered zebra style={{ '--plf-table-min-width': '48rem' } as CSSProperties}>
<caption id={id}>Recent publishing activity (example data)</caption>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Author</th>
<th scope="col">Updated</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Getting started with Pelatform UI</th>
<td><Badge color="success" variant="soft">Published</Badge></td>
<td>Alex Morgan</td>
<td><time dateTime="2026-10-01">Oct 1, 2026</time></td>
</tr>
<tr>
<th scope="row">A practical guide to accessible settings and meaningful feedback</th>
<td><Badge color="warning" variant="soft">Needs review</Badge></td>
<td>Sam Rivera</td>
<td><time dateTime="2026-09-30">Sep 30, 2026</time></td>
</tr>
<tr>
<th scope="row">Independent roots and themes</th>
<td><Badge>Draft</Badge></td>
<td>Taylor Lee</td>
<td><time dateTime="2026-09-29">Sep 29, 2026</time></td>
</tr>
</tbody>
</Table>
</TableWrapper>
);
}A wrapper that scrolls needs tabindex="0", role="region" and aria-labelledby pointing at the caption, so keyboard users can reach it. For sorting and filtering, use DataTable.
Pinned rows
Give the wrapper a height, such as max-h-60; the header stays in view as the rows scroll.
| Component | Category | JavaScript |
|---|---|---|
| Accordion | Data display | No |
| Alert | Feedback | No |
| Badge | Data display | No |
| Button | Actions | No |
| Card | Data display | No |
| Checkbox | Data input | No |
| Modal | Actions | Yes |
| Pagination | Navigation | No |
| Combobox | Data input | Yes |
| Tabs | Navigation | Yes |
| Toast | Feedback | Yes |
| Tooltip | Feedback | Yes |
<div class="table-wrapper max-h-60" tabindex="0" role="region" aria-labelledby="table-pin-rows-caption">
<table class="table table-pin-rows">
<caption id="table-pin-rows-caption">Components and their scripts</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">Category</th>
<th scope="col">JavaScript</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Accordion</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Alert</th>
<td>Feedback</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Badge</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Button</th>
<td>Actions</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Card</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Checkbox</th>
<td>Data input</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Modal</th>
<td>Actions</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Pagination</th>
<td>Navigation</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Combobox</th>
<td>Data input</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Tabs</th>
<td>Navigation</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Toast</th>
<td>Feedback</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Tooltip</th>
<td>Feedback</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div><div class="plf:table-wrapper plf:max-h-60" tabindex="0" role="region" aria-labelledby="table-pin-rows-caption">
<table class="plf:table plf:table-pin-rows">
<caption id="table-pin-rows-caption">Components and their scripts</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">Category</th>
<th scope="col">JavaScript</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Accordion</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Alert</th>
<td>Feedback</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Badge</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Button</th>
<td>Actions</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Card</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Checkbox</th>
<td>Data input</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Modal</th>
<td>Actions</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Pagination</th>
<td>Navigation</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Combobox</th>
<td>Data input</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Tabs</th>
<td>Navigation</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Toast</th>
<td>Feedback</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Tooltip</th>
<td>Feedback</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>import { useId } from 'react';
import { Table, TableWrapper } from '@pelatform/react';
export function Example() {
const id = useId();
return (
<TableWrapper className="max-h-60" aria-labelledby={id}>
<Table pinRows>
<caption id={id}>Components and their scripts</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">Category</th>
<th scope="col">JavaScript</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Accordion</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Alert</th>
<td>Feedback</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Badge</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Button</th>
<td>Actions</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Card</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Checkbox</th>
<td>Data input</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Modal</th>
<td>Actions</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Pagination</th>
<td>Navigation</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Combobox</th>
<td>Data input</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Tabs</th>
<td>Navigation</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Toast</th>
<td>Feedback</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Tooltip</th>
<td>Feedback</td>
<td>Yes</td>
</tr>
</tbody>
</Table>
</TableWrapper>
);
}import { useId } from 'react';
import { Table, TableWrapper } from '@pelatform/react/prefixed';
export function Example() {
const id = useId();
return (
<TableWrapper className="plf:max-h-60" aria-labelledby={id}>
<Table pinRows>
<caption id={id}>Components and their scripts</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">Category</th>
<th scope="col">JavaScript</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Accordion</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Alert</th>
<td>Feedback</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Badge</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Button</th>
<td>Actions</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Card</th>
<td>Data display</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Checkbox</th>
<td>Data input</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Modal</th>
<td>Actions</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Pagination</th>
<td>Navigation</td>
<td>No</td>
</tr>
<tr>
<th scope="row">Combobox</th>
<td>Data input</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Tabs</th>
<td>Navigation</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Toast</th>
<td>Feedback</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Tooltip</th>
<td>Feedback</td>
<td>Yes</td>
</tr>
</tbody>
</Table>
</TableWrapper>
);
}| Component | CSS | JavaScript | ESM export |
|---|---|---|---|
| Tabs | components/tabs.css |
components/tabs.js |
@pelatform/ui/components/tabs |
| Modal | components/modal.css |
components/modal.js |
@pelatform/ui/components/modal |
| Tooltip | components/tooltip.css |
components/tooltip.js |
@pelatform/ui/components/tooltip |
| Combobox | components/combobox.css |
components/combobox.js |
@pelatform/ui/components/combobox |
| Toast | components/toast.css |
components/toast.js |
@pelatform/ui/components/toast |
| Select | components/select.css |
components/select.js |
@pelatform/ui/components/select |
<div class="table-wrapper" tabindex="0" role="region" aria-labelledby="table-pin-cols-caption">
<table class="table table-pin-cols" style="--plf-table-min-width: 48rem">
<caption id="table-pin-cols-caption">Component bundles</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">CSS</th>
<th scope="col">JavaScript</th>
<th scope="col">ESM export</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tabs</th>
<td><code>components/tabs.css</code></td>
<td><code>components/tabs.js</code></td>
<td><code>@pelatform/ui/components/tabs</code></td>
</tr>
<tr>
<th scope="row">Modal</th>
<td><code>components/modal.css</code></td>
<td><code>components/modal.js</code></td>
<td><code>@pelatform/ui/components/modal</code></td>
</tr>
<tr>
<th scope="row">Tooltip</th>
<td><code>components/tooltip.css</code></td>
<td><code>components/tooltip.js</code></td>
<td><code>@pelatform/ui/components/tooltip</code></td>
</tr>
<tr>
<th scope="row">Combobox</th>
<td><code>components/combobox.css</code></td>
<td><code>components/combobox.js</code></td>
<td><code>@pelatform/ui/components/combobox</code></td>
</tr>
<tr>
<th scope="row">Toast</th>
<td><code>components/toast.css</code></td>
<td><code>components/toast.js</code></td>
<td><code>@pelatform/ui/components/toast</code></td>
</tr>
<tr>
<th scope="row">Select</th>
<td><code>components/select.css</code></td>
<td><code>components/select.js</code></td>
<td><code>@pelatform/ui/components/select</code></td>
</tr>
</tbody>
</table>
</div><div class="plf:table-wrapper" tabindex="0" role="region" aria-labelledby="table-pin-cols-caption">
<table class="plf:table plf:table-pin-cols" style="--plf-table-min-width: 48rem">
<caption id="table-pin-cols-caption">Component bundles</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">CSS</th>
<th scope="col">JavaScript</th>
<th scope="col">ESM export</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tabs</th>
<td><code>components/tabs.css</code></td>
<td><code>components/tabs.js</code></td>
<td><code>@pelatform/ui/components/tabs</code></td>
</tr>
<tr>
<th scope="row">Modal</th>
<td><code>components/modal.css</code></td>
<td><code>components/modal.js</code></td>
<td><code>@pelatform/ui/components/modal</code></td>
</tr>
<tr>
<th scope="row">Tooltip</th>
<td><code>components/tooltip.css</code></td>
<td><code>components/tooltip.js</code></td>
<td><code>@pelatform/ui/components/tooltip</code></td>
</tr>
<tr>
<th scope="row">Combobox</th>
<td><code>components/combobox.css</code></td>
<td><code>components/combobox.js</code></td>
<td><code>@pelatform/ui/components/combobox</code></td>
</tr>
<tr>
<th scope="row">Toast</th>
<td><code>components/toast.css</code></td>
<td><code>components/toast.js</code></td>
<td><code>@pelatform/ui/components/toast</code></td>
</tr>
<tr>
<th scope="row">Select</th>
<td><code>components/select.css</code></td>
<td><code>components/select.js</code></td>
<td><code>@pelatform/ui/components/select</code></td>
</tr>
</tbody>
</table>
</div>import { useId, type CSSProperties } from 'react';
import { Table, TableWrapper } from '@pelatform/react';
export function Example() {
const id = useId();
return (
<TableWrapper aria-labelledby={id}>
<Table pinCols style={{ '--plf-table-min-width': '48rem' } as CSSProperties}>
<caption id={id}>Component bundles</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">CSS</th>
<th scope="col">JavaScript</th>
<th scope="col">ESM export</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tabs</th>
<td><code>components/tabs.css</code></td>
<td><code>components/tabs.js</code></td>
<td><code>@pelatform/ui/components/tabs</code></td>
</tr>
<tr>
<th scope="row">Modal</th>
<td><code>components/modal.css</code></td>
<td><code>components/modal.js</code></td>
<td><code>@pelatform/ui/components/modal</code></td>
</tr>
<tr>
<th scope="row">Tooltip</th>
<td><code>components/tooltip.css</code></td>
<td><code>components/tooltip.js</code></td>
<td><code>@pelatform/ui/components/tooltip</code></td>
</tr>
<tr>
<th scope="row">Combobox</th>
<td><code>components/combobox.css</code></td>
<td><code>components/combobox.js</code></td>
<td><code>@pelatform/ui/components/combobox</code></td>
</tr>
<tr>
<th scope="row">Toast</th>
<td><code>components/toast.css</code></td>
<td><code>components/toast.js</code></td>
<td><code>@pelatform/ui/components/toast</code></td>
</tr>
<tr>
<th scope="row">Select</th>
<td><code>components/select.css</code></td>
<td><code>components/select.js</code></td>
<td><code>@pelatform/ui/components/select</code></td>
</tr>
</tbody>
</Table>
</TableWrapper>
);
}import { useId, type CSSProperties } from 'react';
import { Table, TableWrapper } from '@pelatform/react/prefixed';
export function Example() {
const id = useId();
return (
<TableWrapper aria-labelledby={id}>
<Table pinCols style={{ '--plf-table-min-width': '48rem' } as CSSProperties}>
<caption id={id}>Component bundles</caption>
<thead>
<tr>
<th scope="col">Component</th>
<th scope="col">CSS</th>
<th scope="col">JavaScript</th>
<th scope="col">ESM export</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tabs</th>
<td><code>components/tabs.css</code></td>
<td><code>components/tabs.js</code></td>
<td><code>@pelatform/ui/components/tabs</code></td>
</tr>
<tr>
<th scope="row">Modal</th>
<td><code>components/modal.css</code></td>
<td><code>components/modal.js</code></td>
<td><code>@pelatform/ui/components/modal</code></td>
</tr>
<tr>
<th scope="row">Tooltip</th>
<td><code>components/tooltip.css</code></td>
<td><code>components/tooltip.js</code></td>
<td><code>@pelatform/ui/components/tooltip</code></td>
</tr>
<tr>
<th scope="row">Combobox</th>
<td><code>components/combobox.css</code></td>
<td><code>components/combobox.js</code></td>
<td><code>@pelatform/ui/components/combobox</code></td>
</tr>
<tr>
<th scope="row">Toast</th>
<td><code>components/toast.css</code></td>
<td><code>components/toast.js</code></td>
<td><code>@pelatform/ui/components/toast</code></td>
</tr>
<tr>
<th scope="row">Select</th>
<td><code>components/select.css</code></td>
<td><code>components/select.js</code></td>
<td><code>@pelatform/ui/components/select</code></td>
</tr>
</tbody>
</Table>
</TableWrapper>
);
}React
Table from @pelatform/react renders the table with its modifiers, and TableWrapper the wrapper that scrolls it; the caption, rows and cells stay native elements.
| Prop | Values | Default |
|---|---|---|
zebra |
true shades even body rows |
false |
bordered |
true draws borders around every cell |
false |
pinRows |
true keeps the header and footer in view |
false |
pinCols |
true keeps each row’s first header in view |
false |
TableWrapper is a region you can reach with Tab (tabIndex={0}, role="region") and takes your aria-labelledby, naming the caption; the other props are the element’s own, className and ref included.
CSS variables
Override on a root or on a single table.
| Variable | Default |
|---|---|
--plf-table-bg, --plf-table-color |
Transparent, the surface on pinned cells; text |
--plf-table-border |
Subtle border |
--plf-table-header-bg |
Raised surface |
--plf-table-stripe-bg |
--plf-color-surface-hover, on striped tables |
--plf-table-caption-color |
Muted text |
--plf-table-cell-padding |
Space 2 (8px) |
--plf-table-min-width |
0 |