Table

A responsive data table component.

Usage

The Table component is built on top of TanStack Table and is powered by the useVueTable composable to provide a flexible and fully type-safe API. Some features of TanStack Table are not supported yet, we'll add more over time.

#	Date	Status		Amount
#4600	Mar 11, 15:30	paid	james.anderson@example.com	€594.00
#4599	Mar 11, 10:10	failed	mia.white@example.com	€276.00
#4598	Mar 11, 08:50	refunded	william.brown@example.com	€315.00
#4597	Mar 10, 19:45	paid	emma.davis@example.com	€529.00
#4596	Mar 10, 15:55	paid	ethan.harris@example.com	€639.00
#4595	Mar 10, 13:40	refunded	ava.thomas@example.com	€428.00
#4594	Mar 10, 09:15	paid	michael.wilson@example.com	€683.00
#4593	Mar 9, 20:25	failed	olivia.taylor@example.com	€947.00
#4592	Mar 9, 18:45	paid	benjamin.jackson@example.com	€851.00
#4591	Mar 9, 16:05	paid	sophia.miller@example.com	€762.00
#4590	Mar 9, 14:20	paid	noah.clark@example.com	€573.00
#4589	Mar 9, 11:35	failed	isabella.lee@example.com	€389.00
#4588	Mar 8, 22:50	refunded	liam.walker@example.com	€701.00
#4587	Mar 8, 20:15	paid	charlotte.hall@example.com	€856.00
#4586	Mar 8, 17:40	paid	mason.young@example.com	€492.00
#4585	Mar 8, 14:55	failed	amelia.king@example.com	€637.00
#4584	Mar 8, 12:30	paid	elijah.wright@example.com	€784.00
#4583	Mar 8, 09:45	refunded	harper.scott@example.com	€345.00
#4582	Mar 7, 23:10	paid	evelyn.green@example.com	€918.00
#4581	Mar 7, 20:25	paid	logan.baker@example.com	€567.00

0 of 0 row(s) selected.

This example demonstrates the most common use case of the Table component. Check out the source code on GitHub.

Data

Use the data prop as an array of objects, the columns will be generated based on the keys of the objects.

Id	Date	Status	Email	Amount
4600	2024-03-11T15:30:00	paid	james.anderson@example.com	594
4599	2024-03-11T10:10:00	failed	mia.white@example.com	276
4598	2024-03-11T08:50:00	refunded	william.brown@example.com	315
4597	2024-03-10T19:45:00	paid	emma.davis@example.com	529
4596	2024-03-10T15:55:00	paid	ethan.harris@example.com	639

{
  "wait": "Loading client-side content..."
}

Columns

Use the columns prop as an array of ColumnDef objects with properties like:

accessorKey: The key of the row object to use when extracting the value for the column.
header: The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).
footer: The footer to display for the column. Works exactly like header, but is displayed under the table.
cell: The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).
meta: Extra properties for the column.
- class:
  - td: The classes to apply to the td element.
  - th: The classes to apply to the th element.
- style:
  - td: The style to apply to the td element.
  - th: The style to apply to the th element.

In order to render components or other HTML elements, you will need to use the Vue h function inside the header and cell props. This is different from other components that use slots but allows for more flexibility.

You can also use slots to customize the header and data cells of the table.

#	Date	Status	Email	Amount
#4600	Mar 11, 15:30	paid	james.anderson@example.com	€594.00
#4599	Mar 11, 10:10	failed	mia.white@example.com	€276.00
#4598	Mar 11, 08:50	refunded	william.brown@example.com	€315.00
#4597	Mar 10, 19:45	paid	emma.davis@example.com	€529.00
#4596	Mar 10, 15:55	paid	ethan.harris@example.com	€639.00

{
  "wait": "Loading client-side content..."
}

When rendering components with h, you can either use the resolveComponent function or import from #components.

ID	Date	Status	Email	Amount
4600	Mar 11, 03:30 PM	paid	james.anderson@example.com	$594.00
4599	Mar 11, 10:10 AM	failed	mia.white@example.com	$276.00
4598	Mar 11, 08:50 AM	refunded	william.brown@example.com	$315.00
4597	Mar 10, 07:45 PM	paid	emma.davis@example.com	$529.00
4596	Mar 10, 03:55 PM	paid	ethan.harris@example.com	$639.00

