Table

type useReactTable = <TData extends AnyData>(
  options: TableOptions<TData>
) => Table<TData>

type useReactTable = <TData extends AnyData>(
  options: TableOptions<TData>
) => Table<TData>

API Options

data

data: TData[]

data: TData[]

The array data to be displayed in the table.

Note: Make sure to provide an inline [] to avoid re-rendering the table when the data changes.

columns

columns: ColumnDef < TData, TValue > []

columns: ColumnDef < TData, TValue > []

The array of columns to be displayed in the table. Here type TValue = unknown.

Note: Make sure to memoize this array with the useMemo hook.

defaultColumn

defaultColumn?: Partial<ColumnDef<TData, unknown>>

defaultColumn?: Partial<ColumnDef<TData, unknown>>

The optional default column definition.

initialState

initialState?: Partial<
  VisibilityTableState &
  ColumnOrderTableState &
  ColumnPinningTableState &
  FiltersTableState &
  SortingTableState &
  ExpandedTableState &
  GroupingTableState &
  ColumnSizingTableState &
  PaginationTableState &
  RowSelectionTableState
>

initialState?: Partial<
  VisibilityTableState &
  ColumnOrderTableState &
  ColumnPinningTableState &
  FiltersTableState &
  SortingTableState &
  ExpandedTableState &
  GroupingTableState &
  ColumnSizingTableState &
  PaginationTableState &
  RowSelectionTableState
>

Note: Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable.

state

state?: {
  sorting?: SortingState;
  columnFilters?: ColumnFiltersState;
  pagination?: PaginationState;
  columnVisibility?: VisibilityState;
  globalFilter?: string;
};

state?: {
  sorting?: SortingState;
  columnFilters?: ColumnFiltersState;
  pagination?: PaginationState;
  columnVisibility?: VisibilityState;
  globalFilter?: string;
};

The optional table state object if you want to control the state of the table. This state object will be merged with the internal state object. This state is used to implement pagination, sorting, filtering, etc.

setSorting

setSorting?: Dispatch<SetStateAction<SortingState>>

setSorting?: Dispatch<SetStateAction<SortingState>>

The optional sorting state setter is needed if you want to control the sorting state of the table. Server-side sorting can be implemented by providing a custom setter.

manualSorting

manualSorting?: boolean;

manualSorting?: boolean;

This allows you to set your own sorting logic and bypass the sorting logic of the table. This is useful if you want to implement server-side sorting.

setColumnFilters

setColumnFilters?: Dispatch<SetStateAction<ColumnFiltersState>>

setColumnFilters?: Dispatch<SetStateAction<ColumnFiltersState>>

The optional column filters state setter is needed if you want to control the column filters state of the table. Server-side filtering can be implemented by providing a custom setter.

manualFilters

manualFiltering?: boolean

manualFiltering?: boolean

This allows you to set your own filtering logic and bypass the filtering logic of the table. This is useful if you want to implement server-side filtering.

setPagination

setPagination?: Dispatch<SetStateAction<PaginationState>>

setPagination?: Dispatch<SetStateAction<PaginationState>>

The optional pagination state setter is needed if you want to control the pagination state of the table. Server-side pagination can be implemented by providing a custom setter.

manualPagination

manualPagination?: boolean

manualPagination?: boolean

This allows you to set your own pagination logic and bypass the pagination logic of the table. This is useful if you want to implement server-side pagination.

hidePaginationBar

hidePaginationBar?: boolean

hidePaginationBar?: boolean

This allows you to hide the pagination bar of the table.

setColumnVisibility

setColumnVisibility?: Dispatch<SetStateAction<VisibilityState>>

setColumnVisibility?: Dispatch<SetStateAction<VisibilityState>>

The optional column visibility state setter is needed if you want to control the column visibility state of the table.

setGlobalFilter

setGlobalFilter?: Dispatch<SetStateAction<string>>

setGlobalFilter?: Dispatch<SetStateAction<string>>

The optional global filter state setter is needed if you want to control the global filter state of the table.

disableColumnVisibility

disableColumnVisibility?: boolean

disableColumnVisibility?: boolean

This allows you to disable the column visibility.

disableGlobalFilter

disableGlobalFilter?: boolean

disableGlobalFilter?: boolean

This allows you to disable the global filter.

itemsCount

itemsCount?: number

itemsCount?: number

The optional items count is needed if you want to display the items count in the table.

showFooter

showFooter?: boolean

showFooter?: boolean

This allows you to show or hide the footer of the table.

renderers

renders={{
  headerCell: ({ children, props }) => (
    <th {...props} className="bg-muted-foreground">
            {children}
          </th>
        ),
      }}

renders={{
  headerCell: ({ children, props }) => (
    <th {...props} className="bg-muted-foreground">
            {children}
          </th>
        ),
      }}

Renderers can be used to customized your table. These are basically functions that return fully customizable JSX elements.

The following renderers are available:

• header - Renders the table body.
• headerRow - Renders the table header rows.
• hreaderCell - Renders the table header cells.
• filterInput - Renders the table column filter inputs.
• body - Renders the table body.
• bodyRow - Renders the table body rows.
• bodyCell - Renders the table body cells.
• footer - Renders the table footer.
• footerRow - Renders the table footer cells.
• footerCell - Renders the table footer rows.
• pagination - Renders the table pagination.
• paginationButton - Renders the table pagination button.
• tableTag - Renders the table tag.

These renderers will be discussed in more detail in the Renderers section.

Credits

• Table - TanStack Table v8 Docs