DataTable Documentation — Black & White UI

Features

🪶

Lightweight

~32KB minified with zero dependencies.

🔌

Plugin Architecture

Extend with official plugins or create your own.

✏️

Inline Editing

Double-click to edit cells with validation.

🔍

Search & Filter

Global search across all columns.

↕️

Sorting

Click headers to sort ascending/descending.

📋

Excel Copy/Paste

Copy from Excel and paste directly into table.

↩️

Undo/Redo

Full history with Ctrl+Z / Ctrl+Y.

♿

Accessible

Keyboard navigation and ARIA labels.

Installation

npm

bash

npm install @bw-ui/datatable

CDN

html

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/@bw-ui/datatable/dist/bw-datatable.min.css">

<!-- JavaScript -->
<script src="https://unpkg.com/@bw-ui/datatable/dist/bw-datatable.min.js"></script>

Quick Start

Get up and running in seconds. Just pass your data and let BW DataTable handle the rest.

Basic Table — Live Demo

javascript

import { BWDataTable } from '@bw-ui/datatable';
import '@bw-ui/datatable/dist/bw-datatable.min.css';

const table = new BWDataTable('#my-table', {
  data: [
    { id: 1, name: 'John Doe', email: '[email protected]', role: 'Admin', status: 'Active' },
    { id: 2, name: 'Jane Smith', email: '[email protected]', role: 'Editor', status: 'Active' },
    { id: 3, name: 'Bob Wilson', email: '[email protected]', role: 'Viewer', status: 'Inactive' },
  ],
  sortable: true,
  searchable: true,
  paginated: true,
  pageSize: 10
});

Options

Configure every aspect of your data table with these options.

javascript

new BWDataTable('#table', {
  // Data
  data: [],                    // Array of row objects
  columns: null,               // Column definitions (auto-detect if null)
  rowId: 'id',                // Field to use as row ID

  // Features
  editable: false,             // Enable inline editing
  editableColumns: [],         // Which columns are editable
  selectable: false,           // Enable row selection
  selectionMode: 'multi',      // 'single' | 'multi' | 'none'
  sortable: true,              // Enable column sorting
  paginated: true,             // Enable pagination
  pageSize: 20,                // Rows per page
  searchable: true,            // Enable global search

  // UI
  showHeader: true,            // Show table header
  showFooter: true,            // Show pagination footer
  emptyText: 'No data',       // Empty state text

  // Callbacks
  onEditEnd: null,             // (rowId, columnId, value, oldValue) => {}
  onSelect: null,              // (selectedIds) => {}
  onSort: null,                // (column, direction) => {}
  onPageChange: null,          // (page) => {}
});

Sorting

Click column headers to sort ascending or descending.

Sortable Table — Click Headers to Sort

javascript

const table = new BWDataTable('#table', {
  data: myData,
  sortable: true,
  onSort: (column, direction) => {
    console.log(`Sorted by ${column} ${direction}`);
  }
});

// Programmatic sorting
table.sort('name', 'asc');
table.sort('salary', 'desc');

Search & Filter

Global search across all columns.

Searchable Table — Try Typing in the Search Box

javascript

const table = new BWDataTable('#table', {
  data: myData,
  searchable: true
});

// Programmatic filtering
table.filter('global', 'john');       // Search all columns
table.filter('role', 'Admin');        // Filter specific column
table.clearFilters();                 // Clear all filters

Pagination

Built-in pagination with configurable page sizes.

Paginated Table — 5 Rows Per Page

javascript

const table = new BWDataTable('#table', {
  data: myData,
  paginated: true,
  pageSize: 5,
  onPageChange: (page) => {
    console.log('Page:', page);
  }
});

// Programmatic navigation
table.goToPage(2);          // Go to page 3 (0-indexed)
table.setPageSize(20);       // Change page size

Row Selection

Enable single or multi-row selection with checkboxes.

Selectable Table — Click Checkboxes

Selected: None

javascript

const table = new BWDataTable('#table', {
  data: myData,
  selectable: true,
  selectionMode: 'multi',
  onSelect: (selectedIds) => {
    console.log('Selected:', selectedIds);
  }
});

// Programmatic selection
table.selectAll();           // Select all visible rows
table.clearSelection();       // Clear selection

Inline Editing

Double-click any cell to edit. Press Enter to save, Escape to cancel.

Editable Table — Double-Click Cells to Edit

Edit log: Double-click a cell to edit...

javascript

const table = new BWDataTable('#table', {
  data: myData,
  editable: true,
  editableColumns: ['name', 'email', 'role'],
  onEditEnd: (rowId, columnId, value, oldValue) => {
    console.log(`Cell [${rowId}][${columnId}]: ${oldValue} → ${value}`);
  }
});

Custom Columns

Define custom column renderers for badges, formatted numbers, and more.

Custom Column Rendering

javascript