Loading

Use the loading prop to display a loading state, the loading-color prop to change its color and the loading-animation prop to change its animation.

loadingColor

loadingAnimation

Id	Date	Status	Email	Amount
4600	2024-03-11T15:30:00	paid	james.anderson@example.com	594
4599	2024-03-11T10:10:00	failed	mia.white@example.com	276
4598	2024-03-11T08:50:00	refunded	william.brown@example.com	315
4597	2024-03-10T19:45:00	paid	emma.davis@example.com	529
4596	2024-03-10T15:55:00	paid	ethan.harris@example.com	639

{
  "wait": "Loading client-side content..."
}

Sticky

Use the sticky prop to make the header or footer sticky.

sticky

Id	Date	Status	Email	Amount
4600	2024-03-11T15:30:00	paid	james.anderson@example.com	594
4599	2024-03-11T10:10:00	failed	mia.white@example.com	276
4598	2024-03-11T08:50:00	refunded	william.brown@example.com	315
4597	2024-03-10T19:45:00	paid	emma.davis@example.com	529
4596	2024-03-10T15:55:00	paid	ethan.harris@example.com	639
4595	2024-03-10T15:55:00	paid	ethan.harris@example.com	639
4594	2024-03-10T15:55:00	paid	ethan.harris@example.com	639

{
  "wait": "Loading client-side content..."
}

Examples

With row actions

You can add a new column that renders a DropdownMenu component inside the cell to render row actions.

#	Date	Status	Email	Amount
#4600	Mar 11, 15:30	paid	james.anderson@example.com	€594.00
#4599	Mar 11, 10:10	failed	mia.white@example.com	€276.00
#4598	Mar 11, 08:50	refunded	william.brown@example.com	€315.00
#4597	Mar 10, 19:45	paid	emma.davis@example.com	€529.00
#4596	Mar 10, 15:55	paid	ethan.harris@example.com	€639.00

{
  "wait": "Loading client-side content..."
}

With expandable rows

You can add a new column that renders a Button component inside the cell to toggle the expandable state of a row using the TanStack Table Expanding APIs.

You need to define the #expanded slot to render the expanded content which will receive the row as a parameter.

	#	Date	Status	Email	Amount
	#4600	Mar 11, 15:30	paid	james.anderson@example.com	€594.00
	#4599	Mar 11, 10:10	failed	mia.white@example.com	€276.00
{ "id": "4599", "date": "2024-03-11T10:10:00", "status": "failed", "email": "mia.white@example.com", "amount": 276 }
	#4598	Mar 11, 08:50	refunded	william.brown@example.com	€315.00
	#4597	Mar 10, 19:45	paid	emma.davis@example.com	€529.00
	#4596	Mar 10, 15:55	paid	ethan.harris@example.com	€639.00

{
  "wait": "Loading client-side content..."
}

You can use the expanded prop to control the expandable state of the rows (can be binded with v-model).

You could also add this action to the DropdownMenu component inside the actions column.

With grouped rows

You can group rows based on a given column value and show/hide sub rows via some button added to the cell using the TanStack Table Grouping APIs.

Important parts:

Add grouping prop with an array of column ids you want to group by.
Add grouping-options prop. It must include getGroupedRowModel, you can import it from @tanstack/vue-table or implement your own.
Expand rows via row.toggleExpanded() method on any cell of the row. Keep in mind, it also toggles #expanded slot.
Use aggregateFn on column definition to define how to aggregate the rows.
agregatedCell renderer on column definition only works if there is no cell renderer.

Item	#	Date	Email	Amount
Account 1	3 records	Mar 11, 15:30	3 customers	€1,548.00
Account 2	2 records	Mar 11, 10:10	2 customers	€805.00

{
  "wait": "Loading client-side content..."
}

With row selection

You can add a new column that renders a Checkbox component inside the header and cell to select rows using the TanStack Table Row Selection APIs.

