Documentation
Data displayGlass surface
Table
Styles semantic tables for records and comparisons.
01
See it in context
Preview
| Package | Target | Status |
|---|---|---|
| @santi020k/lumen-astro | Astro | Stable |
| @santi020k/lumen-react | React | Stable |
| @santi020k/lumen-elements | Custom elements | Stable |
02
Copy a working example
Usage
---
import { Table } from '@santi020k/lumen-astro'
---
<Table>
<table>
<thead>
<tr><th>Package</th><th>Target</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Custom elements</td><td>Stable</td></tr>
</tbody>
</table>
</Table>---
import { Table } from '@santi020k/lumen-astro'
---
<Table>
<table>
<thead>
<tr><th>Package</th><th>Target</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Custom elements</td><td>Stable</td></tr>
</tbody>
</table>
</Table>import { Table } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Table>
<table>
<thead>
<tr><th>Package</th><th>Target</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Custom elements</td><td>Stable</td></tr>
</tbody>
</table>
</Table>
</>
)import { Table } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Table>
<table>
<thead>
<tr><th>Package</th><th>Target</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Custom elements</td><td>Stable</td></tr>
</tbody>
</table>
</Table>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-table>
<table>
<thead>
<tr><th>Package</th><th>Target</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Custom elements</td><td>Stable</td></tr>
</tbody>
</table>
</lumen-table><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-table>
<table>
<thead>
<tr><th>Package</th><th>Target</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>@santi020k/lumen-astro</td><td>Astro</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-react</td><td>React</td><td>Stable</td></tr>
<tr><td>@santi020k/lumen-elements</td><td>Custom elements</td><td>Stable</td></tr>
</tbody>
</table>
</lumen-table>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 Tablelumen add Tablepnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Table --target reactlumen add Table --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Table --target elementslumen add Table --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.
| Component | Status |
|---|---|
| Table | Glass |
| DataTable | Glass |
| TreeGrid | Glass |
---
import { Table } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo">
<Table glass>
<table>
<thead><tr><th>Component</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Table</td><td>Glass</td></tr>
<tr><td>DataTable</td><td>Glass</td></tr>
<tr><td>TreeGrid</td><td>Glass</td></tr>
</tbody>
</table>
</Table>
</div>---
import { Table } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo">
<Table glass>
<table>
<thead><tr><th>Component</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Table</td><td>Glass</td></tr>
<tr><td>DataTable</td><td>Glass</td></tr>
<tr><td>TreeGrid</td><td>Glass</td></tr>
</tbody>
</table>
</Table>
</div>import { Table } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo">
<Table glass>
<table>
<thead><tr><th>Component</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Table</td><td>Glass</td></tr>
<tr><td>DataTable</td><td>Glass</td></tr>
<tr><td>TreeGrid</td><td>Glass</td></tr>
</tbody>
</table>
</Table>
</div>
</>
)import { Table } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo">
<Table glass>
<table>
<thead><tr><th>Component</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Table</td><td>Glass</td></tr>
<tr><td>DataTable</td><td>Glass</td></tr>
<tr><td>TreeGrid</td><td>Glass</td></tr>
</tbody>
</table>
</Table>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo">
<lumen-table glass>
<table>
<thead><tr><th>Component</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Table</td><td>Glass</td></tr>
<tr><td>DataTable</td><td>Glass</td></tr>
<tr><td>TreeGrid</td><td>Glass</td></tr>
</tbody>
</table>
</lumen-table>
</div><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo">
<lumen-table glass>
<table>
<thead><tr><th>Component</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Table</td><td>Glass</td></tr>
<tr><td>DataTable</td><td>Glass</td></tr>
<tr><td>TreeGrid</td><td>Glass</td></tr>
</tbody>
</table>
</lumen-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. |
| 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. |