🌏 Translated with the assistance of DeepSeek and ChatGPT

Table

This is a table used to display content with rows and columns.

WARNING

To ensure the row expansion and row selection functions work properly, when these functions are needed, you must ensure that each data item in the data array contains a field with the same name as the rowKey parameter (default is 'key'), and the value of this field is unique across all data.

If backend pagination is needed, please refer to Server-side Pagination.

If cross-page selection is needed, please refer to Cross-page Select all.

Basic Usage

The data prop is the current data of the table, and the columns prop sets the table columns.

Please configure the key property for elements in columns as the unique identifier for rows.

Please configure the key property for elements in data as the unique identifier for rows; this unique identifier field can be controlled by rowKey.

Name	Age	Email
Alice	25	alice@example.com
Bob	30	bob@example.com
Charlie	35	charlie@example.com

1

Hide source code

Alignment

columns[].align configures the text alignment of cells; the default is 'left'.

Name	Age	Email
Olivia	28	olivia@example.com
James	32	james@example.com
Sophia	24	sophia@example.com
William	29	william@example.com
Emma	31	emma@example.com

1

Hide source code

Custom Cells

You can customize cells in the following ways:

• Use columns[].slotName to configure a cell content slot.
• Use columns[].labelSlotName to configure a header cell content slot.
• Use columns[].render to configure a cell content render function.
• Use columns[].labelRender to configure a header cell render function.
• Use columns[].cellProps to configure cell properties.
• Use columns[].labelCellProps to configure header cell properties.
• Use columns[].contentProps to configure cell content properties.
• Use columns[].labelContentProps to configure header content properties.

Name	Age	Email	Status Active / Inactive	Actions
Emma Johnson	32	emma.johnson@example.com	active
James Miller	45	jmiller@test.net	inactive
Sophia Chen	28	schen@demo.org	active
William Brown	61	wbrown55@sample.co	inactive
Olivia Davis	39	odavis@mail.io	active

1

Hide source code

Column Width

columns[].width and columns[].minWidth configure cell width.

When setting columns[].width, please leave at least one column unset so the table can adapt to its actual width.

Name	Role	Email	Address
Olivia Martinez	Admin	olivia.martinez@company.com	123 Maple Street, New York, NY 10001
James Wilson	Developer	james.wilson@company.com	456 Oak Avenue, San Francisco, CA 94102
Sophia Chen	Designer	sophia.chen@company.com	789 Pine Road, Chicago, IL 60601
William Taylor	Manager	william.taylor@company.com	321 Elm Boulevard, Austin, TX 73301
Emma Johnson	Analyst	emma.johnson@company.com	654 Cedar Lane, Seattle, WA 98101

1

Hide source code

Borders and Background

bordered enables table borders; by default all borders are shown. variant sets the table background style variant; the default is a solid background ('normal').

Three-Line Table

Bordered:

Table

Side

Head

Row

Col

Variant:

Normal

Striped

Checkered

Name	Age	Email
Alice	25	alice@example.com
Bob	30	bob@example.com
Charlie	35	charlie@example.com

1

Hide source code

Table Height

Due to the features of display: table, unexpected results may occur when setting a small height or max-height on the outermost element of the Table component. The <table> height will still be expanded by its child elements.

We recommend using the tableAreaProps property to set a fixed or dynamic table height, for example: :table-area-props="{ style: 'max-height: 400px' }".

Name	Role	Level	Salary	Address
Aric Ironfist	Blacksmith	42	2800	Iron Forge Street 12
Lyra Swiftarrow	Hunter	36	2200	Forest Edge Cottage
Borin Stonebeard	Miner	28	1800	Mountain Hall 7
Elara Moonshadow	Alchemist	51	3200	Apothecary Lane 3
Garrick Stormblade	Knight	65	4500	Castle Barracks
Mira Whisperwind	Bard	24	1500	Tavern Square 5
Thrain Forgeheart	Engineer	47	2900	Workshop District 9
Sylas Greenleaf	Druid	58	3800	Ancient Grove
Kaelen Firehand	Pyromancer	61	4200	Mage Tower East
Freya Shieldmaiden	Guard Captain	54	3600	Guard Post Central
Jorin Goldfinder	Merchant	33	2500	Market Square 8
Nyssa Lightfoot	Rogue	39	2700	Shadow Alley 2
Torin Boulderbreaker	Stone Mason	31	2100	Quarry Road 4
Liana Starweaver	Astrologer	45	3100	Observatory Hill
Finn Riverstride	Fisherman	22	1400	Dockside Hut
Rowan Oakenshield	Carpenter	27	1700	Timber Yard 6
Vera Nightshade	Herbalist	34	2300	Herb Garden Cottage
Draven Bloodedge	Mercenary	49	3300	Fighter's Guild
Mara Swiftcurrent	Sailor	26	1600	Harbor Watch 3
Orin Deepdelver	Archaeologist	43	3000	Explorer's Lodge