Date	Status	Email	Amount
Mar 11, 15:30	paid	james.anderson@example.com	€594.00
Mar 11, 10:10	failed	mia.white@example.com	€276.00
Mar 11, 08:50	refunded	william.brown@example.com	€315.00
Mar 10, 19:45	paid	emma.davis@example.com	€529.00
Mar 10, 15:55	paid	ethan.harris@example.com	€639.00

0 of 0 row(s) selected.

{
  "wait": "Loading client-side content..."
}

You can use the row-selection prop to control the selection state of the rows (can be binded with v-model).

With row select event

You can add a @select listener to make rows clickable with or without a checkbox column.

The handler function receives the Event and TableRow instance as the first and second arguments respectively.

Date	Status	Email	Amount
Mar 11, 15:30	paid	james.anderson@example.com	€594.00
Mar 11, 10:10	failed	mia.white@example.com	€276.00
Mar 11, 08:50	refunded	william.brown@example.com	€315.00
Mar 10, 19:45	paid	emma.davis@example.com	€529.00
Mar 10, 15:55	paid	ethan.harris@example.com	€639.00

0 of 0 row(s) selected.

{
  "wait": "Loading client-side content..."
}

You can use this to navigate to a page, open a modal or even to select the row manually.

You can add a @contextmenu listener to make rows right clickable and wrap the Table in a ContextMenu component to display row actions for example.

The handler function receives the Event and TableRow instance as the first and second arguments respectively.

#	Date	Status	Email	Amount
#4600	Mar 11, 15:30	paid	james.anderson@example.com	€594.00
#4599	Mar 11, 10:10	failed	mia.white@example.com	€276.00
#4598	Mar 11, 08:50	refunded	william.brown@example.com	€315.00
#4597	Mar 10, 19:45	paid	emma.davis@example.com	€529.00
#4596	Mar 10, 15:55	paid	ethan.harris@example.com	€639.00

{
  "wait": "Loading client-side content..."
}

With row hover event

You can add a @hover listener to make rows hoverable and use a Popover or a Tooltip component to display row details for example.

The handler function receives the Event and TableRow instance as the first and second arguments respectively.

#	Date	Status	Email	Amount
#4600	Mar 11, 15:30	paid	james.anderson@example.com	€594.00
#4599	Mar 11, 10:10	failed	mia.white@example.com	€276.00
#4598	Mar 11, 08:50	refunded	william.brown@example.com	€315.00
#4597	Mar 10, 19:45	paid	emma.davis@example.com	€529.00
#4596	Mar 10, 15:55	paid	ethan.harris@example.com	€639.00

{
  "wait": "Loading client-side content..."
}

This example is similar as the Popover with following cursor example and uses a refDebounced to prevent the Popover from opening and closing too quickly when moving the cursor from one row to another.

With column footer

You can add a footer property to the column definition to render a footer for the column.

#	Date	Status	Email	Amount
#4600	Mar 11, 15:30	paid	james.anderson@example.com	€594.00
#4599	Mar 11, 10:10	failed	mia.white@example.com	€276.00
#4598	Mar 11, 08:50	refunded	william.brown@example.com	€315.00
#4597	Mar 10, 19:45	paid	emma.davis@example.com	€529.00
#4596	Mar 10, 15:55	paid	ethan.harris@example.com	€639.00
				Total: €2,353.00

{
  "wait": "Loading client-side content..."
}

With column sorting

You can update a column header to render a Button component inside the header to toggle the sorting state using the TanStack Table Sorting APIs.

#	Date	Status		Amount
#4597	Mar 10, 19:45	paid	emma.davis@example.com	€529.00
#4596	Mar 10, 15:55	paid	ethan.harris@example.com	€639.00
#4600	Mar 11, 15:30	paid	james.anderson@example.com	€594.00
#4599	Mar 11, 10:10	failed	mia.white@example.com	€276.00
#4598	Mar 11, 08:50	refunded	william.brown@example.com	€315.00

{
  "wait": "Loading client-side content..."
}

You can use the sorting prop to control the sorting state of the columns (can be binded with v-model).

You can also create a reusable component to make any column header sortable.


