Askr documentation
Generated API snapshot

@askrjs/ui/virtual-table

Exports from the declarations published in @askrjs/ui. Signatures reflect the published artifact.

Exports

This entrypoint publishes 11 exports. Use the anchored symbol rows for direct links. Type-only exports are labeled separately from runtime values.

VirtualTabletype

VirtualTable: { <Row>(props: VirtualTableProps<Row>): JSX.Element; <Row>(props: VirtualTableAsChildProps<Row>): JSX.Element; }

Renders a part of `virtual-table`. Supports polymorphic rendering via `asChild`.

VirtualTableApitype

VirtualTableApi: {
  scrollToIndex: (index: number, alignment?: VirtualScrollAlignment) => void;
  scrollToTop: () => void;
  scrollToBottom: () => void;
  getState: () => VirtualTableState;
  getVisibleRange: () => VirtualRange;
  getRowCount: () => number;
  getScrollTop: () => number;
  isAtTop: () => boolean;
  isAtBottom: () => boolean;
  getSelectedRowKey: () => string | null;
  getSelectedRowIndex: () => number;
  selectRowByKey: (rowKey: string) => void;
  selectRowByIndex: (index: number) => void;
  clearSelection: () => void;
}

Virtual Table Api.

VirtualTableAsChildPropstype

VirtualTableAsChildProps: Omit<VirtualTableRootProps, 'children'> & {
  rows: readonly Row[];
  rowHeight: number;
  headerHeight: number;
  overscan?: VirtualOverscan;
  getKey: (row: Row, index: number) => string | number;
  columns: readonly VirtualTableColumn<Row>[];
  selectedRowKey?: string | null;
  defaultSelectedRowKey?: string | null;
  onSelectedRowKeyChange?: (next: string | null) => void;
  onRowClick?: (row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void;
  onScroll?: (event: Event) => void;
  viewport?: VirtualTableViewport;
  tableWidth?: VirtualTableWidth;
  apiRef?: Ref<VirtualTableApi<Row> | null>;
  ref?: Ref<HTMLElement>;
  asChild: true;
  children: JSXElement;
}

Props for the `asChild` (polymorphic) rendering of Virtual Table.

apiRef
apiRef?: Ref<VirtualTableApi<Row> | null>;
asChild
asChild: true;
children
children: JSXElement;
columns
columns: readonly VirtualTableColumn<Row>[];
defaultSelectedRowKey
defaultSelectedRowKey?: string | null | undefined;
getKey
getKey: (row: Row, index: number) => string | number;
headerHeight
headerHeight: number;
onRowClick
onRowClick?: ((row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void) | undefined;
onScroll
onScroll?: ((event: Event) => void) | undefined;
onSelectedRowKeyChange
onSelectedRowKeyChange?: ((next: string | null) => void) | undefined;
overscan
overscan?: VirtualOverscan | undefined;
ref
ref?: Ref<HTMLElement>;
rowHeight
rowHeight: number;
rows
rows: readonly Row[];
selectedRowKey
selectedRowKey?: string | null | undefined;
tableWidth
tableWidth?: "compact" | undefined;
viewport
viewport?: "lg" | undefined;

VirtualTableCellComponenttype

VirtualTableCellComponent: (props: VirtualTableCellComponentProps<Row>) => VirtualTableCellElement | null

Virtual Table Cell Component.

VirtualTableCellComponentPropstype

VirtualTableCellComponentProps: {
  row: Row;
  rowIndex: number;
  rowKey: string;
  column: VirtualTableColumn<Row>;
  selected: boolean;
}

Props for Virtual Table Cell Component.

column
column: VirtualTableColumn<Row>;
row
row: Row;
rowIndex
rowIndex: number;
rowKey
rowKey: string;
selected
selected: boolean;

VirtualTableColumntype

VirtualTableColumn: {
  id: string;
  header: JSXElement | string;
  width?: number | string;
  cellComponent: VirtualTableCellComponent<Row>;
}

Virtual Table Column.

VirtualTablePropstype

VirtualTableProps: VirtualTableRootProps & {
  rows: readonly Row[];
  rowHeight: number;
  headerHeight: number;
  overscan?: VirtualOverscan;
  getKey: (row: Row, index: number) => string | number;
  columns: readonly VirtualTableColumn<Row>[];
  selectedRowKey?: string | null;
  defaultSelectedRowKey?: string | null;
  onSelectedRowKeyChange?: (next: string | null) => void;
  onRowClick?: (row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void;
  onScroll?: (event: Event) => void;
  viewport?: VirtualTableViewport;
  tableWidth?: VirtualTableWidth;
  apiRef?: Ref<VirtualTableApi<Row> | null>;
  ref?: Ref<HTMLElement>;
  asChild?: false;
}

Props for Virtual Table.

apiRef
apiRef?: Ref<VirtualTableApi<Row> | null>;
asChild
asChild?: false | undefined;
columns
columns: readonly VirtualTableColumn<Row>[];
defaultSelectedRowKey
defaultSelectedRowKey?: string | null | undefined;
getKey
getKey: (row: Row, index: number) => string | number;
headerHeight
headerHeight: number;
onRowClick
onRowClick?: ((row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void) | undefined;
onScroll
onScroll?: ((event: Event) => void) | undefined;
onSelectedRowKeyChange
onSelectedRowKeyChange?: ((next: string | null) => void) | undefined;
overscan
overscan?: VirtualOverscan | undefined;
ref
ref?: Ref<HTMLElement>;
rowHeight
rowHeight: number;
rows
rows: readonly Row[];
selectedRowKey
selectedRowKey?: string | null | undefined;
tableWidth
tableWidth?: "compact" | undefined;
viewport
viewport?: "lg" | undefined;

VirtualTableStatetype

VirtualTableState: {
  count: number;
  rowHeight: number;
  headerHeight: number;
  scrollTop: number;
  viewportHeight: number;
  totalHeight: number;
  visibleRange: VirtualRange;
  isAtTop: boolean;
  isAtBottom: boolean;
  selectedRowKey: string | null;
  selectedRowIndex: number;
}

Virtual Table State.