@litable/core

Framework-agnostic, dependency-free table plugin — the engine behind all @litable/* framework wrappers.

Install

npm install @litable/core

Usage (Vanilla JS / TypeScript)

import LiTable from '@litable/core';

const table = new LiTable(document.getElementById('myTable'), {
  data: [
    { id: 1, name: 'Alice', age: 30 },
    { id: 2, name: 'Bob',   age: 25 },
  ],
  columns: [
    { key: 'id',   header: 'ID',   sortable: true },
    { key: 'name', header: 'Name', sortable: true, filterable: true },
    { key: 'age',  header: 'Age',  sortable: true },
  ],
  sorting:    true,
  filtering:  true,
  pagination: { pageSize: 10, pageSizes: [5, 10, 25, 50, 'All'] },
});

Existing HTML table

<table id="myTable">
  <thead><tr><th>Name</th><th>Age</th></tr></thead>
  <tbody>
    <tr><td>Alice</td><td>30</td></tr>
  </tbody>
</table>

const table = new LiTable(document.getElementById('myTable'), {
  sorting: true,
  filtering: true,
  pagination: true,
});

AJAX

const table = new LiTable(container, {
  ajax: '/api/users',
  columns: [...],
});

Virtual Scrolling

const table = new LiTable(container, {
  data,
  columns,
  virtualScrolling: { height: '500px', rowHeight: 40, bufferSize: 5 },
});

Instance API

table.update({ data: newData });  // update options & re-render
table.refresh();                  // re-render with current state
table.reload();                   // full re-initialise from original HTML
table.destroy();                  // remove all enhancements

table.getData();                  // → Row[]
table.setData(newData);           // replace all rows & re-render
table.getHead();                  // → <thead> element
table.setHead(htmlOrElement);     // replace <thead>
table.getBodyRow();               // → HTMLTableRowElement[]
table.setBodyRow(rows);           // replace internal rows (call refresh() after)

Options

Data

| Option | Type | Description | |-----------|-----------------------|-------------| | data | Row[] | Inline row data | | columns | ColumnDef[] | Column definitions | | ajax | string | URL for JSON data fetch |

ColumnDef

| Field | Type | Description | |---------------|-------------------------|-------------| | key | string (required) | Property key in each row object | | header | string (required) | Column header text | | sortable | boolean | Allow sorting | | filterable | boolean | Show filter input | | resizable | boolean | Allow resize handle | | reorderable | boolean | Allow drag reorder | | width | number \| string | Column width | | minWidth | number | Min width (px) when resizing | | maxWidth | number | Max width (px) when resizing | | hidden | boolean | Hide column | | pinLeft | boolean | Sticky left | | pinRight | boolean | Sticky right | | render | (value, row) => string| Custom cell renderer |

Feature Options

| Option | Type | Default | Description | |--------------------|---------------------------------------|---------|-------------| | wrapper | boolean | true | Render controls wrapper | | sorting | boolean | true | Column sorting | | filtering | boolean \| FilterOptions | true | Full-text search | | pagination | boolean \| PaginationOptions | true | Pagination | | virtualScrolling | boolean \| VirtualScrollOptions | — | Virtual scrolling | | columnResizing | boolean \| ColumnResizingOptions | — | Resize handles | | columnReordering | boolean | — | Drag reorder | | rowSelection | boolean \| RowSelectionOptions | — | Row selection | | inlineEditing | boolean \| InlineEditingOptions | — | Inline cell edit | | editable | EditableOptions | — | CRUD modal | | export | boolean \| ExportOptions | — | Export (CSV/Excel/PDF) | | info | boolean | true | Entry count text | | theme | string \| ThemeOptions | — | Theme |

Callbacks

| Option | Signature | Description | |----------------|-----------|-------------| | onSort | (column, direction) => void | After sort | | onFilter | (term) => void | After search | | onPageChange | (page, pageSize) => void | On page change | | onRowSelect | (rows) => void | On row selection | | onChange | (data) => void | After inline edit save | | beforeRender | () => void | Before render | | onRender | () => void | After render |

Framework Wrappers

| Package | Framework | |---------|-----------| | @litable/react | React 18/19 | | @litable/angular | Angular 17+ | | @litable/vue3 | Vue 3 | | @litable/vue2 | Vue 2.7 | | @litable/svelte | Svelte 4/5 | | @litable/solid | SolidJS | | @litable/preact | Preact 10 | | @litable/alpine | Alpine.js 3 | | @litable/qwik | Qwik | | @litable/astro | Astro 4 | | @litable/nuxt | Nuxt 3 |

License

Copyright © 2026 Naveen Yadav. All rights reserved.
Proprietary and confidential — see LICENSE.