Skip to main content

Interface: TableComponents<Data, Context>

Customize the TableVirtuoso rendering by passing a set of custom components.

Type parameters

NameType
Dataunknown
Contextunknown

Properties

EmptyPlaceholder

Optional EmptyPlaceholder: ComponentType<{ context?: Context }>

Set to render a custom UI when the list is empty.

Defined in

dist/index.d.ts:503


FillerRow

Optional FillerRow: ComponentType<FillerRowProps & { context?: Context }>

Set to render an empty item placeholder.

Defined in

dist/index.d.ts:515


ScrollSeekPlaceholder

Optional ScrollSeekPlaceholder: ComponentType<ScrollSeekPlaceholderProps & { context?: Context }>

Set to render an item placeholder when the user scrolls fast. See the scrollSeek property for more details.

Defined in

dist/index.d.ts:509


Scroller

Optional Scroller: ComponentType<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {}, "ref" | "style" | "tabIndex" | "children"> & { data-test-id?: string ; data-virtuoso-scroller?: boolean } & { context?: Context }>

Set to customize the outermost scrollable element. This should not be necessary in general, as the component passes its HTML attribute props to it.

Defined in

dist/index.d.ts:491


Table

Optional Table: ComponentType<TableProps & { context?: Context }>

Set to customize the wrapping table element.

Defined in

dist/index.d.ts:465


TableBody

Optional TableBody: ComponentType<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {}, "ref" | "style" | "className" | "children"> & { data-test-id: string } & { context?: Context }>

Set to customize the items wrapper. Default is tbody.

Defined in

dist/index.d.ts:497


TableFoot

Optional TableFoot: ComponentType<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {}, "ref" | "style" | "children"> & { context?: Context }>

Set to render a fixed footer at the bottom of the table (tfoot). use [[fixedFooterContent]] to set the contents

Defined in

dist/index.d.ts:478


TableHead

Optional TableHead: ComponentType<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {}, "ref" | "style" | "children"> & { context?: Context }>

Set to render a fixed header at the top of the table (thead). use [[fixedHeaderContent]] to set the contents

Defined in

dist/index.d.ts:472


TableRow

Optional TableRow: ComponentType<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {}, "style" | "children"> & { data-index: number ; data-item-group-index?: number ; data-item-index: number ; data-known-size: number ; item: Data } & { context?: Context }>

Set to customize the item wrapping element. Default is tr.

Defined in

dist/index.d.ts:484