Table

A component for displaying data in rows and columns, supporting sorting, selection, and pagination.

Basic Usage

The most basic usage of the table.

ID	Name	Age	Email
1	Alice	24	alice@example.com
2	Bob	28	bob@example.com
3	Charlie	32	charlie@example.com
4	David	21	david@example.com

Example

Selection

Add row-selection property to enable multiple selection.

Selected Keys: []

	ID	Name	Status
	1	Alice	Active
	2	Bob	Inactive

Example

Sorting

Set sortable: true in the column configuration to enable sorting.

Current Sort: None

ID	Name	Age	Score
1	Alice	24	85
2	Bob	28	92
3	Charlie	21	78
4	David	32	95
5	Eve	24	88

Example

Advanced Usage

A comprehensive example including pagination, sorting, loading state, striped rows, borders, and custom column rendering.

ID	Name	Age	Status	Action
1	User 1	20	Active
2	User 2	21	Inactive
3	User 3	22	Active
4	User 4	23	Inactive
5	User 5	24	Active

Total 15 items

Example

API

Table Props

Property	Description	Type	Default
data	Data to display	any[]	[]
columns	Configuration of table columns	BrTableColumn[]	[]
rowKey	Key of row data, used for optimizing rendering	string | ((row: any) => string | number)	'id'
stripe	Whether to display striped rows	boolean	false
border	Whether to display vertical borders	boolean	false
hover	Whether to highlight row on hover	boolean	true
loading	Whether to show loading state	boolean	false
loadingText	Text to show in loading state	string	'Loading...'
emptyText	Text to show when data is empty	string	'No Data'
rowSelection	Whether to show selection column	boolean	false
maxHeight	Maximum height of the table	string | number	-
stickyHeader	Whether to fix the table header	boolean	false
pagination	Pagination configuration, false to hide	BrTablePagination | false	false

Table Events

Event Name	Description	Parameters
update:selection	Triggers when selection changes	(selectedRowKeys: (string|number)[], selectedRows: any[])
update:pagination	Triggers when pagination changes	(pagination: BrTablePagination)
sort	Triggers when sorting changes	(sort: BrTableSort)
row-click	Triggers when a row is clicked	(row: any, index: number, event: MouseEvent)

Table Slots

Slot Name	Description	Parameters
cell-[key]	Custom rendering for a specific column	{ row, column, index }

Column Configuration (BrTableColumn)

Property	Description	Type	Default
key	Unique identifier of the column	string	-
title	Column title	string	-
width	Column width	string | number	-
minWidth	Minimum column width	string | number	-
maxWidth	Maximum column width	string | number	-
align	Alignment	'left' | 'center' | 'right'	'left'
fixed	Whether column is fixed	'left' | 'right' | boolean	-
sortable	Whether column is sortable, custom for custom sort	boolean | 'custom'	false
render	Custom render function	(row: any, index: number) => any	-