Basic usage

Columns and data are provided through the JavaScript API. Every feature (search, filters, sorting, pagination, editing, selection, export) is enabled by default.

const table = document.querySelector('#basic-table');

table.setColumns([
  { key: 'name', label: 'Name', type: 'text' },
  { key: 'email', label: 'Email', type: 'text' },
  { key: 'role', label: 'Role', type: 'select', options: ['Admin', 'Editor', 'Viewer'] },
  { key: 'active', label: 'Active', type: 'boolean' },
  { key: 'joined', label: 'Joined', type: 'date' }
]);

table.setData([
  { id: 1, name: 'Alice Johnson', email: '[email protected]', role: 'Admin', active: true, joined: '2023-02-14' },
  { id: 2, name: 'James Smith', email: '[email protected]', role: 'Editor', active: true, joined: '2023-06-01' },
  ...
]);

Language (i18n)

Built-in translations: English, Czech, German, Spanish, French, Italian, Polish, Slovak. Switch locale live with setLocale(), or add your own with addTranslations().

Dark / light theme

theme="auto" (the default) follows the OS preference. It can also be forced to light or dark.

Density, resizing & loading

Switch row density, drag the edge of any column header to resize it, and toggle a loading overlay. The Salary column uses a custom format() function and right alignment.

Sorting, search & filters

Click a column header to sort. Type in the search box to match across all columns (debounced), or use the per-column filter row for a text, select, or yes/no filter.

Pagination

A larger dataset (60 rows) with adjustable rows-per-page and prev/next navigation.

Inline editing

Double-click (or press Enter on a focused cell) to edit text, number, date, and select cells. Boolean cells toggle on a single click. Press Enter to save, Escape to cancel, or click away to commit.

Row selection & export

Select rows with the checkbox column, then use the toolbar's CSV/JSON export buttons — exporting only your selection when one exists, otherwise the full (filtered) view.

Events

Every interaction dispatches a neiki-table:* custom event with details in event.detail.

Event log

CDN-style usage

<script src="https://cdn.neikiri.dev/neiki-table/neiki-table.min.js"></script>

<neiki-table id="my-table"></neiki-table>

<script>
  const table = document.querySelector('#my-table');
  table.setColumns([{ key: 'name', label: 'Name' }]);
  table.setData([{ id: 1, name: 'Example' }]);
</script>