or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

builtin-functions.mdcolumn-features.mdcolumn-system.mdindex.mdrow-features.mdrow-models.mdsorting-filtering.mdtable-management.md
tile.json

tessl/npm-tanstack--table-core

Headless UI for building powerful tables & datagrids for TS/JS

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tanstack/table-core@8.21.x

To install, run

npx @tessl/cli install tessl/npm-tanstack--table-core@8.21.0

index.mddocs/

TanStack Table Core

TanStack Table is a headless UI library for building powerful tables and datagrids in TypeScript/JavaScript. It provides a framework-agnostic core that works with React, Vue, Solid, Svelte, Angular, and other frameworks. The library offers comprehensive table functionality including sorting, filtering, grouping, pagination, row selection, column management, and virtualization support while maintaining complete control over markup and styling.

Package Information

  • Package Name: @tanstack/table-core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tanstack/table-core

Core Imports

import { 
  createTable, 
  getCoreRowModel,
  createColumnHelper,
  type Table,
  type ColumnDef 
} from "@tanstack/table-core";

For CommonJS:

const { 
  createTable, 
  getCoreRowModel, 
  createColumnHelper 
} = require("@tanstack/table-core");

Basic Usage

import { 
  createTable, 
  getCoreRowModel, 
  createColumnHelper,
  type ColumnDef
} from "@tanstack/table-core";

// Define your data type
type Person = {
  firstName: string;
  lastName: string;
  age: number;
  visits: number;
  status: string;
  progress: number;
};

// Create column helper
const columnHelper = createColumnHelper<Person>();

// Define columns
const columns: ColumnDef<Person, any>[] = [
  columnHelper.accessor('firstName', {
    header: () => 'First Name',
    cell: info => info.getValue(),
  }),
  columnHelper.accessor('lastName', {
    header: () => 'Last Name',
    cell: info => info.getValue(),
  }),
  columnHelper.accessor('age', {
    header: () => 'Age',
    cell: info => info.getValue(),
  }),
];

// Sample data
const data: Person[] = [
  {
    firstName: 'John',
    lastName: 'Doe', 
    age: 25,
    visits: 100,
    status: 'In Relationship',
    progress: 50,
  },
  // ... more data
];

// Create table instance
const table = createTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
});

// Access table data
const headerGroups = table.getHeaderGroups();
const rowModel = table.getRowModel();

Architecture

TanStack Table Core is built around several key architectural concepts:

  • Table Instance: Central table object managing state and providing all table functionality
  • Column Definitions: Declarative column configurations with accessor functions and render logic
  • Row Models: Pluggable row processing pipelines for sorting, filtering, grouping, and pagination
  • Feature System: Modular feature plugins that extend core functionality
  • State Management: Controlled and uncontrolled state patterns for table configuration
  • Type Safety: Full TypeScript integration with generic type preservation throughout the API

Capabilities

Table Creation and Management

Core table instance creation and lifecycle management. The foundation of all table functionality.

function createTable<TData extends RowData>(
  options: TableOptionsResolved<TData>
): Table<TData>;

Table Management

Column Definition and Management

Powerful column definition system with support for accessor functions, display columns, and grouped columns.

function createColumnHelper<TData extends RowData>(): ColumnHelper<TData>;

interface ColumnHelper<TData> {
  accessor<TAccessor extends AccessorFn<TData> | DeepKeys<TData>>(
    accessor: TAccessor,
    column: ColumnDef<TData, any>
  ): ColumnDef<TData, any>;
  display(column: DisplayColumnDef<TData>): DisplayColumnDef<TData, unknown>;
  group(column: GroupColumnDef<TData>): GroupColumnDef<TData, unknown>;
}

Column System

Row Model Utilities

Row processing pipelines that transform and filter table data through various operations.

function getCoreRowModel<TData extends RowData>(): (
  table: Table<TData>
) => () => RowModel<TData>;

function getSortedRowModel<TData extends RowData>(): (
  table: Table<TData>
) => () => RowModel<TData>;