#4596	Mar 10, 15:55	paid	ethan.harris@example.com	€639.00
#4597	Mar 10, 19:45	paid	emma.davis@example.com	€529.00
#4598	Mar 11, 08:50	refunded	william.brown@example.com	€315.00
#4599	Mar 11, 10:10	failed	mia.white@example.com	€276.00
#4600	Mar 11, 15:30	paid	james.anderson@example.com	€594.00

{
  "wait": "Loading client-side content..."
}

In this example, we use a function to define the column header but you can also create an actual component.

With column pinning

You can update a column header to render a Button component inside the header to toggle the pinning state using the TanStack Table Pinning APIs.

A pinned column will become sticky on the left or right side of the table. When using column pinning, you should define explicit size values for your columns to ensure proper column width handling, especially with multiple pinned columns.


#4600000000000000000000000000000000000000	2024-03-11T15:30:00	paid	james.anderson@example.com	€594,000.00
#4599000000000000000000000000000000000000	2024-03-11T10:10:00	failed	mia.white@example.com	€276,000.00
#4598000000000000000000000000000000000000	2024-03-11T08:50:00	refunded	william.brown@example.com	€315,000.00
#4597000000000000000000000000000000000000	2024-03-10T19:45:00	paid	emma.davis@example.com	€5,290,000.00
#4596000000000000000000000000000000000000	2024-03-10T15:55:00	paid	ethan.harris@example.com	€639,000.00

{
  "wait": "Loading client-side content..."
}

You can use the column-pinning prop to control the pinning state of the columns (can be binded with v-model).

With column visibility

You can use a DropdownMenu component to toggle the visibility of the columns using the TanStack Table Column Visibility APIs.

Date	Status	Email	Amount
Mar 11, 15:30	paid	james.anderson@example.com	€594.00
Mar 11, 10:10	failed	mia.white@example.com	€276.00
Mar 11, 08:50	refunded	william.brown@example.com	€315.00
Mar 10, 19:45	paid	emma.davis@example.com	€529.00
Mar 10, 15:55	paid	ethan.harris@example.com	€639.00

{
  "wait": "Loading client-side content..."
}

You can use the column-visibility prop to control the visibility state of the columns (can be binded with v-model).

With column filters

You can use an Input component to filter per column the rows using the TanStack Table Column Filtering APIs.

#	Date	Status	Email	Amount
#4600	Mar 11, 15:30	paid	james.anderson@example.com	€594.00

{
  "wait": "Loading client-side content..."
}

You can use the column-filters prop to control the filters state of the columns (can be binded with v-model).

With global filter

You can use an Input component to filter the rows using the TanStack Table Global Filtering APIs.

#	Date	Status	Email	Amount
#4599	Mar 11, 10:10	failed	mia.white@example.com	€276.00
#4598	Mar 11, 08:50	refunded	william.brown@example.com	€315.00
#4597	Mar 10, 19:45	paid	emma.davis@example.com	€529.00
#4596	Mar 10, 15:55	paid	ethan.harris@example.com	€639.00

{
  "wait": "Loading client-side content..."
}

You can use the global-filter prop to control the global filter state (can be binded with v-model).

With pagination

You can use a Pagination component to control the pagination state using the Pagination APIs.

There are different pagination approaches as explained in Pagination Guide. In this example, we use client-side pagination so we need to manually pass getPaginationRowModel() function.

#	Date	Email	Amount
#4600	Mar 11, 15:30	james.anderson@example.com	€594.00
#4599	Mar 11, 10:10	mia.white@example.com	€276.00
#4598	Mar 11, 08:50	william.brown@example.com	€315.00
#4597	Mar 10, 19:45	emma.davis@example.com	€529.00
#4596	Mar 10, 15:55	ethan.harris@example.com	€639.00

{
  "wait": "Loading client-side content..."
}

You can use the pagination prop to control the pagination state (can be binded with v-model).

With fetched data

You can fetch data from an API and use them in the Table.

ID	Name	Email	Company
No data

{
  "wait": "Loading client-side content..."
}

With infinite scroll

If you use server-side pagination, you can use the useInfiniteScroll composable to load more data when scrolling.

