Table

Configurable data table with fixed headers, optional column visibility toggling, flexible cell rendering, and row-level bar chart backgrounds.

Column visibility caveat: the built-in columnsEditable popup double-toggles visible in 0.0.34. Use the external settings example below or Table Settings instead. Keep column objects reactive and shared; Table captures its initial columns array and does not synchronize replacement definitions after mount. hideHeader also removes the built-in popup trigger. grow and shrink are mutually exclusive true flags; formatter and snippet are mutually exclusive renderers.

Comprehensive Example

Fixed and toggleable columns with all three cell rendering options: a style.cell function for Role, a snippet for Status, and a formatter for Last Login.

IDNameEmailRoleStatus
1User 1user1@example.comAdminActive
2User 2user2@example.comEditorInactive
3User 3user3@example.comViewerActive
4User 4user4@example.comAdminInactive
5User 5user5@example.comEditorActive
6User 6user6@example.comViewerInactive
7User 7user7@example.comAdminActive
8User 8user8@example.comEditorInactive
9User 9user9@example.comViewerActive
10User 10user10@example.comAdminInactive
11User 11user11@example.comEditorActive
12User 12user12@example.comViewerInactive
13User 13user13@example.comAdminActive
14User 14user14@example.comEditorInactive
15User 15user15@example.comViewerActive
16User 16user16@example.comAdminInactive
17User 17user17@example.comEditorActive
18User 18user18@example.comViewerInactive
19User 19user19@example.comAdminActive
20User 20user20@example.comEditorInactive
21User 21user21@example.comViewerActive
22User 22user22@example.comAdminInactive
23User 23user23@example.comEditorActive
24User 24user24@example.comViewerInactive
25User 25user25@example.comAdminActive

Row Bar Chart

Use rowStyle with createRowBarChartStyle to render proportional horizontal bars as row backgrounds.

ProductSalesStock
Product 1422682
Product 2541237
Product 393654
Product 4449750
Product 5444586
Product 6541716
Product 7207407
Product 8255383
Product 9266826
Product 1090754
Product 11502423
Product 12258632
Product 13276834
Product 14272971
Product 1589658
Product 1658252
Product 17393279
Product 18449438
Product 193341020
Product 20199226

External Column Settings

Open TableSettings from an external button to control column visibility without right-click.

IDNameEmail
1John Doejohn.doe@example.com
2Jane Smithjane.smith@example.com
3Sam Wilsonsam.wilson@example.com
4Alice Johnsonalice.johnson@example.com

Sizing, overflow and row activation

Use per-column widths and overflow overrides. This noScroll example fits columns using weighted widths and forces fixed layout despite layout=auto; vertical scrolling remains available. rowClick receives the row, full data, zero-based index and mouse or keyboard event. Fixed columns bypass cell overflow clipping in noScroll mode.

IDSummaryOwner
1Audit public exports, sources and types against installed 0.0.34Alice
2Update live examples and displayed sourceBob

Select a row with the pointer or keyboard. Columns fit without horizontal scrolling.