Props

This page describes what every DataTable prop is for, alongside the TypeScript type definitions used across the DataTable documentation (source of truth: packages/table/src/DataTable/_props.ts).

`TableProps<T>`

The top-level props accepted by DataTable.

Name	Type	Description
`data`	`T[]`	Rows to display.
`loading`	`boolean`	Shows the table loading UI.
`title`	`string`	Table title shown in the header. Later it will also be used to fetch table config from local storage (when implemented).
`headers`	`THeader<T>`	Column definitions (label -> how to read/render each cell).
`keyExtractor`	`(row: T) => string \| number`	Stable key for each row.
`pagination`	`TablePagination`	Enables pagination — see Pagination.
`actions`	`TActions<T>`	Row actions, remote fetching, and search — see Actions and Search.
`isStatic`	`boolean`	Marks the table as “static” (no remote actions). Useful when you only use local data + local search/sort/filter.
`options`	`TOptions<T>`	Extra row actions, bulk actions, views, and select filters — see Actions and Views.
`config`	`TConfig`	Behavior and element-prop customization — see Config.


export type TableProps<T> = {
  data: T[];
  loading: boolean;
  title: string;
  headers: THeader<T>;
  keyExtractor?: (row: T) => string | number;
  pagination?: TablePagination;
  actions?: TActions<T>;
  isStatic?: boolean;
  options?: TOptions<T>;
  config?: TConfig;
};

`THeader<T>`

headers is a map from column label to a THeaderValue<T> definition of how to read or render that column’s cells.


export type THeader<T> = Record<string, THeaderValue<T>>;

`THeaderValue<T>`

Name	Type	Description
`value`	`string`	A key on your row object to read the cell value from. Mutually exclusive with `exec`.
`exec`	`(row: T) => string \| ReactNode`	Compute the cell content instead of reading `value`. Mutually exclusive with `value`.
`visible`	`boolean`	Whether the column is currently shown. Controlled by the column show/hide (“S/H”) menu.
`canSee`	`boolean`	Whether the column can be toggled at all in the “S/H” menu.
`alwaysVisible`	`boolean`	Keeps the column visible regardless of the “S/H” menu state.


export type THeaderValue<T> = {
  value?: string | never;
  exec?: never | ((row: T) => string | ReactNode);
  visible?: boolean;
  canSee?: boolean;
  alwaysVisible?: boolean;
} & (
  | {
      value: string;
      exec?: never;
    }
  | {
      value?: never;
      exec: (row: T) => string | ReactNode;
    }
);

`TablePagination`

Name	Type	Description
`total`	`number`	Total number of rows (used for page count and the “Showing X to Y” message).
`page`	`number`	Initial page (1-indexed).
`limit`	`number`	Initial rows per page.
`type`	`"static" \| "dynamic"`	`static` slices `data` client-side. `dynamic` expects you to fetch and update `data` yourself, driven by `actions.get`.


type TablePagination = {
  total: number;
  page: number;
  limit: number;
  type?: "static" | "dynamic";
};

`TActions<T>`

Name	Type	Description
`get`	`(params: TParams) => void`	Fetch table data remotely. Called with `{ page, limit, search }` when pagination/search changes (when configured).
`edit`	`{ onEdit(row); canEdit?; title?; buttonProps? }`	Adds an edit action for each row (button + context menu). `afterEdit` exists in the type but isn’t implemented yet.
`delete`	`{ onDelete(row); canDelete?; title?; buttonProps? }`	Adds a delete action for each row (button + context menu). `afterDelete` exists in the type but isn’t implemented yet.
`search`	`TSearch<T>`	Configures search behavior — see Search.


export type TActions<T> = {
  get?: (params: TParams) => void;
  edit?: {
    canEdit?: CanPerformAction<T>;
    onEdit: (row: T) => void;
    title?: string | ReactNode;
    buttonProps?: ButtonProps;
    afterEdit?: TAfterAction; // Not implemented yet
  };
  delete?: {
    canDelete?: CanPerformAction<T>;
    onDelete: (row: T) => void;
    title?: string | ReactNode;
    buttonProps?: ButtonProps;
    afterDelete?: TAfterAction; // Not implemented yet
  };
  search?: TSearch<T>;
};

