Heco UI

Table Component

A flexible table component with sorting, pagination, row selection, and expandable rows.

Basic Table

A simple table with basic styling.

A list of users
NameEmailStatus
User 1user1@example.comActive
User 2user2@example.comPending
User 3user3@example.comInactive
User 4user4@example.comActive
User 5user5@example.comPending
Total Users50

Sortable Table

A table with sortable columns.

Name
Email
Status
Role
User 1user1@example.comActiveAdmin
User 10user10@example.comActiveEditor
User 11user11@example.comPendingViewer
User 12user12@example.comInactiveGuest
User 13user13@example.comActiveAdmin

Advanced Table

A table with sorting, pagination, row selection, and expandable rows.

Name
Email
Status
Role
Last Login
Actions
User 1user1@example.com
Active
Admin8 days ago
User 10user10@example.com
Active
Editor22 days ago
User 11user11@example.com
Pending
Viewer13 days ago
User 12user12@example.com
Inactive
Guest6 days ago
User 13user13@example.com
Active
Admin9 days ago
User 14user14@example.com
Pending
Editor1 days ago
User 15user15@example.com
Inactive
Viewer19 days ago
User 16user16@example.com
Active
Guest7 days ago
User 17user17@example.com
Pending
Admin13 days ago
User 18user18@example.com
Inactive
Editor28 days ago
Showing 1 to 10 of 50 entries
Showper page
Page 1 of 5

Table Variants

Different table styles for various use cases.

Striped Table

NameEmailStatus
User 1user1@example.comActive
User 2user2@example.comPending
User 3user3@example.comInactive
User 4user4@example.comActive
User 5user5@example.comPending
User 6user6@example.comInactive

Bordered Table

NameEmailStatus
User 1user1@example.comActive
User 2user2@example.comPending
User 3user3@example.comInactive
User 4user4@example.comActive
User 5user5@example.comPending
User 6user6@example.comInactive

API Reference

Complete documentation of the Table component props.

Table Props

PropDescriptionTypeDefault
variantVisual style variant of the table"default" | "bordered" | "striped""default"
sizeSize of the table text and spacing"sm" | "md" | "lg""md"
sortColumnCurrently sorted columnstring-
sortDirectionDirection of sorting"asc" | "desc"-
onSortCallback when a sortable column is clicked(column: string) => void-

TablePagination Props

PropDescriptionTypeDefault
currentPageCurrent page numbernumberRequired
totalPagesTotal number of pagesnumberRequired
onPageChangeCallback when page changes(page: number) => voidRequired
pageSizeNumber of items per pagenumber-