Hide source code

Scroll Area

scroll.x configures the scroll area's width. The Table component internally computes a minimum scroll width based on column configuration; when the table's actual width is less than the greater of that computed minimum and scroll.x, a horizontal scrollbar will appear.

Name	Age	Email
Alice	25	alice@example.com
Bob	30	bob@example.com
Charlie	35	charlie@example.com

1

Hide source code

Cell Merging

Configure merged cells using the spanMethod property.

BuildingType	Coord	Level	Income	Maintain
Blacksmith	(23, 18)	3	1800	450
	(25, 20)	4	2400	600
Tavern	(34, 27)	2	1600	400
	(36, 25)	5	3200	800
Market	(41, 33)	3	2100	525
	(43, 35)	6	4000	1000
Farm	(15, 12)	2	900	225
	(18, 14)	4	2000	500
Barracks	(9, 39)	3	1500	375
	(11, 37)	5	2800	700

1

2

Hide source code

Fixed Header and Fixed Columns

The table header is fixed by default; it can be configured with the fixedHead prop.

Set fixed: 'left' or fixed: 'right' on child elements of the columns prop to fix columns.

WARNING

Fixed columns, when rendered, will move to the corresponding fixed side if they are in the middle of the table.

Fixed column configuration only applies to root nodes in the case of multi-level headers.

Id	Name	Age	Phone	Email	Address
1	John Smith	28	+1-555-101-2001	john.smith@example.com	123 Main St, Springfield, IL 62704
2	Jane Johnson	34	+1-555-102-2002	jane.johnson@example.com	456 Oak Ave, Shelbyville, IL 62706
3	Bob Williams	22	+1-555-103-2003	bob.williams@example.com	789 Pine Rd, Capital City, IL 62708
4	Alice Brown	45	+1-555-104-2004	alice.brown@example.com	101 Maple Dr, Metropolis, IL 62710
5	Charlie Jones	31	+1-555-105-2005	charlie.jones@example.com	202 Cedar Ln, Smallville, IL 62712
6	Diana Garcia	29	+1-555-106-2006	diana.garcia@example.com	303 Birch St, Gotham, NY 10001
7	Eve Miller	38	+1-555-107-2007	eve.miller@example.com	404 Elm Pl, Star City, NY 10003
8	Frank Davis	26	+1-555-108-2008	frank.davis@example.com	505 Walnut Way, Central City, NY 10005
9	Grace Rodriguez	41	+1-555-109-2009	grace.rodriguez@example.com	606 Spruce Ct, Coast City, CA 90210
10	Henry Martinez	33	+1-555-110-2010	henry.martinez@example.com	707 Ash Blvd, Emerald City, CA 90212
11	Ivy Hernandez	27	+1-555-111-2011	ivy.hernandez@example.com	808 Poplar Ave, Keystone City, CA 90214
12	Jack Lopez	36	+1-555-112-2012	jack.lopez@example.com	909 Fir St, National City, TX 75001
13	Kate Gonzalez	24	+1-555-113-2013	kate.gonzalez@example.com	111 Redwood Dr, Opal City, TX 75003
14	Leo Wilson	39	+1-555-114-2014	leo.wilson@example.com	222 Sequoia Ln, Ivy Town, TX 75005
15	Mia Anderson	30	+1-555-115-2015	mia.anderson@example.com	333 Magnolia Rd, Hub City, FL 32003
16	Nick Thomas	42	+1-555-116-2016	nick.thomas@example.com	444 Willow Cir, Blue Valley, FL 32005
17	Olivia Taylor	35	+1-555-117-2017	olivia.taylor@example.com	555 Cypress St, Starling City, FL 32007
18	Paul Moore	23	+1-555-118-2018	paul.moore@example.com	666 Juniper Way, Fawcett City, WA 98001
19	Quinn Jackson	37	+1-555-119-2019	quinn.jackson@example.com	777 Sycamore Pl, Gateway City, WA 98003
20	Ryan Martin	32	+1-555-120-2020	ryan.martin@example.com	888 Laurel Ave, Coral City, WA 98005

