Data grid

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

DataGrid API

interface DataGridProps {
  as?: "div" | "table";

  children?: any;

  className?: string;

  /**
   * CSS-only per-column flexbox overrides, keyed by `columnId` (same convention as
   * `columnSizingOptions`). Automatically picked up by this package's `DataGridHeaderCell`
   * and `DataGridCell` wrappers — no need to read `columnId` off the render prop yourself.
   *
   * Intended for static/non-resizable layouts. Not supported in combination with
   * `resizableColumns` — that takes precedence when both are set.
   */
  columnFlexOptions?: DataGridColumnFlexOptions;

  /**
   * Table columns
   */
  columns: TableColumnDefinition<any>[];

  /**
   * Options for column resizing, specific for each column
   */
  columnSizingOptions?: TableColumnSizingOptions;

  /**
   * For column resizing. Allows for a container size to be adjusted by a number of pixels, to make
   * sure the columns don't overflow the table.
   * By default, this value is calculated internally based on other props, but can be overriden.
   */
  containerWidthOffset?: number;

  /**
   * Used in uncontrolled mode to set initial selected items on mount
   */
  defaultSelectedItems?: Iterable<SelectionItemId>;

  /**
   * Used in uncontrolled mode to set initial sort column and direction on mount
   */
  defaultSortState?: SortState;

  /**
   * How focus navigation will work in the datagrid
   * @default cell
   */
  focusMode?: "none" | "cell" | "row_unstable" | "composite";

  getRowId?: ((item: any) => TableRowId);

  items: any[];

  /**
   * Render all table elements as divs instead of semantic table elements
   * Using divs no longer uses `display: table` layout but `display: flex`
   * @default false
   */
  noNativeElements?: boolean;

  /**
   * A callback triggered when a column is resized.
   */
  onColumnResize?: ((e: MouseEvent | TouchEvent | KeyboardEvent, data: { columnId: TableColumnId; width: number; }) => void);

  onSelectionChange?: ((e: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>, data: OnSelectionChangeData) => void);

  onSortChange?: ((e: MouseEvent<Element, MouseEvent>, sortState: SortState) => void);

  ref?: Ref<HTMLDivElement>;

  /**
   * Enables column resizing
   */
  resizableColumns?: boolean;

  /**
   * Custom options for column resizing.
   */
  resizableColumnsOptions?: { autoFitColumns?: boolean; };

  /**
   * Used to control selected items
   */
  selectedItems?: Iterable<SelectionItemId>;

  /**
   * Row appearance when selected
   * @default brand
   */
  selectionAppearance?: "none" | "brand" | "neutral";

  /**
   * Enables row selection and sets the selection mode
   * @default false
   */
  selectionMode?: "multiselect" | "single";

  /**
   * Affects the sizes of all table subcomponents
   * @default medium
   */
  size?: "small" | "medium" | "extra-small";

  /**
   * Whether the table is sortable
   * @default false
   */
  sortable?: boolean;

  /**
   * Used to control sorting
   */
  sortState?: SortState;

  style?: CSSProperties;

  /**
   * Enables subtle selection style
   * @default false
   */
  subtleSelection?: boolean;
}

DataGridBody API

DataGridBody component

interface DataGridBodyProps {
  as?: "div" | "tbody";

  /**
   * Render function for rows
   */
  children: RowRenderFunction<unknown>;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

DataGridCell API

interface DataGridCellProps {
  as?: "div" | "td";

  children?: any;

  className?: string;

  /**
   * Used when there are nested focusble elements inside a focusable cell
   * - `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress
   * - `cell`: The cell is focusable - if there are focusable elements in the cell use `group`
   * - `none`: The cell is not focusable
   * @default cell
   */
  focusMode?: "none" | "cell" | "group";

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

DataGridHeader API

DataGridHeader component

interface DataGridHeaderProps {
  as?: "div" | "thead";

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

DataGridHeaderCell API

interface DataGridHeaderCellProps {
  as?: "div" | "th";

  /**
   * aside content for anything that should be after main content of the table header cell
   */
  aside?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Button handles correct narration and interactions for sorting;
   */
  button?: NonNullable<WithSlotShorthandValue<ARIAButtonSlotProps> | null>;

  children?: any;

  className?: string;

  /**
   * Used when there are nested focusble elements inside a focusable cell
   * - `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress
   * - `cell`: The cell is focusable - if there are focusable elements in the cell use `group`
   * - `none`: The cell is not focusable
   * @default cell
   */
  focusMode?: "none" | "cell" | "group";

  ref?: Ref<HTMLDivElement>;

  /**
   * @default undefined
   */
  sortDirection?: "ascending" | "descending";

  sortIcon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  style?: CSSProperties;
}

DataGridRow API

DataGridRow component

interface DataGridRowProps {
  /**
   * A table row can have different variants. These appearances are
   * intended to be used with selection.
   * @default none
   */
  appearance?: "none" | "brand" | "neutral";

  as?: "div" | "tr";

  children: CellRenderFunction<unknown>;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  /**
   * When selection is enabled on the
   */
  selectionCell?: WithSlotShorthandValue<TableSelectionCellProps & RefAttributes<HTMLDivElement>> | null;

  style?: CSSProperties;
}

DataGridSelectionCell API

DataGridSelectionCell component

interface DataGridSelectionCellProps {
  as?: "div" | "td";

  /**
   * Selection indicator if selection type is checkbox
   */
  checkboxIndicator?: (Omit<ComponentProps<Partial<CheckboxSlots>, "input">, "defaultChecked" | "onChange" | "size" | "checked"> & { checked?: boolean | "mixed"; children?: undefined; defaultChecked?: boolean | "mixed"; labelPosition?: "before" | "after" | undefined; onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void) | undefined; shape?: "circular" | "square" | undefined; size?: "medium" | "large" | undefined; } & RefAttributes<HTMLInputElement>) | null | undefined;

  /**
   * @default false
   */
  checked?: boolean | "mixed";

  children?: any;

  className?: string;

  /**
   * Completely hides the selection cell
   * @deprecated cells should never use hidden, since doing so breaks table structure and screen reader navigation. Use `invisible` instead.
   */
  hidden?: boolean;

  /**
   * Hides the selection cell visually but takes up the same space
   * @default false
   */
  invisible?: boolean;

  /**
   * Selection indicator if selection type is radio
   */
  radioIndicator?: (Omit<ComponentProps<Partial<RadioSlots>, "input">, "onChange" | "size"> & { value?: string; labelPosition?: "below" | "after"; disabled?: boolean | undefined; onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void) | undefined; } & RefAttributes<HTMLInputElement>) | null | undefined;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;

  /**
   * Only visible when checked or the parent row is hovered/focused
   * @default false
   */
  subtle?: boolean;

  /**
   * A table can have two kinds of selection modes.
   * @default checkbox
   */
  type?: "checkbox" | "radio";
}