Documentation
Data displayGlass surface
DataTable
Styles dense tabular data and records.
01
See it in context
Preview
0 selected
| Package | Target | Downloads |
|---|---|---|
| @santi020k/lumen-astro | Astro | 24,800 |
| @santi020k/lumen-react | React | 8,450 |
| @santi020k/lumen-elements | Custom elements | 5,120 |
02
Copy a working example
Usage
Astro examples assume UIPrimitives is mounted once in your root layout. Do not add the runtime next to each component instance.
---
import {
DataTable
} from '@santi020k/lumen-astro'
const columns: {
header: string
key: string
sort?: 'number' | 'string'
sortable?: boolean
}[] = [
{ header: 'Package', key: 'package', sortable: true },
{ header: 'Target', key: 'target' },
{ header: 'Downloads', key: 'downloads', sort: 'number', sortable: true }
]
const rows = [
{
downloads: { label: '24,800', sortValue: 24800 },
package: '@santi020k/lumen-astro',
rowValue: 'astro',
target: 'Astro'
},
{
downloads: { label: '8,450', sortValue: 8450 },
package: '@santi020k/lumen-react',
rowValue: 'react',
target: 'React'
},
{
downloads: { label: '5,120', sortValue: 5120 },
package: '@santi020k/lumen-elements',
rowValue: 'elements',
target: 'Custom elements'
}
]
---
<div class="docs-example-stack" data-data-table-example>
<p aria-live="polite">
<strong data-selected-count>0</strong> selected
</p>
<DataTable id="ex-datatable" columns={columns} name="packages" rows={rows} selectable />
</div>
<script>
const table = document.getElementById('ex-datatable')
const count = document.querySelector('[data-selected-count]')
table?.addEventListener('ui:datatable-selection-change', event => {
const detail = (event as CustomEvent<{ values: string[] }>).detail
if (count) count.textContent = String(detail.values.length)
})
</script>---
import {
DataTable
} from '@santi020k/lumen-astro'
const columns: {
header: string
key: string
sort?: 'number' | 'string'
sortable?: boolean
}[] = [
{ header: 'Package', key: 'package', sortable: true },
{ header: 'Target', key: 'target' },
{ header: 'Downloads', key: 'downloads', sort: 'number', sortable: true }
]
const rows = [
{
downloads: { label: '24,800', sortValue: 24800 },
package: '@santi020k/lumen-astro',
rowValue: 'astro',
target: 'Astro'
},
{
downloads: { label: '8,450', sortValue: 8450 },
package: '@santi020k/lumen-react',
rowValue: 'react',
target: 'React'
},
{
downloads: { label: '5,120', sortValue: 5120 },
package: '@santi020k/lumen-elements',
rowValue: 'elements',
target: 'Custom elements'
}
]
---
<div class="docs-example-stack" data-data-table-example>
<p aria-live="polite">
<strong data-selected-count>0</strong> selected
</p>
<DataTable id="ex-datatable" columns={columns} name="packages" rows={rows} selectable />
</div>
<script>
const table = document.getElementById('ex-datatable')
const count = document.querySelector('[data-selected-count]')
table?.addEventListener('ui:datatable-selection-change', event => {
const detail = (event as CustomEvent<{ values: string[] }>).detail
if (count) count.textContent = String(detail.values.length)
})
</script>import { DataTable } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-example-stack" data-data-table-example>
<p aria-live="polite">
<strong data-selected-count>0</strong> selected
</p>
<DataTable id="ex-datatable" columns={columns} name="packages" rows={rows} selectable />
</div>
<script>
const table = document.getElementById('ex-datatable')
const count = document.querySelector('[data-selected-count]')
table?.addEventListener('ui:datatable-selection-change', event => {
const detail = (event as CustomEvent<{ values: string[] }>).detail
if (count) count.textContent = String(detail.values.length)
})
</script>
</>
)import { DataTable } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-example-stack" data-data-table-example>
<p aria-live="polite">
<strong data-selected-count>0</strong> selected
</p>
<DataTable id="ex-datatable" columns={columns} name="packages" rows={rows} selectable />
</div>
<script>
const table = document.getElementById('ex-datatable')
const count = document.querySelector('[data-selected-count]')
table?.addEventListener('ui:datatable-selection-change', event => {
const detail = (event as CustomEvent<{ values: string[] }>).detail
if (count) count.textContent = String(detail.values.length)
})
</script>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-example-stack" data-data-table-example>
<p aria-live="polite">
<strong data-selected-count>0</strong> selected
</p>
<lumen-data-table id="ex-datatable" columns={columns} name="packages" rows={rows} selectable></lumen-data-table>
</div>
<script>
const table = document.getElementById('ex-datatable')
const count = document.querySelector('[data-selected-count]')
table?.addEventListener('ui:datatable-selection-change', event => {
const detail = (event as CustomEvent<{ values: string[] }>).detail
if (count) count.textContent = String(detail.values.length)
})
</script><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-example-stack" data-data-table-example>
<p aria-live="polite">
<strong data-selected-count>0</strong> selected
</p>
<lumen-data-table id="ex-datatable" columns={columns} name="packages" rows={rows} selectable></lumen-data-table>
</div>
<script>
const table = document.getElementById('ex-datatable')
const count = document.querySelector('[data-selected-count]')
table?.addEventListener('ui:datatable-selection-change', event => {
const detail = (event as CustomEvent<{ values: string[] }>).detail
if (count) count.textContent = String(detail.values.length)
})
</script>03
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add DataTablelumen add DataTablepnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add DataTable --target reactlumen add DataTable --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add DataTable --target elementslumen add DataTable --target elementsGlass
Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.
| Package | Runtime | Glass |
|---|---|---|
| @santi020k/lumen-astro | Astro | Supported |
| @santi020k/lumen-react | React | Supported |
| @santi020k/lumen-elements | Web Components | Supported |
---
import { DataTable } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo">
<DataTable glass>
<table>
<thead><tr><th>Package</th><th>Runtime</th><th>Glass</th></tr></thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Web Components</td><td>Supported</td></tr>
</tbody>
</table>
</DataTable>
</div>---
import { DataTable } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo">
<DataTable glass>
<table>
<thead><tr><th>Package</th><th>Runtime</th><th>Glass</th></tr></thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Web Components</td><td>Supported</td></tr>
</tbody>
</table>
</DataTable>
</div>import { DataTable } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo">
<DataTable glass>
<table>
<thead><tr><th>Package</th><th>Runtime</th><th>Glass</th></tr></thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Web Components</td><td>Supported</td></tr>
</tbody>
</table>
</DataTable>
</div>
</>
)import { DataTable } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo">
<DataTable glass>
<table>
<thead><tr><th>Package</th><th>Runtime</th><th>Glass</th></tr></thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Web Components</td><td>Supported</td></tr>
</tbody>
</table>
</DataTable>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo">
<lumen-data-table glass>
<table>
<thead><tr><th>Package</th><th>Runtime</th><th>Glass</th></tr></thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Web Components</td><td>Supported</td></tr>
</tbody>
</table>
</lumen-data-table>
</div><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo">
<lumen-data-table glass>
<table>
<thead><tr><th>Package</th><th>Runtime</th><th>Glass</th></tr></thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Supported</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Web Components</td><td>Supported</td></tr>
</tbody>
</table>
</lumen-data-table>
</div>API reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| glass | boolean | "subtle" | "strong" | false | Applies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity. |
| columns | DataTableColumn[] | [] | Generates table headers and maps row cells by column key when rows are provided. |
| rows | DataTableRow[] | [] | Generates table body rows from structured data. |
| name | string | - | Scopes selectable row checkbox names for form submission and runtime selection state. |
| selectable | boolean | false | Enables selectable row behavior for the UIPrimitives runtime. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |
Runtime events
CustomEvents dispatched by the Astro UIPrimitives runtime for this component.
| Event | Target | Detail | When |
|---|