Quick Example

TableBulkActionBar Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `table`

Code

                <script lang="ts">
 import { Table } from 'sv5ui';

 const data = [
  { name: 'Alice', email: 'alice@example.com', role: 'Admin' },
  { name: 'Bob', email: 'bob@example.com', role: 'Editor' }
 ];
</script>

<Table {data} />

Table

Custom implementation — no external dependency.

Basic

Auto-generates columns from data keys.

Name	Email	Role
Alice	alice@example.com	Admin
Bob	bob@example.com	User
Charlie	charlie@example.com	Editor

Rich Columns

Custom cell snippets with Avatar, Badge components.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Sorting

Default sort on Name (asc). Click headers to toggle.

#		Email
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Sorting: name (asc)

Global Filter

Filter across all columns.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Column Filters

Add filterable: true to a column definition to show an inline filter input below its header. Supports filterFn for custom matching logic.

#	Name	Email	Role	Status
1	U1 User 1	user1@example.com	Admin	active
2	U2 User 2	user2@example.com	User	inactive
3	U3 User 3	user3@example.com	Editor	pending
4	U4 User 4	user4@example.com	Admin	active
5	U5 User 5	user5@example.com	User	inactive
6	U6 User 6	user6@example.com	Editor	pending
7	U7 User 7	user7@example.com	Admin	active
8	U8 User 8	user8@example.com	User	inactive
9	U9 User 9	user9@example.com	Editor	pending
10	U1 User 10	user10@example.com	Admin	active

Full-Featured (Search + Filter + Sort + Pagination)

Compose <Input>, <Table>, and <Pagination> together using bind: for a full data-grid experience with no coupling.

		Email		Status
1	U1 User 1	user1@example.com	Admin	active
2	U2 User 2	user2@example.com	User	inactive
3	U3 User 3	user3@example.com	Editor	pending
4	U4 User 4	user4@example.com	Admin	active
5	U5 User 5	user5@example.com	User	inactive

50 users total

Row Actions

DropdownMenu in the last column for per-row actions.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Column Pinning

"#" pinned left, "Actions" pinned right. Scroll horizontally.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Row Pinning

Pin rows to the top. Alice and Charlie are pinned by default. Click the pin icon to toggle.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
3	CB Charlie Brown	charlie@example.com	Editor	active

2	BS Bob Smith	bob@example.com	User	inactive
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Pinned: 1, 3

