Ui3nTable

Ui3nTable is a high-performance tabular data grid built on top of CSS Grid, supporting dynamic column templates, declarative sorting states, and context-aware row selection layers.

Sticky columns

Set config.stickyColumns to pin leading visible columns while the rest scroll horizontally.

stickyColumns: 2 // pin first two visible columns; 0 / omit = off

Requirements:

• Value is clamped to [0, visibleColumns.length - 1] (at least one column remains scrollable).
• Every visible column must define an absolute width in config.columnStyle[key].width (px, rem, em, …). Values like %, fr, auto, or missing width disable the mode and emit a console.warn.
• In sticky mode the table content width is the sum of column widths (not stretched with fr/%).
• Custom #row slot: render one direct child node per column. Apply sticky yourself for the first stickyColumnsCount children using stickyColumnLefts[i] as left.
• Slot scope includes stickyColumnsCount and stickyColumnLefts (after validation/clamp).

Custom scrollbar

Set config.scrollbar to replace native browser overflow with Ui3nScrollbar.

config: Ui3nTableConfig<Row> = {
  scrollbar: {
    axes: 'both', // 'vertical' | 'horizontal' | 'both'
    vertical: { thumbColor: '#4caf50', trackWidth: 8 },
    horizontal: { thumbColor: '#2196f3', trackHeight: 12 },
  },
};

• Omit config.scrollbar to keep native overflow.
• When custom scrollbar is enabled, the table is wrapped in a single Ui3nScrollbar scrollport.
• Sticky header and stickyColumns work with custom scrollbar (one shared scroll ancestor).
• The component emits axis-scoped scroll events (scroll:vertical, scroll:horizontal) from the internal scrollbar.

Props

Name	Type	Default	Description
config*	Ui3nTableConfig<T, keyof T>	—	Table configuration
head*	Ui3nTableHeadProps<T>[]	—	Table header
body*	Ui3nTableBodyProps<T, keyof T>	—	Table body

Events

Event Name	Arguments / Value Type	Description
change:sort	Ui3nTableSort<T>	Emitted when sort changes
select:row	T[]	Emitted when row is selected

Slots

Slot Name	Scope Props (v-slot)	Description
#no-data	—	No data slot
#unused-place	—	Unused place slot
#group-actions	{ selectedRows: T[]; }	Group actions slot
#row	Ui3nTableBodyRowSlotScope<T, keyof T>	Row slot

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-table-base-head-height	36px
--ui3n-table-body-row-height	28px
--ui3n-table-cell-font-size	12px
--ui3n-table-columns-width	auto
--ui3n-table-group-actions-bg-color	var(--color-bg-block-primary-default)
--ui3n-table-group-actions-height	48px
--ui3n-table-header-bg-color	var(--color-bg-table-header-default)
--ui3n-table-header-color	var(--color-text-table-primary-default)
--ui3n-table-header-font-size	14px
--ui3n-table-nodata-color	var(--color-text-control-secondary-default)
--ui3n-table-nodata-height	48px
--ui3n-table-padding-inline	16px
--ui3n-table-row-bg-color-selected	var(--color-bg-control-primary-hover)
--ui3n-table-row-checkbox-width	16px
--ui3n-table-row-color	var(--color-text-table-primary-default)
--ui3n-table-scrollport-width	100%

Ui3nTableSortIcon

Internal presentation control used within table headers to visualize directional column sorting transitions.

Props

Name	Type	Default	Description
size	string | number | undefined	16	Icon size
color	string | undefined	"var(--color-icon-table-primary-default)"	Icon color
value*	"asc" | "desc"	—	Icon value

Usage Examples

Simple table

Basic read-only layout displaying flat structured dataset objects.

Simple table

Basic table with data

Table with sorting

Demonstrates intercepting header clicks and rendering automated direction sort icon indicators.

Table with sorting

Table with sortable columns

Table with selection

Demonstrates enabling row checkboxes, batch operations triggering, and managing global form selection arrays.

Table with selection

Table with row selection

Sticky first column

Wide table with absolute column widths; first column stays fixed during horizontal scroll.

Sticky first column

Horizontal scroll with one pinned leading column

Sticky two columns

Wide table with the first two leading columns pinned.

Sticky two columns

Horizontal scroll with two pinned leading columns

Custom scrollbar

Wide table with sticky header, one sticky column, and custom Ui3nScrollbar tracks.

Custom scrollbar

Sticky header + first column with custom dual-axis scrollbar