Hide source code

Multi-level Headers

Set children on child elements of the columns prop to enable multi-level headers.

In multi-level header cases, the header area shows cell borders.

Basic Information		Contact Information			Work Information				Status
ID	Name	Contact Details		Address	Department	Salary Information
		Phone	Email			Base Salary	Bonus	Total
1	John Smith	+1 (212) 555-0198	john.smith@example.com	123 Main St, New York, NY	Sales	5000	1000	6000	Active
2	Emily Johnson	+44 20 7946 0958	emily.j@example.com	456 Park Ave, Los Angeles, CA	Marketing	4500	800	5300	Active
3	Michael Brown	+61 2 9876 5432	m.brown@example.com	789 Broadway, Chicago, IL	Engineering	7000	1500	8500	Active
4	Sarah Davis	+49 30 12345678	sarah.davis@example.com	101 Oak St, Houston, TX	HR	4800	600	5400	On Leave
5	David Wilson	+33 1 2345 6789	d.wilson@example.com	202 Pine Rd, Phoenix, AZ	Finance	6500	1200	7700	Active
6	Jennifer Taylor	+81 3 1234 5678	jennifer.t@example.com	303 Elm St, Philadelphia, PA	Sales	5200	900	6100	Active
7	Robert Miller	+1 (415) 555-0134	robert.m@example.com	404 Cedar Ave, San Antonio, TX	Engineering	7200	1600	8800	Active
8	Lisa Anderson	+44 131 496 0600	lisa.a@example.com	505 Maple Dr, San Diego, CA	Marketing	4700	700	5400	Inactive
9	William Thomas	+61 8 8123 4567	william.t@example.com	606 Birch Ln, Dallas, TX	Finance	6800	1300	8100	Active
10	Maria Jackson	+49 89 98765432	maria.j@example.com	707 Walnut St, San Jose, CA	HR	4900	650	5550	Active

1

Hide source code

Row Selection

Configure row selection via the selection prop. selectedKey controls selected items (controlled mode). If omitted or undefined, the component is uncontrolled; use defaultSelectedKey to provide a default.

Set columns[].disabled to disable the selector for a row.

When there are left-fixed columns, the row selection column is also fixed to the left.

Multiple

	ID	Name	Email	City	Address
	1001	Emma Johnson	emma.johnson@example.com	New York	123 Main Street, Apt 4B
	1002	James Wilson	j.wilson@example.com	Los Angeles	456 Oak Avenue
	1003	Sophia Chen	sophia.chen@example.com	Chicago	789 Pine Road, Suite 12
	1004	Michael Brown	m.brown@example.com	Miami	321 Beach Boulevard
	1005	Olivia Davis	olivia.davis@example.com	Seattle	654 Lakeview Drive

1

selectedKeys: []

Hide source code

Expandable Rows

Configure expandable rows via the expandable prop. expandedKey controls expanded rows (controlled mode). If omitted or undefined, the component is uncontrolled; use defaultExpandedKey to set a default.

Row expansion content is provided via columns[].expand or the expand slot. If empty (or when the expand slot is set, it is considered false), no expand button is shown.

When there are left-fixed columns, the expand button column is also fixed to the left.

	ID	Name
	1001	Emma Johnson
	1002	James Wilson
	1003	Sophia Chen
	1004	Michael Brown
	1005	Olivia Davis

1

	ID	Name
	1001	Emma Johnson
	1002	James Wilson
	1003	Sophia Chen
	1004	Michael Brown
	1005	Olivia Davis

1

expandedKeys: []

Hide source code

Sorting

Configure sorting using columns[].sortable. sortOrder controls the sorting state of each column (controlled mode). If omitted or undefined, the component is uncontrolled; use defaultSortOrder to provide a default.

The defaultSortOrder property inside columns[].sortable can also set the default for that column.

When sortMethod is set to 'custom', there is no sorting behavior. Backend sorting can be implemented by listening to the sortOrderChange event.

If sortMethod is not provided, the default comparator is used, based on JavaScript's native greater-than/less-than logic.

Name	Age	Email
Emma	31	emma@example.com
James	32	james@example.com
Olivia	28	olivia@example.com
Sophia	24	sophia@example.com
William	29	william@example.com

1

sortOrder: { "name": "asc" }

Hide source code

Multi-column Sorting

