lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
668 lines (632 loc) • 31.2 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.LightviewRouter) {
LightviewRouter.base('/index.html');
}
</script>
<!-- Load the page-specific stylesheet -->
<link rel="stylesheet" href="./index.css">
<!-- Gallery Structure -->
<div class="gallery-page">
<div class="gallery-layout">
<!-- Sidebar Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>
<!-- Sidebar -->
<div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
<!-- Main Content -->
<div id="gallery-main" class="gallery-main">
<!-- Header Container -->
<div
style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
<!-- Breadcrumbs Row -->
<div style="padding: 0.75rem 1.5rem 0;">
<script>
(() => {
const { Breadcrumbs } = Lightview.tags;
const breadcrumbs = Breadcrumbs({
id: 'page-breadcrumbs',
items: [
{ label: 'Components', href: '/docs/components' },
{ label: 'Table' }
]
});
document.currentScript.replaceWith(breadcrumbs.domEl);
})();
</script>
</div>
<!-- Title Row -->
<div class="gallery-header"
style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
style="stroke: currentColor; stroke-width: 2;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
</svg>
</button>
<h1 class="gallery-title">Table</h1>
</div>
</div>
<!-- Content -->
<div class="gallery-content">
<div class="section-content" style="max-width: 1000px;">
<p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
Table can be used to show data in a tabular format.
Supports zebra striping, pinned rows/columns, and multiple sizes.
</p>
<!-- Basic Usage -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Basic Example</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Simple table with zebra
striping</p>
<!-- Tabs -->
<script>
globalThis.switchSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`tab-btn-${t}`);
const contentEl = document.getElementById(`syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchSyntaxTab('tagged')">Tagged</button>
<button id="tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('vdom')">vDOM</button>
<button id="tab-btn-object" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('object')">Object
DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 180,
autoRun: true
});
</script><code contenteditable="true">await import('/components/data-display/table.js');
const { tags, $ } = Lightview;
const { Table } = tags;
const data = [
{ id: 1, name: 'Alice Johnson', job: 'Engineer', company: 'TechCorp' },
{ id: 2, name: 'Bob Smith', job: 'Designer', company: 'DesignCo' },
{ id: 3, name: 'Charlie Brown', job: 'Manager', company: 'BizInc' }
];
const table = Table({ zebra: true },
Table.Head({},
Table.Row({},
Table.Th({}, '#'),
Table.Th({}, 'Name'),
Table.Th({}, 'Job'),
Table.Th({}, 'Company')
)
),
Table.Body({},
...data.map(row =>
Table.Row({},
Table.Th({}, row.id),
Table.Td({}, row.name),
Table.Td({}, row.job),
Table.Td({}, row.company)
)
)
)
);
$('#example').content(table);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 180
});
</script><code contenteditable="true">await import('/components/data-display/table.js');
const { $, tags } = Lightview;
const { Table } = tags;
const data = [
{ id: 1, name: 'Alice Johnson', job: 'Engineer', company: 'TechCorp' },
{ id: 2, name: 'Bob Smith', job: 'Designer', company: 'DesignCo' },
{ id: 3, name: 'Charlie Brown', job: 'Manager', company: 'BizInc' }
];
const table = {
tag: Table,
attributes: { zebra: true },
children: [
{
tag: Table.Head,
children: [{
tag: Table.Row,
children: [
{ tag: Table.Th, children: ['#'] },
{ tag: Table.Th, children: ['Name'] },
{ tag: Table.Th, children: ['Job'] },
{ tag: Table.Th, children: ['Company'] }
]
}]
},
{
tag: Table.Body,
children: data.map(row => ({
tag: Table.Row,
children: [
{ tag: Table.Th, children: [row.id] },
{ tag: Table.Td, children: [row.name] },
{ tag: Table.Td, children: [row.job] },
{ tag: Table.Td, children: [row.company] }
]
}))
}
]
};
$('#example').content(table);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 180
});
</script><code contenteditable="true">await import('/components/data-display/table.js');
const { $ } = Lightview;
const data = [
{ id: 1, name: 'Alice Johnson', job: 'Engineer', company: 'TechCorp' },
{ id: 2, name: 'Bob Smith', job: 'Designer', company: 'DesignCo' },
{ id: 3, name: 'Charlie Brown', job: 'Manager', company: 'BizInc' }
];
const table = {
Table: {
zebra: true,
children: [
{
'Table.Head': {
children: [{
'Table.Row': {
children: [
{ 'Table.Th': { children: ['#'] } },
{ 'Table.Th': { children: ['Name'] } },
{ 'Table.Th': { children: ['Job'] } },
{ 'Table.Th': { children: ['Company'] } }
]
}
}]
}
},
{
'Table.Body': {
children: data.map(row => ({
'Table.Row': {
children: [
{ 'Table.Th': { children: [row.id] } },
{ 'Table.Td': { children: [row.name] } },
{ 'Table.Td': { children: [row.job] } },
{ 'Table.Td': { children: [row.company] } }
]
}
}))
}
}
]
}
};
$('#example').content(table);</code></pre>
</div>
</div>
</div>
<!-- Interactive Table Example -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Interactive Table</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Table with row selection</p>
<!-- Tabs -->
<script>
globalThis.switchReactiveSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
const contentEl = document.getElementById(`reactive-syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="reactive-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
<button id="reactive-tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
<button id="reactive-tab-btn-object" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="reactive-syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 200
});
</script><code contenteditable="true">await import('/components/data-display/table.js');
await import('/components/data-display/badge.js');
const { signal, tags, $ } = Lightview;
const { div, span, Table, Badge, button } = tags;
const selected = signal(null);
const users = [
{ id: 1, name: 'Alice', status: 'active' },
{ id: 2, name: 'Bob', status: 'pending' },
{ id: 3, name: 'Charlie', status: 'inactive' }
];
const demo = div({},
Table({ zebra: true, size: 'sm' },
Table.Head({},
Table.Row({},
Table.Th({}, 'Name'),
Table.Th({}, 'Status'),
Table.Th({}, 'Action')
)
),
Table.Body({},
...users.map(user =>
Table.Row({
hover: true,
active: () => selected.value === user.id,
onclick: () => { selected.value = user.id; }
},
Table.Td({}, user.name),
Table.Td({},
Badge({
color: user.status === 'active' ? 'success' :
user.status === 'pending' ? 'warning' : 'error',
size: 'sm'
}, user.status)
),
Table.Td({},
button({ class: 'btn btn-xs' }, 'Edit')
)
)
)
)
),
span({ class: 'text-sm opacity-70 mt-2 block' },
() => selected.value ? `Selected: User ${selected.value}` : 'Click a row to select'
)
);
$('#example').content(demo);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="reactive-syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 200
});
</script><code contenteditable="true">await import('/components/data-display/table.js');
await import('/components/data-display/badge.js');
const { signal, $, tags } = Lightview;
const { Table, Badge, div, span, button } = tags;
const selected = signal(null);
const users = [
{ id: 1, name: 'Alice', status: 'active' },
{ id: 2, name: 'Bob', status: 'pending' },
{ id: 3, name: 'Charlie', status: 'inactive' }
];
const demo = {
tag: div,
children: [
{
tag: Table,
attributes: { zebra: true, size: 'sm' },
children: [
{
tag: Table.Head,
children: [{
tag: Table.Row,
children: [
{ tag: Table.Th, children: ['Name'] },
{ tag: Table.Th, children: ['Status'] },
{ tag: Table.Th, children: ['Action'] }
]
}]
},
{
tag: Table.Body,
children: users.map(user => ({
tag: Table.Row,
attributes: {
hover: true,
active: () => selected.value === user.id,
onclick: () => { selected.value = user.id; }
},
children: [
{ tag: Table.Td, children: [user.name] },
{
tag: Table.Td,
children: [{
tag: Badge,
attributes: {
color: user.status === 'active' ? 'success' :
user.status === 'pending' ? 'warning' : 'error',
size: 'sm'
},
children: [user.status]
}]
},
{
tag: Table.Td,
children: [{ tag: button, attributes: { class: 'btn btn-xs' }, children: ['Edit'] }]
}
]
}))
}
]
},
{
tag: span,
attributes: { class: 'text-sm opacity-70 mt-2 block' },
children: [() => selected.value ? `Selected: User ${selected.value}` : 'Click a row to select']
}
]
};
$('#example').content(demo);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="reactive-syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 200
});
</script><code contenteditable="true">await import('/components/data-display/table.js');
await import('/components/data-display/badge.js');
const { signal, $ } = Lightview;
const selected = signal(null);
const users = [
{ id: 1, name: 'Alice', status: 'active' },
{ id: 2, name: 'Bob', status: 'pending' },
{ id: 3, name: 'Charlie', status: 'inactive' }
];
const demo = {
div: {
children: [
{
Table: {
zebra: true,
size: 'sm',
children: [
{
'Table.Head': {
children: [{
'Table.Row': {
children: [
{ 'Table.Th': { children: ['Name'] } },
{ 'Table.Th': { children: ['Status'] } },
{ 'Table.Th': { children: ['Action'] } }
]
}
}]
}
},
{
'Table.Body': {
children: users.map(user => ({
'Table.Row': {
hover: true,
active: () => selected.value === user.id,
onclick: () => { selected.value = user.id; },
children: [
{ 'Table.Td': { children: [user.name] } },
{
'Table.Td': {
children: [{
Badge: {
color: user.status === 'active' ? 'success' :
user.status === 'pending' ? 'warning' : 'error',
size: 'sm',
children: [user.status]
}
}]
}
},
{
'Table.Td': {
children: [{ button: { class: 'btn btn-xs', children: ['Edit'] } }]
}
}
]
}
}))
}
}
]
}
},
{
span: {
class: 'text-sm opacity-70 mt-2 block',
children: [() => selected.value ? `Selected: User ${selected.value}` : 'Click a row to select']
}
}
]
}
};
$('#example').content(demo);</code></pre>
</div>
</div>
</div>
<!-- Props Table -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Props</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>zebra</code></td>
<td>boolean</td>
<td>false</td>
<td>Alternating row colors</td>
</tr>
<tr>
<td><code>pinRows</code></td>
<td>boolean</td>
<td>false</td>
<td>Pin header row on scroll</td>
</tr>
<tr>
<td><code>pinCols</code></td>
<td>boolean</td>
<td>false</td>
<td>Pin first column on scroll</td>
</tr>
<tr>
<td><code>size</code></td>
<td>string</td>
<td>-</td>
<td>'xs' | 'sm' | 'md' | 'lg'</td>
</tr>
</tbody>
</table>
</div>
<!-- Sub-components -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sub-components</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Table.Head</code></td>
<td>Table header (thead)</td>
</tr>
<tr>
<td><code>Table.Body</code></td>
<td>Table body (tbody)</td>
</tr>
<tr>
<td><code>Table.Foot</code></td>
<td>Table footer (tfoot)</td>
</tr>
<tr>
<td><code>Table.Row</code></td>
<td>Table row with hover/active props</td>
</tr>
<tr>
<td><code>Table.Th</code></td>
<td>Table header cell</td>
</tr>
<tr>
<td><code>Table.Td</code></td>
<td>Table data cell</td>
</tr>
</tbody>
</table>
</div>
<!-- Sizes -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
<div class="example-stack" style="margin-bottom: 2rem;">
<div class="overflow-x-auto">
<table class="table table-xs">
<thead>
<tr>
<th>XS</th>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Alice</td>
<td>Engineer</td>
</tr>
</tbody>
</table>
</div>
<div class="overflow-x-auto">
<table class="table table-sm">
<thead>
<tr>
<th>SM</th>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Alice</td>
<td>Engineer</td>
</tr>
</tbody>
</table>
</div>
<div class="overflow-x-auto">
<table class="table table-lg">
<thead>
<tr>
<th>LG</th>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Alice</td>
<td>Engineer</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>