TanStack Table core sorting, filtering and pagination: working versions (tested 2026-10-15)

{
  "name": "tanstack-table-core-sorting",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "node --import tsx --test test/*.test.ts"
  },
  "dependencies": {
    "@tanstack/table-core": "8.21.3"
  },
  "devDependencies": {
    "@types/node": "26.6.5",
    "tsx": "4.23.15"
  }
}

import {
  createTable,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  type ColumnDef,
  type SortingState,
  type ColumnFiltersState,
  type PaginationState,
} from "@tanstack/table-core";

export type Person = { id: number; name: string; role: string; score: number };

export const columns: ColumnDef<Person>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "role", header: "Role" },
  { accessorKey: "score", header: "Score" },
];

export function buildTable(opts: {
  data: Person[];
  sorting?: SortingState;
  filters?: ColumnFiltersState;
  pagination?: PaginationState;
}) {
  return createTable({
    data: opts.data,
    columns,
    state: {
      sorting: opts.sorting ?? [],
      columnFilters: opts.filters ?? [],
      pagination: opts.pagination ?? { pageIndex: 0, pageSize: 2 },
    },
    onStateChange: () => {},
    renderFallbackValue: null,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });
}

export function pageNames(table: ReturnType<typeof buildTable>) {
  return table.getRowModel().rows.map((r) => r.original.name);
}

import { test } from "node:test";
import assert from "node:assert/strict";
import { buildTable, pageNames, type Person } from "../src/people.ts";

const data: Person[] = [
  { id: 1, name: "Ada", role: "admin", score: 90 },
  { id: 2, name: "Bob", role: "member", score: 70 },
  { id: 3, name: "Cy", role: "admin", score: 95 },
  { id: 4, name: "Dee", role: "guest", score: 40 },
];

test("sorts by score descending", () => {
  const t = buildTable({ data, sorting: [{ id: "score", desc: true }], pagination: { pageIndex: 0, pageSize: 10 } });
  assert.deepEqual(pageNames(t), ["Cy", "Ada", "Bob", "Dee"]);
});

test("filters by role then paginates", () => {
  const t = buildTable({
    data,
    filters: [{ id: "role", value: "admin" }],
    pagination: { pageIndex: 0, pageSize: 1 },
  });
  assert.equal(t.getFilteredRowModel().rows.length, 2);
  assert.deepEqual(pageNames(t), ["Ada"]);
  const page2 = buildTable({
    data,
    filters: [{ id: "role", value: "admin" }],
    pagination: { pageIndex: 1, pageSize: 1 },
  });
  assert.deepEqual(pageNames(page2), ["Cy"]);
});