Enable multi-column sorting by setting multiple: true in columns[].sortable's sortMethod. Use the priority property to set a column's priority; higher values take precedence.

WARNING

Multi-column sorting and single-column sorting are mutually exclusive. Triggering one will clear the selection of the other.

Name	Age	Email
Emma	31	emma@example.com
James	32	james@example.com
Olivia	28	olivia@example.com
Sophia	24	sophia@example.com
William	29	william@example.com

1

sortOrder: { "name": "asc" }

Hide source code

Filtering

Configure filtering with columns[].filterable. filterValue controls the filter state of each column (controlled mode). If omitted or undefined, the component is uncontrolled; use defaultFilterValue to provide a default.

The defaultFilterValue inside columns[].filterable can also set the default for that column.

If filterMethod is not provided, the default comparator is used, based on JavaScript's native === equality.

Name	Base Salary	Bonus	Total	Status
James Wilson	8500	420	8920	active
Michael Brown	11200	150	11350	active
Robert Taylor	9800	920	10820	active
Jennifer Miller	6300	310	6610	active
Lisa Martinez	4500	230	4730	active
Amanda Clark	2900	0	2900	active

1

filterValue: { "status": [ "active" ] }

Hide source code

Summary Row

Configure summary rows with the summary prop.

• summary.data sets the content of the summary row.
• summary.summaryText sets the text for the first column of the summary row.
• summary.placement adjusts the placement of the summary row; choose 'start' or 'end' (default) to place the summary at the top or bottom of the data area.
• summary.fixed configures whether the summary row is fixed; the summary row is fixed by default.
• summary.spanMethod configures cell merging within the summary row area.

WARNING

When the summary row is placed at the start of the data area, a fixed summary row requires a fixed header to take effect.

Unfixed

Fixed

Placement:

End

Start

Name	Base Salary	Bonus	Total	Status
Emma Johnson	8500	420	8920	active
David Smith	6500	780	7280	inactive
Sophia Williams	11200	150	11350	active
Michael Brown	4200	0	4200	inactive
Olivia Davis	9800	920	10720	active
James Wilson	7300	310	7610	active
Sarah Miller	10500	850	11350	inactive
Robert Taylor	4200	190	4390	active
Jennifer Anderson	8900	0	8900	inactive
Thomas Clark	11500	970	12470	active
Sum	82600	4590	87190
Average	8260	459	8719

1

Hide source code

Loading State

Configure the loading state of the table by setting the loading property.

not loading

Name	Age	Email
Alice	25	alice@example.com
Bob	30	bob@example.com
Charlie	35	charlie@example.com

1

Hide source code

Client-side Pagination

The table component supports automatic pagination of the passed data by default. The pagination configuration can be set via the pagination property.

ID	User	Email	Register
1	Emma Miller	emma.miller@example.com	2026-10-20
2	Michael White	michael.white@example.com	2026-10-28
3	James Johnson	james.johnson@example.com	2025-11-09
4	Melissa Wilson	melissa.wilson@example.com	2026-05-18
5	Lisa Davis	lisa.davis@example.com	2026-02-22
6	Melissa White	melissa.white@example.com	2026-06-08
7	Sarah Harris	sarah.harris@example.com	2026-04-29
8	Michael Jones	michael.jones@example.com	2026-10-08
9	Matthew Brown	matthew.brown@example.com	2026-05-02
10	Michelle Anderson	michelle.anderson@example.com	2026-05-07

Total 50

1

2

3

4

5

10 / Page

Go to

page: 1; pageSize: 10

Hide source code

Server-side Pagination

When the pagination.paginateMethod is set to 'custom', the table will not perform automatic sorting. This is often used for server-side pagination. The total number of data items can be set via pagination.total.

ID	User	Email	Register
1	David Harris	david.harris@example.com	2025-11-18
2	Jessica Garcia	jessica.garcia@example.com	2026-05-21
3	Lisa White	lisa.white@example.com	2026-07-31
4	Emma Garcia	emma.garcia@example.com	2026-08-24
5	Lisa Martin	lisa.martin@example.com	2026-08-06
6	David Moore	david.moore@example.com	2026-07-15
7	Joshua Garcia	joshua.garcia@example.com	2025-11-23
8	James Johnson	james.johnson@example.com	2026-03-17
9	Melissa Williams	melissa.williams@example.com	2026-02-20
10	Matthew Johnson	matthew.johnson@example.com	2026-05-29

