TableColumn

The configuration class for Table columns.

TableColumn is a plain class (not a custom element) that manages rendering, header creation, and cell lifecycle for a single column in a Table. Cells delegate their rendering and behavior to their column instance.

Column Types

Columns are resolved through a type registry on the Table class. When a column config includes a type string, the Table looks it up in Table.columnTypeRegistry and instantiates that class instead of the default TableColumn.

Built-in types

Table ships with one type:

Type	Class	Description
`"default"`	`TableColumn`	Standard read-only table cell

Spreadsheet extends the registry with editable types:

Type	Class	Description
`"default"`	`SpreadsheetColumn`	Editable text cell (click to edit)
`"select"`	`SelectColumn`	Dropdown select input
`"number"`	`NumberColumn`	Numeric input, parses pasted values as floats
`"checkbox"`	`CheckboxColumn`	Checkbox toggle
`"radio"`	`CheckboxColumn`	Radio toggle (same class as checkbox)
`"readonly"`	`ReadonlyColumn`	Non-editable cell, paste disabled

Creating a custom column type

Extend TableColumn (or SpreadsheetColumn for spreadsheet features).
Override methods like render, renderCell, or initialize as needed.
Optionally set a custom static Cell or static HeaderCell class.
Register the type on the Table (or Spreadsheet) class.

Example

Creating and registering a custom column type

import Table from 'komps/table';
import TableColumn from 'komps/table/column';

class CurrencyColumn extends TableColumn {
    render (record) {
        const value = record[this.attribute];
        return '$' + Number(value).toFixed(2);
    }
}

Table.columnTypeRegistry.currency = CurrencyColumn;

new Table({
    data: records,
    columns: [
        { header: 'Name', render: r => r.name },
        { header: 'Price', type: 'currency', attribute: 'price' }
    ]
})

Constructor


new TableColumn(options)

options :


            
                Object

optional

type :


            
                string

optional

Key into Table.columnTypeRegistry that determines which column class to instantiate. Defaults to "default".

frozen :


            
                boolean

optional

Make column stay in place when table body scrolls

class :


            
                string

optional

classes to append to header and cells (space separated)

render :


            
                function

optional

Render method for the cell. Receives (record, cell, columnConfiguration, table)

header :

optional

Render method for the header. Receives (columnConfiguration, table)

width :


            
                string

optional

Valid value for css grid template (i.e. px, percent, min-content...)

splitInto :

optional

split cell into multiple rows by the result of this method. If String, key is called on record. If Function, function is called with record as argument.

Column attribute changes fire cancellable events on the parent Table:

headerChange / headerChanged — when the header value changes
indexChange / indexChanged — when the column index changes
widthChange / widthChanged — when the column width changes

Call event.preventDefault() on the pre-action event to cancel default behavior.