@cogs/react-table

Opinionated extensions around TanStack React Table that add production-ready hooks, helpers, and tooling for building data grids. Ship consistent tables with ergonomic state management, hierarchical selection utilities, and CSV export support.

Features

• Drop-in useRefReactTable (module opts out of the React Compiler via use no memo) that keeps a stable table instance across renders.
• useTableState subscription helper for concurrent-safe React state selection without prop drilling.
• Hierarchical selection helpers (getAllSelectedRows, getAllSelectedPodzillaRows, diffRowIds) for tree/table blends and group awareness.
• Browser-friendly CSV export via exportTableToCSV, including selective column filtering and selection-only exports.
• Column metadata augmentation (ColumnMeta.name, ColumnMeta.hidden, ColumnMeta.ignore) for richer table configuration.
• Re-exports of @tanstack/react-table, @tanstack/match-sorter-utils, and @tanstack/react-table-devtools so consumers depend on a single seam.

Technology Stack

• TypeScript-powered React 19 library targeting modern browsers.
• TanStack React Table 8.x and Match Sorter utilities for column filtering/sorting.
• tsc for ESM + declaration output.
• Vitest with jsdom for unit testing.

Installation

pnpm add @cogs/react-table

Usage

JavaScript

import React from "react"
import {
  createColumnHelper,
  getCoreRowModel,
  useRefReactTable,
  useTableState,
} from "@cogs/react-table"

const columnHelper = createColumnHelper()

const columns = [
  columnHelper.accessor("name", { header: "Name" }),
  columnHelper.accessor("status", { header: "Status" }),
]

export function ExampleTable({ data }) {
  const table = useRefReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  const sorting = useTableState(table, (state) => state.sorting)

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>{header.column.columnDef.header}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>{cell.renderValue()}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

TypeScript

import type { Table } from "@cogs/react-table"
import { exportTableToCSV, getAllSelectedRows } from "@cogs/react-table"

type CampaignRow = {
  id: string
  name: string
  status: "draft" | "active" | "paused"
}

export function downloadSelectedCampaigns(table: Table<CampaignRow>) {
  const selected = getAllSelectedRows(table, (row) => row.original.status === "active")

  console.info("Active selections", selected.map((row) => row.original))

  exportTableToCSV(table, {
    filename: "active-campaigns",
    excludeColumns: ["select", "actions"],
    onlySelected: true,
  })
}

Development

pnpm --filter @cogs/react-table typecheck
pnpm --filter @cogs/react-table test
pnpm --filter @cogs/react-table build

• Prefer useRefReactTable when table instances should persist across renders.
• When contributing, keep hooks pure, add Vitest coverage for new helpers, and update the feature list if you add capabilities.