Table Component

Table (<dsx-table>)

A data table Web Component supporting resizable columns, sorting, and column visibility toggle.

Live Preview

Import: @bnotk/dsx/components/table.js

Properties

Property	Type	Default	Description
columns	ColDef[]	[]	Column definitions
rows	object[]	[]	Row data
sortable	boolean	false	Enable column sorting
column-toggle	boolean	false	Show column visibility dropdown
row-height	string	'auto'	Fixed row height

ColDef

interface ColDef {
  id: string;       // Field key in row objects
  label: string;    // Column header text
  resizable?: boolean;
  width?: string;   // CSS width (e.g., '200px')
  hidden?: boolean; // Initially hidden
}

Events

Event	Detail	Description
dsx-sort-change	{ column: string, direction: 'asc' | 'desc' }	Sort state changed
dsx-row-click	{ row: object, index: number }	Row clicked
dsx-column-toggle	{ column: string, visible: boolean }	Column visibility changed

Usage

<script type="module">
  import '@bnotk/dsx/components/table.js';

  const table = document.querySelector('dsx-table');
  table.columns = [
    { id: 'name', label: 'Name', resizable: true },
    { id: 'email', label: 'E-Mail', resizable: true },
    { id: 'role', label: 'Role', width: '120px' },
  ];
  table.rows = [
    { name: 'Alice', email: 'alice@example.de', role: 'Admin' },
    { name: 'Bob', email: 'bob@example.de', role: 'Editor' },
  ];

  table.addEventListener('dsx-row-click', (e) => {
    console.log('Selected:', e.detail.row);
  });
</script>

<dsx-table sortable column-toggle></dsx-table>

Angular Example

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@bnotk/dsx/components/table.js';

@Component({
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <dsx-table
      [columns]="columns"
      [rows]="rows"
      sortable
      column-toggle
      (dsx-row-click)="onRow($any($event))">
    </dsx-table>
  `
})
export class TableDemoComponent {
  columns = [
    { id: 'name', label: 'Name', resizable: true },
    { id: 'status', label: 'Status' },
  ];
  rows = [
    { name: 'Task 1', status: 'Done' },
    { name: 'Task 2', status: 'Pending' },
  ];
  onRow(e: CustomEvent) {
    console.log(e.detail.row);
  }
}