← Back to demo

data-table examples

Fourteen single-feature examples for @jeyabbalas/data-table. Each one imports the package the same way a real consumer would.

  1. Minimal — smallest mount: eight rows defined inline in the .ts file, no network.
  2. Load from URL — 100 K-row NYC taxi fetch with a live progress bar.
  3. Programmatic filters — card / fare / tip / distance filters on NYC taxi; log filterChange.
  4. Derived columnstip_pct expression + is_airport vector on NYC taxi.
  5. Event listeners — split panel: Observe listens via on(), Drive mutates via actions.*.
  6. Custom theme — terracotta / cream palette; light + dark fully recolored.
  7. i18n (French) — French UI chrome paired with a French-native wine fixture.
  8. Custom visualization — US-states choropleth on a custom state column; Observable Plot + us-atlas.
  9. Multi-table — two tables sharing a FilterPresetManager and a SessionStore; save a preset in A, load it in B.
  10. Column exportactions.getColumnValues + synthetic __rowid__, plus the export-dialog "Include system columns" toggle.
  11. Annotations — programmatic CRUD + JSON round-trip + session persistence on table.annotations.
  12. Column header tooltips — structured popover (title / description / items) on the column-name span.
  13. Custom stats panel — replace the default column-stats slot with a BaseStatsPanel subclass; numeric columns show n · μ · σ from a custom DuckDB query, string columns show top: value (pct%).
  14. Standalone SQL editor — host-built CodeMirror editors mounted outside the data table; createSqlExtensions + buildCompletionContext give them the same SQL, schema, and DuckDB-function awareness the bundled editor uses.