Total 1000

1

2

3

4

5

6

7

...

100

10 / Page

Go to

page: 1; pageSize: 10

Hide source code

Hide Pagination on Single Page

Set pagination.hideWhenSinglePage to hide pagination when there is only a single page.

Name	Age	Email
Alice	25	alice@example.com
Bob	30	bob@example.com
Charlie	35	charlie@example.com

Hide source code

Instance Methods

It is important to note that, for the purpose of state synchronization in controlled mode, instance methods such as selection, expansion, filtering, and sorting are designed asynchronously. Each invocation may require waiting for a microtask delay to take effect.

expandedKeys: []

selectedKeys: []

sortOrder: {}

filterValue: {}

		ID	Name
		1001	Olivia Harris
		1002	Sophia Harris
		1003	Daniel Brown
		1004	Alexander Garcia
		1005	Emma Rodriguez
		1006	James Garcia
		1007	Amelia Clark
		1008	Amelia Garcia
		1009	Emma Martin
		1010	Sophia White

1

2

3

4

5

Hide source code

Cross-Page Select All

selection.selectAllMethod can asynchronously customize the selectedKeys value updated during a select-all operation.

selection.supersetSelectAllRef configures the superset referenced for the select-all checkbox's checked status: 'current' (data on the current page, default) or 'all' (data across all pages).

Superset for Select All State Reference

All Data

	ID	User	Email	Register
	1	Robert Taylor	robert.taylor@example.com	2026-09-05
	2	Melissa Johnson	melissa.johnson@example.com	2026-03-17
	3	Christopher Taylor	christopher.taylor@example.com	2026-01-27
	4	Stephanie Johnson	stephanie.johnson@example.com	2026-02-06
	5	Michelle Martin	michelle.martin@example.com	2026-02-07
	6	John Smith	john.smith@example.com	2026-01-08
	7	Matthew Anderson	matthew.anderson@example.com	2026-10-23
	8	William Moore	william.moore@example.com	2026-06-09
	9	Michael Rodriguez	michael.rodriguez@example.com	2026-07-18
	10	Melissa Wilson	melissa.wilson@example.com	2026-03-24

Total 50

1

2

3

4

5

10 / Page

Hide source code

API

TableProps

Attribute	Type	Optional	Default	Description	Version
data	TableData[]	True	[]	The table's data source.	0.1.0
columns	TableColumn[]	True	[]	The table's column configuration collection.	0.1.0
bordered	boolean | TableBordered	True	true	Whether to display table borders and related styles.	0.1.0
variant	'normal' | 'striped' | 'checkered'	True	'normal'	The table's display variant/style.	0.1.0
fixedHead	boolean	True	true	Whether the header is fixed.	0.1.0
spanMethod	(options: TableOptionsArg) => void | { colspan?: number, rowspan?: number}	True		The method used to merge rows or columns.	0.1.0
rowKey	string	True	'key'	The key name used to uniquely identify row data.	0.1.0
scroll	{ x?: number | string }	True		Table scroll configuration (e.g., horizontal scroll settings).	0.1.0
selection	boolean | TableSelection	True	false	Whether row selection is enabled and its configuration.	0.1.0
selectedKeys	any[] | null	True		Currently selected row keys (controlled).	0.1.0
defaultSelectedKeys	any[] | null	True		Default selected row keys (uncontrolled).	0.1.0
expandable	boolean | TableExpandable	True	false	Whether expandable rows are enabled and its configuration.	0.1.0
expandedKeys	any[] | null	True		Currently expanded row keys (controlled).	0.1.0
defaultExpandedKeys	any[] | null	True		Default expanded row keys (uncontrolled).	0.1.0
summary	TableSummary	True		Configuration for the table's summary row.	0.1.0
filterValue	FilterValue | null	True		Current filter values (controlled).	0.1.0
defaultFilterValue	FilterValue | null	True		Default filter values (uncontrolled).	0.1.0
sortOrder	SortOrder | null	True		Current sorting information (controlled).	0.1.0
defaultSortOrder	SortOrder | null	True		Default sorting information (uncontrolled).	0.1.0
loading	boolean	True	false	Whether table is loading.	0.1.0
pagination	TablePagination	True	true	Configuration for table pagination.	0.1.0
page	number | null	True		Current page number (controlled mode).	0.1.0
defaultPage	number | null	True	1	Default value of current page number (uncontrolled mode).	0.1.0
pageSize	number | null	True		Current page size (controlled mode).	0.1.0
defaultPageSize	number | null	True	10	Default value of current page size (uncontrolled mode).	0.1.0
tableAreaProps	RestAttrs	True		A table area property object. The element it acts on can be found via .px-table-area.	0.1.0
borderRadius	number	True		Table border-radius settings.	0.1.0
pollSizeChange	boolean	True		Enable polling for component size changes. This may affect performance. This prop also applies to internal Radio, Checkbox and Pagination child components.	0.1.0

