Svelte data table

Table, Bro is the Custom Element ‹table-bro›, so a Svelte 5 app renders it in markup as it is. bind:this gives the element its columns, rows and config by configure(), the attribute onbro-action listens to its events, and the theme attribute sets its theme. The page below is the working page of the sample project samples/frameworks/svelte of the repository, with Svelte 5.57; StackBlitz opens it in the browser.

Items per page:

0 of 0

How do I install Table, Bro in Svelte?

Install the packages

The table engine @table-bro/core and a skin, @table-bro/native of plain HTML elements; @table-bro/bootstrap with bootstrap gives the skin of Bootstrap 5:
```
npm install @table-bro/core @table-bro/native
```

Register the element and the skin

Once, before the tables: the import of the skin defines ‹table-bro› and registers the skin nv. The CSS of the core and of the skin come as imports, which Vite and the other bundlers take. src/skin.ts:

// The CSS of the core and of the skin, then the skin: its import defines <table-bro> and registers the skin nv
import '@table-bro/core/dist/table-bro.min.css';
import '@table-bro/native/dist/table-bro.native.min.css';
import '@table-bro/native';

import './sample-page.css';

Describe the columns, the rows and the config

conf.skin names the registered skin. src/orders.ts:

import type {BroCol, BroConfig, BroRow} from '@table-bro/core';

export interface Order extends BroRow {
  description: string;
  price: number;
}

export const cols: BroCol<Order>[] = [
  {
    title: 'Description',
    name: 'description'
  }, {
    title: 'Price',
    name: 'price',
    dataType: 'number',
    className: 'bro-col_text-right'
  }
];

export const rows: Order[] = [
  {
    description: 'Modern Cotton Chair',
    price: 100
  }, {
    description: 'Awesome Concrete Ball',
    price: 200
  }
];

export const conf: BroConfig = {
  skin: 'nv',
  toolbarTitle: 'Orders'
};

How do I pass cols, rows and conf?

The columns, the rows and the config go to the table in one call, configure({cols, rows, conf}), once the element is mounted: bind:this gives the element (Svelte, bind:this), onMount makes the call (Svelte, Lifecycle hooks). An attribute that starts with on adds a listener of the event of its name, bro-action for onbro-action (Svelte, Events); the sample logs the name of each action. src/OrdersTable.svelte:

<script lang="ts">
  import {onMount} from 'svelte';

  import type {BroActionDetail, TableBroHTMLElement} from '@table-bro/core';

  import {cols, conf, rows} from './orders';

  let table: TableBroHTMLElement;

  onMount(() => table.configure({cols, rows, conf}));
</script>

<div class="bro-table-shadow-container">
  <table-bro id="orders" bind:this={table} theme="auto"
             onbro-action={(event: CustomEvent<BroActionDetail>) => console.log(event.detail.action)}></table-bro>
</div>

How do I render it?

src/main.ts imports the skin before the tables. A project of npm create vite@latest with the Svelte template needs no other setup for ‹table-bro›:

// The skin is registered before the tables
import './skin';

import {mount} from 'svelte';

import OrdersTable from './OrdersTable.svelte';

mount(OrdersTable, {target: document.getElementById('app')!});

How do I switch the theme?

The theme attribute or property of the table is 'light', 'dark' or 'auto', which follows the color scheme of the system; the attribute wins over config.theme. The sample sets 'auto', as a table without the attribute does; a variable of the state bound to it switches the theme, and the table puts the class bro-dark-theme or bro-light-theme on itself. More in Dark/Light mode.

Questions

Does Svelte need a wrapper for Custom Elements?

No. Svelte passes all 32 tests of Custom Elements Everywhere. Svelte also compiles its own components into Custom Elements (Svelte, Custom elements).

Can I bind cols and rows as props?

The table takes its data by configure(), one call for the columns, the rows and the config. New rows go by replaceRows(rows) on the same element.

Does it work with SvelteKit?

The element needs the browser: onMount runs only there, so the server render of SvelteKit leaves the element empty and the browser fills it.

Getting started, Custom content in tables using Custom Elements, MCP server for AI coding agents, Angular data table, Preact data table, React data table, Solid data table, Vue 3 data table.