Capítulo 48 de 54
@tanstack/react-table wraps the framework-agnostic core with React-idiomatic surfaces: useTable (the hook), createTableHook (the composable-tables factory), ReactTable/AppReactTable (the React-specific table type extensions), and Subscribe/FlexRender (the two components everything else in this skill's rendering chapters relies on).
useTable(options, selector?): the table-creation hook. Returns a React-facing Table value that re-renders on whatever selector selects (default selects all registered state — see Table State Guide). Requires columns, data, features.ReactTable<TFeatures, TData, TSelected>: the type of useTable's return value — Table<TFeatures, TData> extended with React-specific members (FlexRender, Subscribe, state as the selected-state slot) parameterized additionally by TSelected (the selector's return type).AppReactTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>: ReactTable further extended with the registered component maps from createTableHook (AppTable, AppCell, AppHeader, AppFooter, plus each registered tableComponents entry directly on the table) — the type of what useAppTable returns.createTableHook(options): builds an app-specific { useAppTable, createAppColumnHelper, useTableContext, useCellContext, useHeaderContext } set (see Composable Tables Guide). CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents> types its input (shared features/defaults + optional component registries).Subscribe: the standalone importable component (also attached as table.Subscribe) for scoping a re-render boundary to a specific state slice or atom — source (defaults to table.store) + selector, render-prop children receiving the selected value. See Table State Guide and React Compiler Guide for when this is required vs. optional.FlexRender: the component wrapper (also table.FlexRender) that resolves and renders a header/cell/footer's column-def renderer with full context, including cell-vs-aggregatedCell resolution and grouping-placeholder suppression. flexRender(defOrNode, context) is its lower-level function form. See FlexRender Guide for the full distinction.| Export | Role |
|---|---|
useTable | create a table instance (the hook) |
ReactTable | type of a plain useTable result |
createTableHook | build shared useAppTable/createAppColumnHelper/context hooks |
AppReactTable | type of a useAppTable result (with registered components) |
CreateTableHookOptions | input type for createTableHook |
Subscribe | standalone re-render-scoping component |
FlexRender / flexRender | component / function for rendering header-cell-footer definitions |
ReactTable vs AppReactTable is exactly the plain-useTable vs. createTableHook-based-useAppTable distinction, reflected in the type system.Subscribe and FlexRender are the two components most custom rendering code in a v9 React app touches directly, alongside useTable/useAppTable themselves.useTable's selector argument and Subscribe in depth.createTableHook/useAppTable in depth.FlexRender/flexRender in depth.