ID	Avatar	First name	Email	Username
No data

{
  "wait": "Loading client-side content..."
}

With drag and drop

You can use the useSortable composable from @vueuse/integrations to enable drag and drop functionality on the Table. This integration wraps Sortable.js to provide a seamless drag and drop experience.

Since the table ref doesn't expose the tbody element, add a unique class to it via the :b24ui prop to target it with useSortable (e.g. :b24ui="{ tbody: 'my-table-tbody' }").

#	Date	Email	Amount
#4600	Mar 11, 15:30	james.anderson@example.com	€594.00
#4599	Mar 11, 10:10	mia.white@example.com	€276.00
#4598	Mar 11, 08:50	william.brown@example.com	€315.00
#4597	Mar 10, 19:45	emma.davis@example.com	€529.00

{
  "wait": "Loading client-side content..."
}

With virtualization

Use the virtualize prop to enable virtualization for large datasets as a boolean or an object with options like { estimateSize: 65, overscan: 12 }. You can also pass other TanStack Virtual options to customize the virtualization behavior.

When virtualization is enabled, the sticky properties are not supported.

#	Date	Status	Email	Amount

{
  "wait": "Loading client-side content..."
}

A height constraint is required on the table for virtualization to work properly (e.g., class="h-[400px]").

With tree data

You can use the get-sub-rows prop to display hierarchical (tree) data in the table. For example, if your data objects have a children array, set :get-sub-rows="row => row.children" to enable expandable rows.

#	Date	Email	Amount
4600	Mar 11, 15:30	james.anderson@example.com	€594.00

4599	Mar 11, 10:10	mia.white@example.com	€276.00
4598	Mar 11, 08:50	william.brown@example.com	€315.00
4597	Mar 10, 19:45	emma.davis@example.com	€529.00
4589	Mar 9, 11:35	isabella.lee@example.com	€389.00

{
  "wait": "Loading client-side content..."
}

With slots

You can use slots to customize the header and data cells of the table.

Use the #<column>-header slot to customize the header of a column. You will have access to the column, header and table properties in the slot scope.

Use the #<column>-cell slot to customize the cell of a column. You will have access to the cell, column, getValue, renderValue, row, and table properties in the slot scope.

ID	Name	Email	Role
1	Lindsay Walton Front-end Developer	lindsay.walton@example.com	Member
2	Courtney Henry Designer	courtney.henry@example.com	Admin
3	Tom Cook Director of Product	tom.cook@example.com	Member
4	Whitney Francis Copywriter	whitney.francis@example.com	Admin
5	Leonard Krasner Senior Designer	leonard.krasner@example.com	Owner
6	Floyd Miles Principal Designer	floyd.miles@example.com	Member