TableEvents

Event	Parameter	Description	Version
update:selectedKey	value: any[]	Callback when selectedKeys is updated.	0.1.0
select	value: boolean, key: any, record: TableData, event: InputEvent	Callback when a row is selected.	0.1.0
selectAll	value: boolean, event: InputEvent	Callback when select-all is triggered.	0.1.0
selectedChange	value: any[]	Callback when the selected rows change.	0.1.0
update:expandedKeys	value: any[]	Callback when expandedKeys is updated.	0.1.0
expand	value: boolean, key: any, record: TableData, event: MouseEvent	Callback when a row is expanded.	0.1.0
expandedChange	value: any[]	Callback when the expanded rows change.	0.1.0
update:filterValue	value: FilterValue	Callback when filterValue is updated.	0.1.0
filterSelect	value: any[], key: string | number | symbol, option: TableFilterOption | string, column: TableColumn, event: InputEvent	Callback when an option in the filter is selected.	0.1.0
filterConfirm	key: string | number | symbol, event: MouseEvent	Callback when filter selection is confirmed.	0.1.0
filterReset	key: string | number | symbol, event: MouseEvent	Callback when filter selection is reset.	0.1.0
filterChange	value: FilterValue	Callback when the filter selection changes.	0.1.0
update:sortOrder	value: SortOrder	Callback when sortOrder is updated.	0.1.0
sortSelect	value: 'asc' | 'desc' | 'none', key: string | number | symbol, column: TableColumn, event: MouseEvent	Callback when a sort direction is selected.	0.1.0
sortOrderChange	value: SortOrder	Callback when the sort order changes.	0.1.0
cellMouseenter	column: TableColumn, record: TableData, colIndex: number, rowIndex: number, event: MouseEvent	Callback when the mouse enters a cell.	0.1.0
cellMouseleave	column: TableColumn, record: TableData, colIndex: number, rowIndex: number, event: MouseEvent	Callback when the mouse leaves a cell.	0.1.0
cellClick	column: TableColumn, record: TableData, colIndex: number, rowIndex: number, event: MouseEvent	Callback when a cell in the data area is clicked.	0.1.0
cellDblclick	column: TableColumn, record: TableData, colIndex: number, rowIndex: number, event: MouseEvent	Callback when a cell in the data area is double-clicked.	0.1.0
cellContextmenu	column: TableColumn, record: TableData, colIndex: number, rowIndex: number, event: MouseEvent	Callback when a cell in the data area is right-clicked (context menu).	0.1.0
headCellClick	column: TableColumn, indexPath: number[], event: MouseEvent	Callback when a header cell is clicked.	0.1.0
headCellDblclick	column: TableColumn, indexPath: number[], event: MouseEvent	Callback when a header cell is double-clicked.	0.1.0
headCellContextmenu	column: TableColumn, indexPath: number[], event: MouseEvent	Callback when a header cell is right-clicked (context menu).	0.1.0
rowClick	record: TableData, rowIndex: number, event: MouseEvent	Callback when a row in the data area is clicked.	0.1.0
rowDblclick	record: TableData, rowIndex: number, event: MouseEvent	Callback when a row in the data area is double-clicked.	0.1.0
rowContextmenu	record: TableData, rowIndex: number, event: MouseEvent	Callback when a row in the data area is right-clicked (context menu).	0.1.0
update:page	value: number	Callback for updating page.	0.1.0
update:pageSize	value: number	Callback for updating pageSize.	0.1.0

TableSlots

Slot	Parameter	Description	Version
[columns[].labelSlotName]	rowIndex: number, colIndex: number, column: TableColumn	Slot for custom content in header cells.	0.1.0
[columns[].slotName]	colIndex: number, rowIndex: number, column: TableColumn, record: TableData	Slot for custom content in table cells.	0.1.0
expand	rowIndex: number, record: TableData	Slot for expanded row content.	0.1.0

TableExpose

