Editable Table

Editable tables are useful when related values need to be authored in rows instead of isolated fields.

Mixed Field Types

An editable table can combine text, selects, booleans, colors, dates, and longer freeform notes in the same row model.

Cell Validation

Validation can be targeted per cell by combining a fieldName with a cellErrors map.

Derived Columns

Handle and value columns can derive from a source field without overwriting existing content.

Compact Selection Columns

Use thin checkbox columns or radio-style exclusivity when the table is modeling option lists.

API

Attributes & Properties

Name	Description
addRowLabel add-row-label	Type string
allowAdd allow-add	Type boolean Default true
allowDelete allow-delete	Type boolean Default true
allowInsert allow-insert	Show Insert above / Insert below in the row ellipsis menu. Insert still requires allowAdd (disabled at max rows when the host turns add off). Type boolean Default true
allowReorder allow-reorder	Type boolean Default true
cellErrors	Errors keyed by ${rowIndex}.${columnName} or ${fieldName}.${rowIndex}.${columnName}. Type Record<string, string[] | string> Default {}
customError custom-error	Custom validation message; also settable via setCustomValidity(). Type string | null Default null
disabled	Disables the control and excludes it from constraint validation. Type boolean Default false
fieldName field-name	Optional form-field prefix for cellErrors keys. Looks up ${fieldName}.${rowIndex}.${columnName} then falls back to ${rowIndex}.${columnName}. Type string
getRowMenuItems	Extra ellipsis-menu items for a row (data descriptors — not React nodes). Selection fires pk-row-menu-select with { rowIndex, row, item, action, value }. Type PkEditableTableGetRowMenuItems | null Default null
maxRows max-rows	Optional hard cap on row count. When set, add / insert / paste expansion stop at this length even if allowAdd is still true mid-batch. Type number | null Default null
modifyColumn	Per-cell column override (e.g. swap value column to a select based on another cell). Return a partial column merged over the base definition for that render. Type PkEditableTableModifyColumn | null Default null
modifyRow	Per-row presentation — class / accessible name / tone on the <tr>. Type PkEditableTableModifyRow | null Default null
name	Name submitted with form data. Type string | null Default null
newRowDefaults	Merged into each newly added row after column defaults. Type Record<string, unknown> Default {}
required	Marks the control as required for form submission. Type boolean Default false

Methods

Name	Description
checkValidity()	Runs constraint validation without showing the browser UI.
reportValidity()	Runs constraint validation and shows the browser UI when invalid.
resetValidity()	Clears custom errors and re-syncs validity state.
setCustomValidity(message: string)	Sets or clears a custom validation message.

Events

Name	Description
change	—
input	—
pk-cell-change	—
pk-change	—
pk-row-menu-select	—

Custom States

Name	Description	CSS selector
disabled	The control is disabled.	:state(disabled)
invalid	The control currently fails constraint validation.	:state(invalid)
optional	The control is not required.	:state(optional)
required	The control is required.	:state(required)
user-invalid	Invalid after the user has interacted with the control.	:state(user-invalid)
user-valid	Valid after the user has interacted with the control.	:state(user-valid)
valid	The control currently passes constraint validation.	:state(valid)

Dependencies

This component registers the following elements when it loads.

Name	Description
pk-button	—
pk-checkbox	—
pk-color-input	—
pk-combobox	—
pk-date-picker	—
pk-dropdown-item	—
pk-dropdown-menu	—
pk-input	—
pk-lightswitch	—
pk-option	—
pk-select	—
pk-textarea	—
pk-time-picker	—