{
  "wait": "Loading client-side content..."
}

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`data`		`unknown[]`
`columns`		`TableColumn<unknown, unknown>[]`
`caption`		`string`
`meta`		`TableMeta<unknown>` You can pass any object to `options.meta` and access it anywhere the `table` is available via `table.options.meta`. API Docs Guide
`virtualize`	`false`	`boolean \| (Partial<Omit<VirtualizerOptions<Element, Element>, "getScrollElement" \| "count" \| "estimateSize" \| "overscan">> & { overscan?: number ; estimateSize?: number \| ((index: number) => number) \| undefined; }) \| undefined` Enable virtualization for large datasets. Note: when enabled, the divider between rows and sticky properties are not supported.
`empty`	`t('table.noData')`	`string` The text to display when the table is empty.
`sticky`	`false`	`boolean \| "header" \| "footer"` Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only. Note: this prop is not supported when `virtualize` is true.
`loading`		`boolean` Whether the table should be in loading state.
`loadingColor`	`'air-primary'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-warning" \| "air-primary-copilot"`
`loadingAnimation`	`'loading'`	`"loading" \| "carousel" \| "carousel-inverse" \| "swing" \| "elastic"`
`watchOptions`	`{ deep: true }`	`WatchOptions<boolean>` Use the `watchOptions` prop to customize reactivity (for ex: disable deep watching for changes in your data or limiting the max traversal depth). This can improve performance by reducing unnecessary re-renders, but it should be used with caution as it may lead to unexpected behavior if not managed properly.
`globalFilterOptions`		`Omit<GlobalFilterOptions<unknown>, "onGlobalFilterChange">`
`columnFiltersOptions`		`Omit<ColumnFiltersOptions<unknown>, "getFilteredRowModel" \| "onColumnFiltersChange">`
`columnPinningOptions`		`Omit<ColumnPinningOptions, "onColumnPinningChange">`
`columnSizingOptions`		`Omit<ColumnSizingOptions, "onColumnSizingChange" \| "onColumnSizingInfoChange">`
`visibilityOptions`		`Omit<VisibilityOptions, "onColumnVisibilityChange">`
`sortingOptions`		`Omit<SortingOptions<unknown>, "getSortedRowModel" \| "onSortingChange">`
`groupingOptions`		`Omit<GroupingOptions, "onGroupingChange">`
`expandedOptions`		`Omit<ExpandedOptions<unknown>, "getExpandedRowModel" \| "onExpandedChange">`
`rowSelectionOptions`		`Omit<RowSelectionOptions<unknown>, "onRowSelectionChange">`
`rowPinningOptions`		`Omit<RowPinningOptions<unknown>, "onRowPinningChange">`
`paginationOptions`		`Omit<PaginationOptions, "onPaginationChange">`
`facetedOptions`		`FacetedOptions<unknown>`
`onSelect`		`(e: Event, row: TableRow<unknown>): void`
`onHover`		`(e: Event, row: TableRow<unknown> \| null): void`
`onContextmenu`		`(e: Event, row: TableRow<unknown>): void \| ((e: Event, row: TableRow<unknown>) => void)[]`
`state`		`Partial<TableState>`
`onStateChange`		`(updater: Updater<TableState>): void`
`renderFallbackValue`		`any`
`_features`		`TableFeature<any>[]` An array of extra features that you can add to the table instance. API Docs Guide
`autoResetAll`		`boolean` Set this option to override any of the `autoReset...` feature options. API Docs Guide
`debugAll`		`boolean` Set this option to `true` to output all debugging information to the console. API Docs Guide
`debugCells`		`boolean` Set this option to `true` to output cell debugging information to the console. [API Docs](https://tanstack.com/table/v8/docs/api/core/table#debugcells] Guide
`debugColumns`		`boolean` Set this option to `true` to output column debugging information to the console. API Docs Guide
`debugHeaders`		`boolean` Set this option to `true` to output header debugging information to the console. API Docs Guide
`debugRows`		`boolean` Set this option to `true` to output row debugging information to the console. API Docs Guide
`debugTable`		`boolean` Set this option to `true` to output table debugging information to the console. API Docs Guide
`defaultColumn`		Partial<ColumnDefBase<unknown, unknown> & StringHeaderIdentifier> \| Partial<ColumnDefBase<unknown, unknown> & IdIdentifier<unknown, unknown>> \| Partial<GroupColumnDefBase<unknown, unknown> & StringHeaderIdentifier> \| Partial<GroupColumnDefBase<unknown, unknown> & IdIdentifier<unknown, unknown>> \| Partial<AccessorKeyColumnDefBase<unknown, unknown> & Partial<StringHeaderIdentifier>> \| Partial<AccessorKeyColumnDefBase<unknown, unknown> & Partial<IdIdentifier<unknown, unknown>>> \| Partial<AccessorFnColumnDefBase<unknown, unknown> & StringHeaderIdentifier> \| Partial<AccessorFnColumnDefBase<unknown, unknown> & IdIdentifier<unknown, unknown>> Default column options to use for all column defs supplied to the table. API Docs Guide
`getRowId`		`(originalRow: unknown, index: number, parent?: Row<unknown> \| undefined): string` This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc. API Docs Guide
`getSubRows`		`(originalRow: unknown, index: number): unknown[]` This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row. API Docs Guide
`initialState`		`InitialTableState` Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. `options.autoResetPageIndex`) or via functions like `table.resetRowSelection()`. Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state. Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable. API Docs Guide
`mergeOptions`		`(defaultOptions: TableOptions<unknown>, options: Partial<TableOptions<unknown>>): TableOptions<unknown>` This option is used to optionally implement the merging of table options. API Docs Guide
`cellpadding`		`string \| number`
`cellspacing`		`string \| number`
`summary`		`string`
`width`		`string \| number`
`globalFilter`	`undefined`	`string`
`columnFilters`	`[]`	`ColumnFiltersState`
`columnOrder`	`[]`	`ColumnOrderState`
`columnVisibility`	`{}`	`VisibilityState`
`columnPinning`	`{}`	`ColumnPinningState`
`columnSizing`	`{}`	`ColumnSizingState`
`columnSizingInfo`	`{}`	`ColumnSizingInfoState`
`rowSelection`	`{}`	`RowSelectionState`
`rowPinning`	`{}`	`RowPinningState`
`sorting`	`[]`	`SortingState`
`grouping`	`[]`	`GroupingState`
`expanded`	`{}`	`true \| Record<string, boolean>`
`pagination`	`{}`	`PaginationState`
`b24ui`		`{ root?: ClassNameValue; base?: ClassNameValue; caption?: ClassNameValue; thead?: ClassNameValue; tbody?: ClassNameValue; tfoot?: ClassNameValue; tr?: ClassNameValue; th?: ClassNameValue; td?: ClassNameValue; separator?: ClassNameValue; empty?: ClassNameValue; loading?: ClassNameValue; }`