Attribute	Type	Optional	Default	Description	Version
getCurrentData	() => TableData[]	False		Get the currently displayed data of the table after sorting and filtering.	0.1.0
getPaginatedData	() => TableData[]	False		Get the currently displayed data of the table after pagination.	0.1.0
select	(key: any | any[], value: boolean) => Promise<void>	False		Handle the selection state of table rows.	0.1.0
selectAll	(value: boolean, crossPage?: boolean, ignoreDisabled?: boolean) => Promise<void>	False		Select all/deselect all table rows. crossPage indicates cross-page selection, default is false. ignoreDisabled controls whether to ignore rows with a disabled state, default is true.	0.1.0
clearSelect	() => Promise<void>	False		Clear the selection state of all rows.	0.1.0
expand	(key: any | any[], value: boolean) => Promise<void>	False		Handle the expand/collapse state of table rows.	0.1.0
clearExpand	() => Promise<void>	False		Clear the expanded/collapsed state of all rows.	0.1.0
filter	(key: number | string | symbol, value: any[]) => Promise<void>	False		Handle the filter state of table columns.	0.1.0
clearFilter	() => Promise<void>	False		Clear the filter state of all columns.	0.1.0
sort	(key: number | string | symbol, value: 'none' | 'asc' | 'desc') => Promise<void>	False		Handle the sort state of table columns.	0.1.0
clearSort	() => Promise<void>	False		Clear the sort state of all columns.	0.1.0

TableData

Attribute	Type	Optional	Default	Description	Version
expand	boolean | string | (( arg: Pick<TableOptionsArg, 'record' | 'rowIndex'>) => VNode | string | JSX.Element | null | void)	True		Configuration for expanded row content.	0.1.0
disabled	boolean	True	false	Whether row selection is disabled.	0.1.0
[x: string | number | symbol]	any	True		Other properties.	0.1.0

TableColumn

Attribute	Type	Optional	Default	Description	Version
key	number | string | symbol	False		Unique identifier for the column.	0.1.0
label	string	True		Text displayed in the column header.	0.1.0
field	string	True		The data field name corresponding to the cell.	0.1.0
width	number	True	80	Column width setting.	0.1.0
minWidth	number	True	0	Minimum width setting for the column.	0.1.0
align	'left' | 'center' | 'right'	True	'left'	Cell text alignment.	0.1.0
fixed	'left' | 'right' | 'none'	True	'none'	Column fixed position setting.	0.1.0
slotName	string	True		Slot name for cell content.	0.1.0
render	string | ((arg: TableOptionsArg) => VNode | string | JSX.Element | null | void)	True		Cell content render function or name.	0.1.0
labelSlotName	string	True		Slot name for header cell content.	0.1.0
labelRender	string | ((arg: Omit<TableOptionsArg, 'record'>) => VNode | string | JSX.Element | null | void)	True		Header cell content render function or name.	0.1.0
children	TableColumn[]	True		Collection of child columns, used for multi-level headers.	0.1.0
filterable	TableFilterable	True		Filter configuration for the column.	0.1.0
sortable	TableSortable	True		Sort configuration for the column.	0.1.0
cellProps	RestAttrs	True		Cell attributes object.	0.1.0
labelCellProps	RestAttrs	True		Header cell attributes object.	0.1.0
contentProps	RestAttrs	True		Cell content attributes object.	0.1.0
labelContentProps	RestAttrs	True		Header content attributes object.	0.1.0

TableBordered

Attribute	Type	Optional	Default	Description	Version
table	boolean	True	true	Table outer border.	0.1.0
row	boolean	True	true	Table row horizontal border.	0.1.0
col	boolean	True	true	Table column vertical border.	0.1.0
head	boolean	True	true	Border between the header area and the content area.	0.1.0
side	boolean	True	true	Borders on the left and right sides of the table; only takes effect when bordered.table or bordered is true.	0.1.0

TableSelection