`TSearch<T>`

Name	Type	Description
`static`	`boolean`	When `true`, filtering happens on the client via `onSearch(row, { query, reg }) => boolean`. When `false`/omitted, `onSearch(params) => void` is called like `actions.get`.
`onSearch`	depends on `static`	The search callback. Its signature switches based on `static` (see above).
`searchOnType`	`boolean`	If `true`, triggers search while typing (debounced). If `false`, the user must press Enter or click the search button.
`searchTimer`	`number`	Debounce duration in ms when `searchOnType: true`.


type TSearch<T> = {
  searchOnType?: boolean;
  searchTimer?: number;
  static?: boolean;
} & (
  | { searchOnType?: false; searchTimer?: never }
  | { searchOnType?: true; searchTimer?: number }
) &
  (
    | {
        static: true;
        onSearch?: (row: T, props: { query: string; reg: RegExp }) => boolean;
      }
    | {
        static?: false | undefined;
        onSearch?: (params: TParams) => void;
      }
  );

`TOptions<T>`

Name	Type	Description
`extraActions`	`ExtraActions<T>[]`	Additional per-row actions beyond edit/delete.
`emptyTable`	`ReactNode`	Content rendered when there’s no data.
`cards`	`{ card(props); cardsContainerProps?; menuProps?; loadingIndicator? }`	Enables the built-in card view. `card` receives `{ row, visibleHeaders }` — see Views.
`viewComp`	`{ Component(row); type?: "modal" \| "extends"; ...modal/expand options }`	Adds a dedicated “view” action that expands the row or opens a modal — see Actions.
`bulkActions`	`TBulkActions<T>[]`	Enables row selection and bulk actions on the selection.
`extraviews`	`Record<string,` `TExtraView<T>>`	Adds custom views beyond table/card, keyed by name — see Views.
`selectFilter`	`Record<string, (row: T, clearAll?) => boolean>`	Adds a “select by filter” menu next to the header checkbox (requires `bulkActions`) — see Actions.


export type TOptions<T> = Partial<{
  extraActions: Array<ExtraActions<T>>;
  emptyTable: ReactNode;
  cards: {
    card: (props: { row: T; visibleHeaders: string[] }) => JSX.Element;
    cardsContainerProps?: ComponentPropsWithoutRef<"div">;
    menuProps?: Omit<MenuItemProps, "onClick" | "closeMenuOnClick">;
    loadingIndicator?: LoadingIndicator;
  };
  viewComp: {
    Component: (row: T) => ReactNode;
    type?: "modal" | "extends";
    modalOptions?: Omit<ModalProps, "opened" | "onClose" | "modalTrigger">;
    openModalIcon?: ReactNode;
    extendRowIcon?: ReactNode;
    minimizeRowIcon?: ReactNode;
    openButtonProps?: Omit<ButtonProps, "onClick">;
    canView?: CanPerformAction<T>;
  } & (
    | {
        type: "modal";
        modalOptions?: Partial<ModalProps>;
      }
    | {
        type?: "extends";
        modalOptions?: never;
      }
  );
  bulkActions: TBulkActions<T>[];
  extraviews: Record<string, TExtraView<T>>;
  selectFilter: Record<string, (row: T, clearAll?: VoidFunction) => boolean>;
}>;

`ExtraActions<T>`

Name	Type	Description
`title`	`string \| ReactNode`	Label shown for the action.
`onClick`	`(row: T) => void`	Called when the action is triggered.
`Icon`	`ReactNode`	Optional icon shown next to the label.
`allowed`	`CanPerformAction<T>`	Whether the action is available for a given row.


type ExtraActions<T> = {
  title: string | ReactNode;
  onClick: (row: T) => void;
  Icon?: ReactNode;
  allowed?: CanPerformAction<T>;
};

`TBulkActions<T>`

Name	Type	Description
`title`	`string`	Label shown for the bulk action.
`onClick`	`(rows: T[], clearSelected: VoidFunction) => void \| Promise<unknown>`	Called with the selected rows; call `clearSelected()` to reset the selection afterward.
`valueExtractor`	`(rows: T[]) => unknown`	Computes an aggregate value from the selected rows (for example, a sum to display).
`buttonProps`	`Omit<ButtonProps, "onClick">`	Props forwarded to the action’s button.
`canPerformAction`	`boolean`	Whether the bulk action is currently enabled.