function getFilteredRowModel<TData extends RowData>(): (
  table: Table<TData>
) => () => RowModel<TData>;

Row Models

Sorting and Filtering

Comprehensive sorting and filtering capabilities with built-in functions and custom function support.

interface SortingOptions<TData extends RowData> {
  onSortingChange?: OnChangeFn<SortingState>;
  enableSorting?: boolean;
  enableSortingRemoval?: boolean;
  enableMultiSort?: boolean;
  sortingFns?: Record<string, SortingFn<TData>>;
  isMultiSortEvent?: (e: unknown) => boolean;
  maxMultiSortColCount?: number;
  sortDescFirst?: boolean;
}

Sorting and Filtering

Column Features

Advanced column functionality including visibility control, ordering, pinning, and resizing.

interface VisibilityOptions {
  onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
  enableHiding?: boolean;
}

interface ColumnPinningOptions {
  onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
  enablePinning?: boolean;
}

Column Features

Row Features

Row-level functionality including selection, expansion, grouping, and pagination.

interface RowSelectionOptions<TData extends RowData> {
  onRowSelectionChange?: OnChangeFn<RowSelectionState>;
  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
  enableMultiRowSelection?: boolean | ((row: Row<TData>) => boolean);
  enableSubRowSelection?: boolean | ((row: Row<TData>) => boolean);
}

Row Features

Built-in Functions

Pre-built sorting, filtering, and aggregation functions for common table operations.

const sortingFns: {
  alphanumeric: SortingFn<any>;
  alphanumericCaseSensitive: SortingFn<any>;
  text: SortingFn<any>;
  textCaseSensitive: SortingFn<any>;
  datetime: SortingFn<any>;
  basic: SortingFn<any>;
};

const filterFns: {
  includesString: FilterFn<any>;
  includesStringSensitive: FilterFn<any>;
  equalsString: FilterFn<any>;
  arrIncludes: FilterFn<any>;
  equals: FilterFn<any>;
  inNumberRange: FilterFn<any>;
};

Built-in Functions

Core Types

interface Table<TData extends RowData> extends CoreInstance<TData>,
  HeadersInstance<TData>,
  VisibilityInstance<TData>,
  ColumnOrderInstance<TData>,
  ColumnPinningInstance<TData>,
  RowPinningInstance<TData>,
  ColumnFiltersInstance<TData>,
  GlobalFilterInstance<TData>,
  SortingInstance<TData>,
  GroupingInstance<TData>,
  ExpandedInstance<TData>,
  PaginationInstance<TData>,
  RowSelectionInstance<TData>,
  ColumnSizingInstance,
  GlobalFacetingInstance<TData> {}

interface TableOptions<TData extends RowData> extends CoreOptions<TData>,
  VisibilityOptions,
  ColumnOrderOptions,
  ColumnPinningOptions,
  RowPinningOptions<TData>,
  ColumnFiltersOptions<TData>,
  GlobalFilterOptions<TData>,
  SortingOptions<TData>,
  GroupingOptions,
  ExpandedOptions<TData>,
  PaginationOptions,
  RowSelectionOptions<TData>,
  ColumnSizingOptions,
  FacetedOptions<TData> {}

interface ColumnDef<TData extends RowData, TValue = unknown> extends 
  ColumnDefBase<TData, TValue>,
  VisibilityColumnDef,
  ColumnPinningColumnDef,
  ColumnFiltersColumnDef<TData>,
  GlobalFilterColumnDef,
  SortingColumnDef<TData>,
  GroupingColumnDef<TData, TValue>,
  ColumnSizingColumnDef {}

interface Row<TData extends RowData> extends CoreRow<TData>,
  VisibilityRow<TData>,
  ColumnPinningRow<TData>,
  RowPinningRow,
  ColumnFiltersRow<TData>,
  GroupingRow,
  RowSelectionRow,
  ExpandedRow {}

type RowData = Record<string, any>;

type Updater<T> = T | ((old: T) => T);

type OnChangeFn<T> = (updaterOrValue: Updater<T>) => void;