import { type ITableAction } from './dees-table.js'; import * as plugins from '../00plugins.js'; import { html, css, cssManager } from '@design.estate/dees-element'; interface ITableDemoData { date: string; amount: string; description: string; } export const demoFunc = () => html`
{ document.body.classList.toggle('bright'); document.body.classList.toggle('dark'); }}>Toggle Theme

Basic Table with Actions

A standard table with row actions, editable fields, and context menu support. Double-click on descriptions to edit. Grid lines are enabled by default.

Table with Vertical Lines

Enhanced column separation for better data tracking.

Table with Full Grid

Complete grid lines for maximum readability and structure.

Table with Horizontal Lines Only

Emphasis on row separation without column dividers.

Simple Table (No Grid)

Clean, minimal design without grid lines. Set showGrid to false to disable the default grid.

Table with Custom Display Function

Transform data for display using custom formatting.

({ Product: item.product, 'Units Sold': item.units.toLocaleString(), Revenue: '$' + item.revenue.toLocaleString(), Growth: (item.growth * 100).toFixed(1) + '%', 'Q1 2024 Forecast': '$' + item.forecast.toLocaleString() })} dataName="products" >

Empty Table State

How the table looks when no data is available.

Schema-First Columns (New)

Defines columns explicitly and renders via schema. No displayFunction needed.

html`${v}` }, { key: 'joinedAt', header: 'Joined', renderer: (v: string) => new Date(v).toLocaleDateString() }, ]} .data=${[ { name: 'Alice', email: 'alice@example.com', joinedAt: '2022-08-01' }, { name: 'Bob', email: 'bob@example.com', joinedAt: '2021-12-11' }, { name: 'Carol', email: 'carol@example.com', joinedAt: '2023-03-22' }, ]} dataName="users" >

Partial Schema + Augment (New)

Provides only the important columns; the rest are merged in from displayFunction.

({ name: u.name, email: u.email, role: u.role })} .augmentFromDisplayFunction=${true} .data=${[ { name: 'Erin', email: 'erin@example.com', role: 'Admin' }, { name: 'Finn', email: 'finn@example.com', role: 'User' }, { name: 'Gina', email: 'gina@example.com', role: 'User' }, ]} dataName="users" >
{ console.log('Selection changed', e.detail); }} @search-changed=${(e: CustomEvent) => { const tbl = document.getElementById('tableFilterSelectDemo') as any; if (tbl) tbl.setFilterText(e.detail.value); }} @search-submit=${(e: CustomEvent) => { const tbl = document.getElementById('tableFilterSelectDemo') as any; if (tbl) tbl.setFilterText(e.detail.value); }} >

Filtering + Multi-Selection (New)

Use the search bar to filter rows; toggle selection via checkboxes. Click headers to sort.

Column Filters + Sticky Header (New)

Per-column quick filters and sticky header with internal scroll. Try filtering the Name column. Uses --table-max-height var.

`;