type TBulkActions<T> = {
  title: string;
  onClick: (rows: T[], clearSelected: VoidFunction) => void | Promise<unknown>;
  valueExtractor?: (rows: T[]) => unknown;
  buttonProps?: Omit<ButtonProps, "onClick">;
  canPerformAction?: boolean;
};

`TExtraView<T>`

Name	Type	Description
`View`	`FC<{ data: T[]; visibleHeaders: string[] }>`	The component rendered for this view.
`canView`	`boolean`	Whether this view is available.
`menuProps`	`Omit<MenuItemProps, "onClick" \| "closeMenuOnClick">`	Props for the menu item used to switch to this view.
`loadingIndicator`	`LoadingIndicator`	Overrides the loading UI for this view.


type TExtraView<T> = {
  View: FC<{ data: T[]; visibleHeaders: string[] }>;
  canView?: boolean;
  menuProps?: Omit<MenuItemProps, "onClick" | "closeMenuOnClick">;
  loadingIndicator?: LoadingIndicator;
};

`TConfig`

Name	Type	Description
`toggleRows`	`boolean`	Enables the column show/hide menu button (“S/H”).
`disableContextMenu`	`boolean`	Disables the row right-click context menu.
`noHead`	`boolean`	Hides the entire table head section (search, refresh, view switcher, etc.).
`emptyRowIcon`	`ReactNode`	Placeholder shown when a row has no actions.
`useGetAsRefresh`	`boolean`	When enabled, the refresh button triggers `actions.get`.
`loadingIndicator`	`LoadingIndicator`	Overrides the loading UI for card/extra views.
`icons`	`{ toggleRows?; selectRow?; extraViewsTogle?; tableExtraView?; cardExtraView?; refresh?; selectOpened?; selectClosed?; paginationNext?; paginationPrev?; paginationDots? }`	Overrides the icons used by DataTable UI elements — see Config for what each key controls.
`props`	`{ table?; thead?; tbody?; tr?; th?; td? }`	Props forwarded directly to the underlying table elements.


export type TConfig = {
  toggleRows?: boolean;
  disableContextMenu?: boolean;
  noHead?: boolean;
  emptyRowIcon?: ReactNode;
  useGetAsRefresh?: boolean;
  loadingIndicator?: LoadingIndicator;
  icons?: {
    toggleRows?: ReactNode;
    selectRow?: ReactNode;
    extraViewsTogle?: ReactNode;
    tableExtraView?: ReactNode;
    cardExtraView?: ReactNode;
    refresh?: ReactNode;
    selectOpened?: ReactNode;
    selectClosed?: ReactNode;
    paginationNext?: ReactNode;
    paginationPrev?: ReactNode;
    paginationDots?: ReactNode;
  };
  props?: {
    table?: ComponentPropsWithoutRef<"table">;
    tbody?: ComponentPropsWithoutRef<"tbody">;
    thead?: ComponentPropsWithoutRef<"thead">;
    td?: ComponentPropsWithoutRef<"td">;
    th?: ComponentPropsWithoutRef<"th">;
    tr?: ComponentPropsWithoutRef<"tr">;
  };
};

Supporting types

`TParams`

The params object passed to actions.get and non-static actions.search.onSearch.


export type TParams = Record<string, number | string | undefined>;

`CanPerformAction<T>`

Either a plain boolean, or a function evaluated per-row, used to conditionally enable/disable an action (canEdit, canDelete, allowed, canView, etc.).


export type CanPerformAction<T> = ((row: T) => boolean) | boolean;

`LoadingIndicator`

Renders custom loading content for card/extra views, given the currently visible headers.


type LoadingIndicator = (props: { visibleHeaders: string[] }) => ReactNode;

`TAfterAction`

Reserved for a future post-edit/post-delete callback. Present in the types but not implemented yet.


type TAfterAction = (props: TParams) => unknown;

`PropsContextType`

The type used by TablePropsProvider. It’s a partial of props/actions/config that the provider can set as defaults for all DataTable instances below it.