Table

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.

Table API

Table component

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

  children?: any;

  className?: string;

  /**
   * 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;

  ref?: Ref<HTMLDivElement>;

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

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

  style?: CSSProperties;
}

TableBody API

TableBody component

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

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

TableCell API

TableCell component

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

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

TableCellLayout API

TableCellLayout component

interface TableCellLayoutProps {
  /**
   * Renders design variants of the table cell
   * @default undefined
   */
  appearance?: "primary";

  as?: "div";

  children?: any;

  className?: string;

  /**
   * A layout wrapper for the main and description slots
   */
  content?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Secondary text that describes or complements the main text
   */
  description?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Main text for the table cell. Children of the root slot are automatically rendered here
   */
  main?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Slot for an icon or other visual element
   */
  media?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;

  /**
   * Renders content with overflow: hidden and text-overflow: ellipsis
   */
  truncate?: boolean;
}

TableHeader API

TableHeader component

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

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

TableHeaderCell API

TableHeaderCell component

interface TableHeaderCellProps {
  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;

  ref?: Ref<HTMLDivElement>;

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

  /**
   * @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;
}

TableRow API

TableRow component

interface TableRowProps {
  /**
   * 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?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

TableSelectionCell API

TableSelectionCell component

interface TableSelectionCellProps {
  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";
}