Infinite UI Demo

Column Configuration

A column sets its alignment, width, and sortability. WidthPercent shares the row width, MaxWidthClass caps a long cell, and MinWidthClass holds a floor. A column with a SortKey renders a sort button; one without renders plain text.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns: []uiStructural.DataTableColumnSettings[Record]{
		{Label: "Name", SortKey: "name", WidthPercent: 20, CellRenderer: nameCell},
		{Label: "Description", MaxWidthClass: "max-w-72 truncate", CellRenderer: descriptionCell},
		{Label: "Status", Alignment: uiStructural.DataTableAlignmentCenter, WidthPercent: 15, CellRenderer: statusCell},
		{Label: "CPU cores", SortKey: "cpuCores", Alignment: uiStructural.DataTableAlignmentRight, WidthPercent: 12, CellRenderer: cpuCell},
		{Label: "Created at", MinWidthClass: "min-w-28", CellRenderer: createdAtCell},
	},
	Rows: records,
})

Rows Configuration

RowIdResolver adds the selection column and identifies each row. RowLabelResolver names the row checkbox for screen readers. CheckboxShape, CheckboxSize, and CheckboxCheckedColor change the selection checkbox. Select a row to see the emerald checkbox and the selection count.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:              columns,
	Rows:                 records,
	RowIdResolver:        func(record Record) string { return record.Id },
	RowLabelResolver:     func(record Record) string { return record.Name },
	CheckboxShape:        uiForm.CheckboxInputShapeRounded,
	CheckboxSize:         uiForm.CheckboxInputSizeSm,
	CheckboxCheckedColor: "emerald-500",
})

Filters

Each filter renders an editor and an active chip. InitialFilterValues seeds the starting values. A filter change updates the chips and the filter values.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:             columns,
	Rows:                records,
	Filters:             filters,
	InitialFilterValues: map[string]any{"status": "running"},
})

Search Box

The table renders a default search box when the query template carries the search placeholder. InitialSearchQuery seeds the starting text. SearchBoxAlignment places the box left, center, or right. Pass SearchBox to replace the default box.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:          columns,
	Rows:             records,
	QueryUrlTemplate: "/records?search={search}",

	// OptionalFields
	InitialSearchQuery: "alpha",
	SearchBoxAlignment: uiStructural.DataTableAlignmentCenter,
})

Header Actions

HeaderActions renders in the toolbar. The button here dispatches an event the panel counts.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns: columns,
	Rows:    records,
	HeaderActions: uiControl.Button(uiControl.ButtonSettings{
		Label:       "Sync",
		IconLeft:    "ph-arrows-clockwise",
		OnClickFunc: "$dispatch('demo:header-action')",
		Size:        uiControl.ButtonSizeSm,
	}),
})

Bulk Actions

BulkActions renders in the toolbar only while at least one row is selected. Select a row to reveal the action.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns: columns,
	Rows:    records,
	RowIdResolver: func(record Record) string { return record.Id },
	BulkActions: uiControl.Button(uiControl.ButtonSettings{
		Label:           "Archive",
		IconLeft:        "ph-archive",
		OnClickFunc:     "selectedRowIds = []",
		Size:            uiControl.ButtonSizeSm,
		BackgroundColor: "red-500/20",
		TextColor:       "red-200",
	}),
})

Row and Column Styling

HeaderClass paints the header row. IsStriped adds a zebra stripe. CellClass styles one column, and RowClassResolver styles each row from its data. A cell component that sets its own color overrides the row color.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns: []uiStructural.DataTableColumnSettings[Record]{
		{Label: "Name", CellClass: "font-bold", CellRenderer: nameCell},
		{Label: "Status", CellRenderer: statusCell},
		{Label: "CPU cores", Alignment: uiStructural.DataTableAlignmentRight, CellRenderer: cpuCell},
	},
	Rows: records,

	// OptionalFields
	HeaderClass: "bg-neutral-50/5",
	IsStriped:   true,
	RowClassResolver: func(record Record) string {
		if record.Status != "running" {
			return "text-neutral-400"
		}
		return ""
	},
})

Density and Header Text Case

Density changes the cell padding. HeaderTextCase changes the header capitalization. Both tables use the same columns and rows.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:        columns,
	Rows:           records,
	Density:        uiStructural.DataTableDensityDense,
	HeaderTextCase: uiStructural.DataTableHeaderTextCaseUpper,
})

Sticky Header

IsHeaderSticky pins the header and caps the scroll container, so the header stays visible while the body scrolls.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:        columns,
	Rows:           records,
	IsHeaderSticky: true,
})

Empty States

With no rows the table renders the EmptyState slot. Without the slot it renders the default message.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:    columns,
	Rows:       nil,
	EmptyState: DataTableDemoEmptyState(),
})