@liji-table/core
Framework-Agnostic Data Grid Core
>
Version 0.0.6 - Production Ready β
A
framework-agnostic, high-performance table engine that powers the LIJI-Table ecosystem.
It provides all advanced table logic β sorting, filtering, pagination, column resizing, selection, pinning, export, and state management β without depending on any UI framework.
> Pure logic. Zero UI. Maximum control.
---
π Recent Updates (v0.0.2)
$3
-
Natural Sort Algorithm - Implemented
Intl.Collator for proper string sorting with numbers
- Now correctly sorts: "Item 1", "Item 2", "Item 10" (not "Item 1", "Item 10", "Item 2")
- Works for both regular sorting and grouped data
-
Auto-Reorder Pinned Columns - When pinning columns, they now automatically move to the correct position
- Left-pinned columns move to the start
- Right-pinned columns move to the end
- Unpinned columns return to the middle section
$3
- Fixed template literal syntax errors in grouping and CSV export code
- Corrected indentation in groupRow object definition
- Improved code quality and maintainability
$3
- β
All 13 core tests passing
- β
Natural sort test coverage
- β
Column pinning test coverage
- β
Full feature regression testing
---
π Why @liji-table/core?
Most table libraries tightly couple
UI + logic, making them:
- Hard to customize
- Hard to optimize
- Framework-locked
@liji-table/core solves this by acting as a
headless table engine that can be used with:
- React
- Angular
- Vue
- Svelte
- Vanilla JS
- Custom renderers
---
π§± Architecture Overview
Your UI (Any Framework)
β
@liji-table/core
- No DOM assumptions
- No CSS dependencies
- No framework imports
- Works purely with data & state
Framework bindings (like
@liji-table/react) are thin wrappers around this core.
---
β¨ Key Features Explained
$3
- No rendering
- No HTML
- No styles
- Only
data processing & state
---
$3
- Ascending / Descending / None
- Natural sort (numeric + text)
- Column-level sortable control
---
$3
- Global search across all fields
- Column-level filters
- Case-insensitive matching
---
$3
- Page index & page size control
- Automatic page calculations
- Safe boundary handling
---
$3
- Manual width setting
- Smart auto-resize using canvas measurement
- Font-aware sizing
---
$3
- Reorder columns by index
- Preserves pinned column rules
---
$3
- Pin columns to left or right
- Automatic column reordering
- Ideal for IDs, actions, or checkboxes
---
$3
- Toggle individual row selection
- Select / unselect all rows on current page
- Page-aware selection logic
---
$3
- Export filtered & sorted data
- CSV generation without dependencies
- Visible-columnβaware export
---
π¦ Installation
``
bash
npm install @liji-table/core
`
π Basic Usage (Framework Agnostic)
`
import { UniversalTableCore } from "@liji-table/core";
const data = [
{ id: 1, name: "Alice", sales: 1200 },
{ id: 2, name: "Bob", sales: 900 }
];
const columns = [
{ id: "name", label: "Name", sortable: true },
{ id: "sales", label: "Sales", sortable: true }
];
const table = new UniversalTableCore(data, columns);
// Subscribe to state changes
const unsubscribe = table.subscribe(state => {
console.log("Table state updated:", state);
});
// Actions
table.setSearch("alice");
table.toggleSort("sales");
table.setPageSize(5);
// Get processed rows
const rows = table.getRows();
`
π§ Core State & Data
$3
| Property | Description |
|--------|------------|
| pageIndex
| Current page index |
| pageSize
| Rows per page |
| searchQuery
| Global search query |
| filters
| Column-level filters |
| sortColumn
| Active sort column |
| sortDirection
| asc
/ desc
/ null
|
| columnWidths
| Column width map |
| columns
| Column definitions |
| selectedIds` | Selected row IDs |