Interface: TableComponents<Data, Context>

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

Type Parameters

Data

Data = unknown

Context

Context = unknown

Properties

EmptyPlaceholder?

optional EmptyPlaceholder: ComponentType<ContextProp<Context>>

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

---

FillerRow?

optional FillerRow: ComponentType<FillerRowProps & ContextProp<Context>>

Set to render an empty item placeholder.

---

Scroller?

optional Scroller: ComponentType<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children" | "tabIndex"> & RefAttributes<HTMLDivElement> & object & ContextProp<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.

---

ScrollSeekPlaceholder?

optional ScrollSeekPlaceholder: ComponentType<ScrollSeekPlaceholderProps & ContextProp<Context>>

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

---

Table?

optional Table: ComponentType<TableProps & ContextProp<Context>>

Set to customize the wrapping table element.

---

TableBody?

optional TableBody: ComponentType<Pick<DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "style" | "children" | "className"> & RefAttributes<HTMLTableSectionElement> & object & ContextProp<Context>>

Set to customize the items wrapper. Default is tbody.

---

Group?

optional Group: ComponentType<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children"> & object & ContextProp<Context>>

Set to customize the group item wrapping element. Use only if you would like to render list from elements different than a tr.

---

TableFoot?

optional TableFoot: ComponentType<Pick<DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "style" | "children"> & RefAttributes<HTMLTableSectionElement> & ContextProp<Context>>

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

---

TableHead?

optional TableHead: ComponentType<Pick<DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "style" | "children"> & RefAttributes<HTMLTableSectionElement> & ContextProp<Context>>

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

---

TableRow?

optional TableRow: ComponentType<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children"> & object & ContextProp<Context>>

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