Type Alias: AppReactTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>

type AppReactTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents> = ReactTable<TFeatures, TData, TSelected> & NoInfer<TTableComponents> & object;

Defined in: react-table/src/createTableHook.tsx:532

Extended table API returned by useAppTable with all App wrapper components

Type Declaration

AppCell

AppCell: AppCellComponent<TFeatures, TData, NoInfer<TCellComponents>>;

Wraps a cell and provides cell context with pre-bound cellComponents. Optionally accepts a selector for Subscribe functionality.

Example

tsx

// Without selector
<table.AppCell cell={cell}>
  {(c) => <td><c.TextCell /></td>}
</table.AppCell>

// With selector - children receives cell and selected state
<table.AppCell cell={cell} selector={(s) => s.columnFilters}>
  {(c, filters) => <td>{filters.length}</td>}
</table.AppCell>

AppFooter

AppFooter: AppHeaderComponent<TFeatures, TData, NoInfer<THeaderComponents>>;

Wraps a footer and provides header context with pre-bound headerComponents. Optionally accepts a selector for Subscribe functionality.

Example

tsx

<table.AppFooter header={footer}>
  {(f) => <td><table.FlexRender footer={footer} /></td>}
</table.AppFooter>

AppHeader

AppHeader: AppHeaderComponent<TFeatures, TData, NoInfer<THeaderComponents>>;

Wraps a header and provides header context with pre-bound headerComponents. Optionally accepts a selector for Subscribe functionality.

Example

tsx

// Without selector
<table.AppHeader header={header}>
  {(h) => <th><h.SortIndicator /></th>}
</table.AppHeader>

// With selector
<table.AppHeader header={header} selector={(s) => s.sorting}>
  {(h, sorting) => <th>{sorting.length} sorted</th>}
</table.AppHeader>

AppTable

AppTable: AppTableComponent<TFeatures>;

Root wrapper component that provides table context with optional Subscribe.

Example

tsx

// Without selector - children is ReactNode
<table.AppTable>
  <table>...</table>
</table.AppTable>

// With selector - children receives selected state
<table.AppTable selector={(s) => s.pagination}>
  {(pagination) => <div>Page {pagination.pageIndex}</div>}
</table.AppTable>