Type Alias DataTableProps<T, S>

Type Declaration

• OptionalactiveKey?: string

  The row a detail panel is showing: highlighted and aria-current.

• OptionalannounceEmpty?: boolean

  False when the page announces the empty result itself, so it is said once.

• Optionalcard?: (row: T) => ReactNode

  A card layout below md, sharing the empty state and the footer.

• columns: readonly DataTableColumn<T, S>[]

• Optionaldensity?: "compact" | "comfortable"

• empty: ReactNode

  Shown in a status row when there are no rows.

• OptionalgroupBy?: (row: T) => { key: string; label: ReactNode }

  A heading row wherever the key changes from the row before.

• label: string

  The table's accessible name.

• Optionalpagination?: {
      hasNext: boolean;
      hrefFor: (page: number) => string | undefined;
      page: number;
      pageSize: number;
      total?: number;
  }

  • hasNext: boolean

  • hrefFor: (page: number) => string | undefined

    undefined leaves that page unlinked.

  • page: number

  • pageSize: number

  • Optionaltotal?: number

    Adds "of total" to the "start–end" range; omit when the total is unknown.

• OptionalrowClassName?: (row: T) => string | undefined

• rows: readonly KeyedRow<T>[]

• Optionalscrollable?: boolean

  Makes the scroll container a focusable region, for tables wider than the viewport.

• Optionalselection?: {
      actions?: ReactNode;
      allLabel?: string;
      rowLabel: (row: T) => string;
      selectable?: (row: T) => boolean;
      total?: number;
  }

  A checkbox column and a selection bar holding actions. Row items cross to the client provider, so they must be serializable.

  • Optionalactions?: ReactNode

  • OptionalallLabel?: string

    The select-all checkbox's label.

  • rowLabel: (row: T) => string

  • Optionalselectable?: (row: T) => boolean

    Rows it returns false for show a disabled checkbox and are left out of select-all.

  • Optionaltotal?: number

    What "select all" covers; defaults to pagination.total, else the rows shown.

• Optionalsort?: { hrefFor: (next: S) => string; value: S }

• Optionaltoolbar?: ReactNode

  Rendered above the table, inside the selection provider, so it can read the selection.

• {
      expand?: { content: (row: T) => ReactNode; label: (row: T) => string };
      rowWrapper?: never;
  }

  • Optionalexpand?: { content: (row: T) => ReactNode; label: (row: T) => string }

    A disclosure per row revealing content beneath it.

  • OptionalrowWrapper?: never

• {
      expand?: never;
      rowWrapper: (
          row: T,
          props: { children: ReactNode; className: string },
      ) => ReactNode;
  }

  • Optionalexpand?: never

  • rowWrapper: (row: T, props: { children: ReactNode; className: string }) => ReactNode

    Renders each row's tr around its cells, for a row that marks itself (e.g. the one whose panel is open). Must render a TableRow with className.