Attribute	Type	Optional	Default	Description	Version
multiple	boolean	True	false	Whether multiple selection is enabled.	0.1.0
showSelectAll	boolean	True	true	Whether to show the select-all button; only effective when selection.multiple is true.	0.1.0
selectAllMethod	(value: boolean, preState: { value: boolean, indeterminate: boolean }, arg: { originData: TableData[], currentData: TableData[], paginatedData: TableData[], page: number, pageSize: number }) => any[] | Promise<any[]>	True		Customizes the selectedKeys value updated during a select‑all operation.	0.1.0
supersetSelectAllRef	'current' | 'all'	True	'current'	Configures the superset referenced for the select‑all checkbox's checked status.	0.1.0
label	string	True		Header text for the row selection column.	0.1.0
width	number	True	48	Width of the row selection column.	0.1.0
minWidth	number	True	0	Minimum width of the row selection column.	0.1.0
fixed	boolean	True	false	Whether the row selection column is fixed; forced to the left when there are left-fixed columns.	0.1.0
onlyCurrent	boolean	True	false	Whether selected rows should only include rows in the current data prop.	0.1.0
cellProps	RestAttrs	True		Column cell properties object.	0.1.0
labelCellProps	RestAttrs	True		Column header cell properties object.	0.1.0
contentProps	RestAttrs	True		Column cell content properties object.	0.1.0
labelContentProps	RestAttrs	True		Column header content properties object.	0.1.0

TableExpandable

Attribute	Type	Optional	Default	Description	Version
defaultExpandAllRows	boolean	True	false	Whether all rows are expanded by default.	0.1.0
label	string	True		Header text for the expand-button column.	0.1.0
width	number	True	48	Width of the expand-button column.	0.1.0
minWidth	number	True	0	Minimum width of the expand-button column.	0.1.0
fixed	boolean	True	false	Whether the expand-button column is fixed; forced to the left when there are left-fixed columns.	0.1.0
cellProps	RestAttrs	True		Column cell properties object.	0.1.0
labelCellProps	RestAttrs	True		Column header cell properties object.	0.1.0
contentProps	RestAttrs	True		Column cell content properties object.	0.1.0
labelContentProps	RestAttrs	True		Column header content properties object.	0.1.0

TableSummary

Attribute	Type	Optional	Default	Description	Version
data	TableData | TableData[]	True		Summary row data.	0.1.0
placement	'end' | 'start'	True	'end'	Placement of the summary row.	0.1.0
summaryText	string | string[]	True		Text for the first column of the summary row; if an array, applies to the corresponding indexed summary row; if a string, applies to all summary rows.	0.1.0
fixed	boolean	True	true	Whether the summary row is fixed; when the summary row is placed at the start of the data area, fixing the summary row requires fixedHead to be true.	0.1.0
spanMethod	(options: TableOptionsArg) => void | { colspan?: number, rowspan?: number }	True		Method for merging cells in the summary row.	0.1.0

TableFilterable

Attribute	Type	Optional	Default	Description	Version
filterOptions	(string | TableFilterOption)[]	True		Filter options for the column.	0.1.0
filterMethod	(filteredValue: any[], record: TableData, field?: string) => boolean	True		Function to determine whether a record matches the selected filters.	0.1.0
defaultFilterValue	any[] | null	True		Default filter values.	0.1.0
multiple	boolean	True	false	Whether multiple filter options can be selected.	0.1.0
popoverProps	Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>	True		Additional popover properties for the filter.	0.1.0

TableSortable

Attribute	Type	Optional	Default	Description	Version
orders	('asc' | 'desc')[] | Readonly<('asc' | 'desc')[]>	True		Sort directions available for the column.	0.1.0
sortMethod	'custom' | ((a: TableData, b: TableData, order: 'asc' | 'desc', field?: string) => number)	True		Sort method for the column.	0.1.0
defaultSortOrder	'asc' | 'desc' | 'none' | null	True		Default sort direction for the column.	0.1.0
multiple	boolean	True	false	Whether multi-column sorting is enabled.	0.1.0
priority	number	True	0	Priority for multi-column sorting; higher values take precedence.	0.1.0

TablePagination

The paginateMethod field controls the pagination method inside the table component. When set to 'auto', the table will paginate the data based on the page capacity. When set to 'custom', no such behavior will occur; this configuration is often used for backend pagination.

export type TablePagination = {
	paginateMethod?: 'custom' | 'auto'
} & PaginationProps &
	EmitEvent<PaginationEvents> &
	RestAttrs

TableOptionsArg

export type TableOptionsArg = {
	rowIndex: number
	colIndex: number
	record: TableData
	column: TableColumn
}

Option

export interface Option<T = any> {
	value: T
	label: string
}

TableFilterOption

export interface TableFilterOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}

SortOrder, FilterValue

export type SortOrder = {
	[key: string | number | symbol]: 'asc' | 'desc' | 'none' | null | undefined
}

export type FilterValue = {
	[key: string | number | symbol]: any[] | null | undefined
}

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}