const table = new BWDataTable('#table', {
  data: myData,
  columns: [
    { id: 'name', header: 'Name' },
    { id: 'email', header: 'Email' },
    {
      id: 'status',
      header: 'Status',
      render: (value) => value
        ? '<span class="badge green">Active</span>'
        : '<span class="badge red">Inactive</span>'
    },
    {
      id: 'salary',
      header: 'Salary',
      render: (value) => `$${value.toLocaleString()}`
    }
  ]
});

Plugins

Extend your data table with official plugins. Each plugin is a separate package for optimal bundle size.

@bw-ui/datatable-history ~3KB

Undo/Redo support with Ctrl+Z and Ctrl+Y.

@bw-ui/datatable-export ~2KB

Export table data to JSON, CSV, or clipboard.

@bw-ui/datatable-clipboard ~3KB

Excel-compatible copy/paste.

@bw-ui/datatable-url-state ~2KB

Sync table state with URL parameters.

Using Plugins

javascript

import { BWDataTable } from '@bw-ui/datatable';
import { HistoryPlugin } from '@bw-ui/datatable-history';
import { ExportPlugin } from '@bw-ui/datatable-export';

const table = new BWDataTable('#table', { data: myData })
  .use(HistoryPlugin)
  .use(ExportPlugin);

// Now you have undo/redo and export!
table.undo();
table.exportCSV();

History Plugin (Undo/Redo)

Full undo/redo support for all table changes.

Undo/Redo Demo — Edit Cells, Then Click Undo

History: 0 changes

javascript

import { HistoryPlugin } from '@bw-ui/datatable-history';

const table = new BWDataTable('#table', { data, editable: true })
  .use(HistoryPlugin, { maxHistory: 50 });

table.undo();     // Undo last change
table.redo();     // Redo

// Keyboard: Ctrl+Z = Undo, Ctrl+Y = Redo

Export Plugin

Export your table data to JSON, CSV, or copy to clipboard.

Export Demo — Click Buttons to Export

javascript

import { ExportPlugin } from '@bw-ui/datatable-export';

const table = new BWDataTable('#table', { data })
  .use(ExportPlugin);

table.exportCSV('users.csv');
table.exportJSON('users.json');
table.copyToClipboard();

Clipboard Plugin

Excel-compatible copy and paste. Select cells and use Ctrl+C / Ctrl+V.

Clipboard Demo — Select Rows and Copy/Paste

Select rows to copy

javascript

import { ClipboardPlugin } from '@bw-ui/datatable-clipboard';

const table = new BWDataTable('#table', { data, selectable: true })
  .use(ClipboardPlugin);

// Ctrl+C = Copy selected
// Ctrl+V = Paste from clipboard

URL State Plugin

Sync table state with URL parameters. Share filtered, sorted views via links.

URL State Demo — Sort/Filter to See URL Update

?

javascript

import { UrlStatePlugin } from '@bw-ui/datatable-url-state';

const table = new BWDataTable('#table', { data, sortable: true })
  .use(UrlStatePlugin, { prefix: 'dt_' });

// URL will contain: ?dt_sort=name:asc&dt_page=2

API Methods

Data Methods

Method	Description
`getData()`	Get current rows (filtered/sorted)
`setData(data)`	Replace all data
`addRow(row)`	Add a single row
`removeRow(rowId)`	Remove row by ID
`updateRow(rowId, data)`	Update row data

Selection Methods

Method	Description
`getSelected()`	Get selected row objects
`getSelectedIds()`	Get selected row IDs
`selectAll()`	Select all visible rows
`clearSelection()`	Clear all selection

Sorting & Filtering

Method	Description
`sort(column, direction)`	Sort by column ('asc' or 'desc')
`filter(column, value)`	Filter column
`clearFilters()`	Clear all filters

Pagination

Method	Description
`goToPage(page)`	Go to page (0-indexed)
`setPageSize(size)`	Change rows per page

Events

javascript

table.on('edit:end', (e) => console.log('Edited', e));
table.on('select:change', (e) => console.log('Selected', e.selectedIds));
table.on('sort:change', (e) => console.log('Sorted', e.column));
table.on('page:change', (e) => console.log('Page', e.page));

Theming

css

:root {
  --bw-dt-bg: #ffffff;
  --bw-dt-text: #1a1a1a;
  --bw-dt-border: #e5e5e5;
  --bw-dt-header-bg: #f8f9fa;
  --bw-dt-row-hover: #f5f5f5;
  --bw-dt-row-selected: #e3f2fd;
}

/* Dark Mode */
[data-theme='dark'] {
  --bw-dt-bg: #1a1a1a;
  --bw-dt-text: #e5e5e5;
  --bw-dt-border: #333;
}

Keyboard Shortcuts

↑ ↓ ← →Navigate cells

EnterStart editing

EscapeCancel editing

TabNext cell

SpaceToggle selection

Ctrl+ZUndo

Ctrl+YRedo

Ctrl+CCopy

Ctrl+VPaste

Browser Support

Browser	Version
Chrome	80+
Firefox	75+
Safari	13+
Edge	80+