# @askrjs/ui/virtual-table

> Published API exports for @askrjs/ui/virtual-table.

Source: [https://askrjs.com/docs/reference/api/ui/virtual-table](https://askrjs.com/docs/reference/api/ui/virtual-table)

Status: stable. Packages: @askrjs/ui/virtual-table.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 11 exports from the declarations shipped by @askrjs/ui.

### `VirtualTable`

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

Renders a part of `virtual-table`.

Supports polymorphic rendering via `asChild`.

### `VirtualTableApi`

```ts
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.

### `VirtualTableAsChildProps`

```ts
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;

### `VirtualTableCellComponent`

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

Virtual Table Cell Component.

### `VirtualTableCellComponentProps`

```ts
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;

### `VirtualTableCellElement`

```ts
VirtualTableCellElement: JSXElement | JSX.Element
```

Virtual Table Cell Element.

### `VirtualTableColumn`

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

Virtual Table Column.

### `VirtualTableProps`

```ts
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;

### `VirtualTableState`

```ts
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.

### `VirtualTableViewport`

```ts
VirtualTableViewport: 'lg'
```

Virtual Table Viewport.

### `VirtualTableWidth`

```ts
VirtualTableWidth: 'compact'
```

Virtual Table Width.

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/virtual-list/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/textarea/index.md)