Fluixi UI
GitHub ↗

table-core

Headless fine-grained reactive table engine with a feature-module architecture.


A pure-TypeScript reactive table engine inspired by TanStack Table v8. Each feature is a self-contained module that augments the table state and APIs via declaration merging. The row-model pipeline is a chain of createMemos so only the stage that read a changed slice recomputes.

Installation

pnpm add @fluixi/table-core

Usage

import {
  createTable, columnHelper,
  SortingFeature, FilteringFeature, PaginationFeature, RowSelectionFeature,
  ColumnVisibilityFeature, ColumnOrderFeature, ColumnSizingFeature,
  ColumnPinningFeature, ExpandingFeature, GroupingFeature,
} from '@fluixi/table-core';

const col = columnHelper<Person>();

const table = createTable({
  columns: [
    col.accessor('name', { header: 'Name', sortingFn: 'text' }),
    col.accessor('age',  { header: 'Age',  sortingFn: 'number' }),
  ],
  data: () => people(),
  _features: [SortingFeature, FilteringFeature, PaginationFeature, RowSelectionFeature],
  initialState: { sorting: [{ id: 'name', desc: false }] },
});

Features

Feature Description
SortingFeature Multi-column sort; builtin fns: text, number, datetime, alphanumeric.
FilteringFeature Per-column + global filter; faceting (getFacetedUniqueValues, getFacetedMinMaxValues).
PaginationFeature Page slicing, nav guards, manual pagination for server-side data.
RowSelectionFeature Id-map selection; cascade to sub-rows; indeterminate parent state from leaf-only storage.
ColumnVisibilityFeature Show/hide columns; getVisibleLeafColumns.
ColumnOrderFeature Reorder columns via columnOrder state.
ColumnSizingFeature size/minSize/maxSize; resize handler; getTotalSize, getStart/getAfter.
ColumnPinningFeature Pin columns left/right; left/center/right splits.
ExpandingFeature Tree row expansion; flattened row model including revealed descendants.
GroupingFeature Group rows into synthetic group rows; builtin aggregation fns.

_features must be listed in pipeline order: filtering → sorting → pagination; selection, visibility and pinning are order-free.


Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.