Pinned rows (#1, #5, #12) stay at the top regardless of the current page.

#	Name	Email	Role	Status
1	U1 User 1	user1@example.com	Admin	active
5	U5 User 5	user5@example.com	User	inactive
12	U1 User 12	user12@example.com	Editor	pending

2	U2 User 2	user2@example.com	User	inactive
3	U3 User 3	user3@example.com	Editor	pending
4	U4 User 4	user4@example.com	Admin	active
6	U6 User 6	user6@example.com	Editor	pending
7	U7 User 7	user7@example.com	Admin	active
8	U8 User 8	user8@example.com	User	inactive
9	U9 User 9	user9@example.com	Editor	pending
10	U1 User 10	user10@example.com	Admin	active

3 pinned

Expandable Rows

Click the chevron to expand row details.

Name	Email	Role	Status
AJ Alice Johnson	alice@example.com	Admin	active
BS Bob Smith	bob@example.com	User	inactive
CB Charlie Brown	charlie@example.com	Editor	active
DP Diana Prince	diana@example.com	Admin	pending
EW Eve Wilson	eve@example.com	User	active

Parent-Child Rows

Expand departments to see sub-departments as a nested table.

Department	Manager	Employees	Budget
Engineering 3 teams	Alice Johnson	42	$2.1M
Design 2 teams	Eve Wilson	12	$600K
Marketing	Henry Zhang	8	$400K

Row Selection

Built-in checkbox column with select-all support.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

No rows selected

Selections persist across pages. Select some rows, then navigate.

#	Name	Email	Role	Status
1	U1 User 1	user1@example.com	Admin	active
2	U2 User 2	user2@example.com	User	inactive
3	U3 User 3	user3@example.com	Editor	pending
4	U4 User 4	user4@example.com	Admin	active
5	U5 User 5	user5@example.com	User	inactive
6	U6 User 6	user6@example.com	Editor	pending
7	U7 User 7	user7@example.com	Admin	active
8	U8 User 8	user8@example.com	User	inactive
9	U9 User 9	user9@example.com	Editor	pending
10	U1 User 10	user10@example.com	Admin	active

No rows selected

Bulk Actions

A real-world example of using TableBulkActionBar when items are selected. Try selecting some rows below.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Column Visibility

Toggle columns on/off.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

#	Name	Email	Role	Status
1	U1 User 1	user1@example.com	Admin	active
2	U2 User 2	user2@example.com	User	inactive
3	U3 User 3	user3@example.com	Editor	pending
4	U4 User 4	user4@example.com	Admin	active
5	U5 User 5	user5@example.com	User	inactive
6	U6 User 6	user6@example.com	Editor	pending
7	U7 User 7	user7@example.com	Admin	active
8	U8 User 8	user8@example.com	User	inactive
9	U9 User 9	user9@example.com	Editor	pending
10	U1 User 10	user10@example.com	Admin	active

1–10 of 50

Row Click

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Row Hover

Hover over rows to see the callback in action.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Hover over a row

Right-click a row to trigger the callback.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Body Top / Bottom Slots

Insert custom rows before and after data rows.

Product	Category	Price	Stock
Prices updated March 2026. All items in stock.
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45
AirPods Pro	Accessories	$249	100
Magic Keyboard	Accessories	$299	30
Studio Display	Electronics	$1,599	8
Showing 5 of 5 products

Polymorphic Root (as prop)

Render as <section> instead of <div>.

Q1 2026 Product Summary
Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45
AirPods Pro	Accessories	$249	100

Striped

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45
AirPods Pro	Accessories	$249	100
Magic Keyboard	Accessories	$299	30
Studio Display	Electronics	$1,599	8

Column Resizing

Drag the right edge of Name, Email, or Role headers to resize.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Sticky Header

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Loading — Replace Data

Data is hidden during loading.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Loading — Overlay

Data stays visible with a frosted overlay.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active
4	DP Diana Prince	diana@example.com	Admin	pending
5	EW Eve Wilson	eve@example.com	User	active

Loading Animations

carousel

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45

carousel-inverse

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45

swing

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45

elastic

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45

Empty State

Default

#	Name	Email	Role	Status
No data.

Custom

#	Name	Email	Role	Status
No users found

Size

Use the size prop to switch between compact, default, and spacious density presets.

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45
AirPods Pro	Accessories	$249	100
Magic Keyboard	Accessories	$299	30
Studio Display	Electronics	$1,599	8

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45
AirPods Pro	Accessories	$249	100
Magic Keyboard	Accessories	$299	30
Studio Display	Electronics	$1,599	8

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45
AirPods Pro	Accessories	$249	100
Magic Keyboard	Accessories	$299	30
Studio Display	Electronics	$1,599	8

Custom UI Overrides

Use the ui prop to override slot classes.

Bordered rows + colored header

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45
AirPods Pro	Accessories	$249	100
Magic Keyboard	Accessories	$299	30
Studio Display	Electronics	$1,599	8

Compact + no border

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45
AirPods Pro	Accessories	$249	100
Magic Keyboard	Accessories	$299	30
Studio Display	Electronics	$1,599	8

Custom Header Slot

Use the global headerSlot to customize all column headers.

#	Name	Email	Role	Status
1	AJ Alice Johnson	alice@example.com	Admin	active
2	BS Bob Smith	bob@example.com	User	inactive
3	CB Charlie Brown	charlie@example.com	Editor	active

Custom Cell Slot

Use the global cellSlot to customize all cells at once.

Name	Score	Grade
Alice	95	A
Bob	72	B
Charlie	58	C

Footer (Aggregation)

Use per-column footer snippet for totals/aggregation.

Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45
AirPods Pro	Accessories	$249	100
Magic Keyboard	Accessories	$299	30
Studio Display	Electronics	$1,599	8
Total (5 items)		$5,645	195

Caption (Accessibility)

The caption prop renders a sr-only caption for screen readers. Or use captionSlot for visible captions.

Product inventory — March 2026
Product	Category	Price	Stock
MacBook Pro	Electronics	$2,499	12
iPhone 16	Electronics	$999	45
AirPods Pro	Accessories	$249	100