This component also supports all native <table> HTML attributes.

Slots

Slot	Type
`expanded`	`{ row: Row<unknown>; }`
`empty`	`{}`
`loading`	`{}`
`caption`	`{}`
`body-top`	`{}`
`body-bottom`	`{}`

Expose

You can access the typed component instance using useTemplateRef.

<script setup lang="ts">
const table = useTemplateRef('table')
</script>

<template>
  <B24Table ref="table" />
</template>

This will give you access to the following:

Name	Type
`tableRef`	`Ref<HTMLTableElement \| null>`
`tableApi`	`Table`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    table: {
      slots: {
        root: 'relative overflow-auto',
        base: 'min-w-full font-[family-name:var(--ui-font-family-primary)]',
        caption: 'sr-only',
        thead: 'relative',
        tbody: '[&>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue) [&>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue)',
        tfoot: 'relative',
        tr: 'data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]',
        th: 'px-4 py-3.5 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-(--b24ui-typography-label-color) whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&:has([role=checkbox])]:pe-0 align-middle',
        td: 'p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-(--b24ui-typography-label-color) whitespace-nowrap font-(--ui-font-weight-normal) [&:has([role=checkbox])]:pe-0 align-middle',
        separator: 'absolute z-[1] left-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)',
        empty: 'py-6 text-center text-(length:--ui-font-size-sm) text-(--b24ui-typography-description-color)',
        loading: 'py-6 text-center'
      },
      variants: {
        virtualize: {
          true: {
            tr: 'relative before:absolute before:z-1 before:w-full before:border-b before:border-b-(--ui-color-design-tinted-na-stroke)'
          },
          false: {
            base: 'overflow-clip',
            tbody: 'divide-y divide-(--ui-color-design-tinted-na-stroke)'
          }
        },
        pinned: {
          true: {
            th: 'sticky bg-(--ui-color-bg-content-primary) z-[1]',
            td: 'sticky bg-(--ui-color-bg-content-primary) z-[1]'
          }
        },
        sticky: {
          true: {
            thead: 'sticky top-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur',
            tfoot: 'sticky bottom-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur'
          },
          header: {
            thead: 'sticky top-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur'
          },
          footer: {
            tfoot: 'sticky bottom-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur'
          }
        },
        loading: {
          true: {
            thead: 'after:absolute after:z-[1] after:h-px after:bg-(--b24ui-background)'
          }
        },
        loadingAnimation: {
          loading: '',
          carousel: '',
          'carousel-inverse': '',
          swing: '',
          elastic: ''
        },
        loadingColor: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          }
        }
      },
      compoundVariants: [
        {
          loading: true,
          loadingAnimation: 'loading',
          class: {
            thead: 'after:animate-[progressbar-loading_2s_infinite]'
          }
        },
        {
          loading: true,
          loadingAnimation: 'carousel',
          class: {
            thead: 'after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]'
          }
        },
        {
          loading: true,
          loadingAnimation: 'carousel-inverse',
          class: {
            thead: 'after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
          }
        },
        {
          loading: true,
          loadingAnimation: 'swing',
          class: {
            thead: 'after:animate-[swing_2s_ease-in-out_infinite]'
          }
        },
        {
          loading: true,
          loadingAnimation: 'elastic',
          class: {
            thead: 'after:animate-[elastic_2s_ease-in-out_infinite]'
          }
        }
      ],
      defaultVariants: {
        loadingColor: 'air-primary',
        loadingAnimation: 'loading'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        table: {
          slots: {
            root: 'relative overflow-auto',
            base: 'min-w-full font-[family-name:var(--ui-font-family-primary)]',
            caption: 'sr-only',
            thead: 'relative',
            tbody: '[&>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue) [&>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue)',
            tfoot: 'relative',
            tr: 'data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]',
            th: 'px-4 py-3.5 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-(--b24ui-typography-label-color) whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&:has([role=checkbox])]:pe-0 align-middle',
            td: 'p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-(--b24ui-typography-label-color) whitespace-nowrap font-(--ui-font-weight-normal) [&:has([role=checkbox])]:pe-0 align-middle',
            separator: 'absolute z-[1] left-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)',
            empty: 'py-6 text-center text-(length:--ui-font-size-sm) text-(--b24ui-typography-description-color)',
            loading: 'py-6 text-center'
          },
          variants: {
            virtualize: {
              true: {
                tr: 'relative before:absolute before:z-1 before:w-full before:border-b before:border-b-(--ui-color-design-tinted-na-stroke)'
              },
              false: {
                base: 'overflow-clip',
                tbody: 'divide-y divide-(--ui-color-design-tinted-na-stroke)'
              }
            },
            pinned: {
              true: {
                th: 'sticky bg-(--ui-color-bg-content-primary) z-[1]',
                td: 'sticky bg-(--ui-color-bg-content-primary) z-[1]'
              }
            },
            sticky: {
              true: {
                thead: 'sticky top-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur',
                tfoot: 'sticky bottom-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur'
              },
              header: {
                thead: 'sticky top-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur'
              },
              footer: {
                tfoot: 'sticky bottom-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur'
              }
            },
            loading: {
              true: {
                thead: 'after:absolute after:z-[1] after:h-px after:bg-(--b24ui-background)'
              }
            },
            loadingAnimation: {
              loading: '',
              carousel: '',
              'carousel-inverse': '',
              swing: '',
              elastic: ''
            },
            loadingColor: {
              'air-primary': {
                root: 'style-filled'
              },
              'air-primary-success': {
                root: 'style-filled-success'
              },
              'air-primary-alert': {
                root: 'style-filled-alert'
              },
              'air-primary-copilot': {
                root: 'style-filled-copilot'
              },
              'air-primary-warning': {
                root: 'style-filled-warning'
              }
            }
          },
          compoundVariants: [
            {
              loading: true,
              loadingAnimation: 'loading',
              class: {
                thead: 'after:animate-[progressbar-loading_2s_infinite]'
              }
            },
            {
              loading: true,
              loadingAnimation: 'carousel',
              class: {
                thead: 'after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]'
              }
            },
            {
              loading: true,
              loadingAnimation: 'carousel-inverse',
              class: {
                thead: 'after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
              }
            },
            {
              loading: true,
              loadingAnimation: 'swing',
              class: {
                thead: 'after:animate-[swing_2s_ease-in-out_infinite]'
              }
            },
            {
              loading: true,
              loadingAnimation: 'elastic',
              class: {
                thead: 'after:animate-[elastic_2s_ease-in-out_infinite]'
              }
            }
          ],
          defaultVariants: {
            loadingColor: 'air-primary',
            loadingAnimation: 'loading'
          }
        }
      }
    })
  ]
})

Empty

An empty state component.

TableWrapper

Wrapper for displaying a html table