tessl/npm-tanstack--table-core

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

—

Pending

Overview

Eval results

Files

Table Management

Name: tessl/npm-tanstack--table-core
Author: tessl

Core table instance creation and lifecycle management functionality. The table instance is the central object that manages all table state and provides access to all table features.

Capabilities

Table Creation

Creates a new table instance with the provided options and data.

/**
 * Creates a table instance with the provided options
 * @param options - Complete table configuration options
 * @returns Table instance with all features
 */
function createTable<TData extends RowData>(
  options: TableOptionsResolved<TData>
): Table<TData>;

interface TableOptionsResolved<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> {}

Usage Example:

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

const table = createTable({
  data: myData,
  columns: myColumns,
  getCoreRowModel: getCoreRowModel(),
  // Feature-specific options
  enableSorting: true,
  enableFiltering: true,
  onStateChange: (updater) => {
    // Handle state changes
  },
});

Core Table Interface

The main table interface that provides access to all table functionality.

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> {}

Core Instance Methods

Core table methods for accessing columns, rows, and managing state.

interface CoreInstance<TData extends RowData> {
  /** Get the initial table state */
  initialState: InitialTableState;
  /** Reset all table state to initial values */
  reset(): void;
  /** Get a column by its ID */
  getColumn(columnId: string): Column<TData, unknown> | undefined;
  /** Get all columns including sub-columns */
  getAllColumns(): Column<TData, unknown>[];
  /** Get all leaf columns (no sub-columns) */
  getAllLeafColumns(): Column<TData, unknown>[];
  /** Get all flattened columns */
  getAllFlatColumns(): Column<TData, unknown>[];
  /** Get the core row model */
  getCoreRowModel(): RowModel<TData>;
  /** Get the current processed row model */
  getRowModel(): RowModel<TData>;
  /** Get a row by its ID */
  getRow(id: string): Row<TData>;
  /** Get the current table state */
  getState(): TableState;
  /** Set the table state */
  setState(updater: Updater<TableState>): void;
  /** Set table options */
  setOptions(newOptions: Updater<TableOptionsResolved<TData>>): void;
}

Usage Examples:

// Access table state
const currentState = table.getState();

// Reset table state
table.reset();

// Get specific column
const nameColumn = table.getColumn('firstName');

// Get all columns
const allColumns = table.getAllColumns();

// Access row model
const rows = table.getRowModel().rows;

// Update state
table.setState(old => ({
  ...old,
  sorting: [{ id: 'firstName', desc: false }]
}));

Core Table Options

Essential configuration options for table creation.

interface CoreOptions<TData extends RowData> {
  /** The data for the table */
  data: TData[];
  /** Column definitions */
  columns: ColumnDef<TData, any>[];
  /** Set this option to override any autoReset feature options */
  autoResetAll?: boolean;
  /** Enable debug output for all features */
  debugAll?: boolean;
  /** Enable debug output for columns */
  debugColumns?: boolean;
  /** Enable debug output for headers */
  debugHeaders?: boolean;
  /** Enable debug output for rows */
  debugRows?: boolean;
  /** Enable debug output for table */
  debugTable?: boolean;
  /** Initial table state */
  initialState?: InitialTableState;
  /** Get sub rows for expanding functionality */
  getSubRows?: (originalRow: TData, index: number) => undefined | TData[];
  /** Get row ID from original data */
  getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
  /** Meta information that can be accessed anywhere */
  meta?: TableMeta<TData>;
  /** State change handler */
  onStateChange?: OnChangeFn<TableState>;
  /** Render fallback for when no data is available */
  renderFallbackValue?: any;
  /** Array of extra features for the table */
  _features?: TableFeature[];
}

Table State Management

The table state contains all feature states and can be controlled externally.

interface TableState extends 
  CoreTableState,
  VisibilityTableState,
  ColumnOrderTableState,
  ColumnPinningTableState,
  RowPinningTableState,
  ColumnFiltersTableState,
  GlobalFilterTableState,
  SortingTableState,
  GroupingTableState,
  ExpandedTableState,
  PaginationTableState,
  RowSelectionTableState,
  ColumnSizingTableState {}

interface InitialTableState extends 
  Partial<VisibilityTableState>,
  Partial<ColumnOrderTableState>,
  Partial<ColumnPinningTableState>,
  Partial<RowPinningTableState>,
  Partial<ColumnFiltersTableState>,
  Partial<GlobalFilterTableState>,
  Partial<SortingTableState>,
  Partial<GroupingTableState>,
  Partial<ExpandedTableState>,
  PaginationInitialTableState,
  Partial<RowSelectionTableState>,
  Partial<ColumnSizingTableState> {}

Usage Examples:

// Controlled state example
const [sorting, setSorting] = useState([]);
const [columnFilters, setColumnFilters] = useState([]);

const table = createTable({
  data,
  columns,
  state: {
    sorting,
    columnFilters,
  },
  onSortingChange: setSorting,
  onColumnFiltersChange: setColumnFilters,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
});

// Initial state example
const table = createTable({
  data,
  columns,
  initialState: {
    sorting: [{ id: 'firstName', desc: false }],
    columnVisibility: { age: false },
    pagination: { pageIndex: 0, pageSize: 10 },
  },
  getCoreRowModel: getCoreRowModel(),
});

Table Features

The table uses a plugin-based feature system. Each feature extends the core functionality.

interface TableFeature<TData extends RowData = any> {
  getDefaultColumnDef?: () => Partial<ColumnDef<TData, unknown>>;
  getInitialState?: (state?: InitialTableState) => Partial<InitialTableState>;
  getDefaultOptions?: <TData extends RowData>(
    table: Table<TData>
  ) => Partial<TableOptionsResolved<TData>>;
  createTable?: <TData extends RowData>(table: Table<TData>) => void;
  getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
}

Built-in features include: Headers, ColumnVisibility, ColumnOrdering, ColumnPinning, ColumnFaceting, ColumnFiltering, GlobalFaceting, GlobalFiltering, RowSorting, ColumnGrouping, RowExpanding, RowPagination, RowPinning, RowSelection, ColumnSizing.

Meta Information

Custom metadata that can be attached to the table instance and accessed throughout the API.

interface TableMeta<TData extends RowData> {
  /** Any custom data you want to associate with the table */
  [key: string]: any;
}

Usage Example:

const table = createTable({
  data,
  columns,
  meta: {
    updateData: (rowIndex: number, columnId: string, value: any) => {
      // Custom update logic
    },
    deleteRow: (rowIndex: number) => {
      // Custom delete logic
    },
  },
  getCoreRowModel: getCoreRowModel(),
});

// Access meta in column definitions or elsewhere
const meta = table.options.meta;

Install with Tessl CLI

npx tessl i tessl/npm-tanstack--table-core

docs

tessl/npm-tanstack--table-core