Interface ColumnDefIf

false: this column never holds cell formulas (TableOptionsIf.cellFormulas) – "=…" stays text (free text, notes). Default: every data column of a table with cellFormulas.

Example

ColumnDef.create({ property: "note", editable: TrueFn, cellFormulas: false })
Copy

Since

1.1.99

CSS classes per area – classes.header, .body, .footer. The constants bodyLeft, allRight … are ready-made maps for the alignment.

Converts the text of the editor before it is written into the model, e.g. editInputPipeForNumber.

The cells of this column can be edited (double-click or F2), e.g. TrueFn.

See

Training: Inline editing

The editor of this column in Excel-style editing (TableOptionsIf.editing): "text", "number", "date" or a factory for an own CellEditorIf. Without it the table chooses by the value (numbers → number editor, dates → date editor, otherwise text). A column with an own getEditRenderer keeps that editor (inside the cell, as before).

Example

ColumnDef.create({ property: "status", editable: TrueFn, editor: () => SelectCellEditor.create(["open", "paid"]) })
Copy

Since

1.1.99

The value a cleared cell gets (Delete/Backspace in Excel-style editing), e.g. null or 0. Default: EditingOptionsIf.emptyValue ("").

Example

ColumnDef.create({ property: "quantity", editable: TrueFn, emptyValue: 0 })
Copy

Since

1.1.99

The formula of a formula column (ColumnDef.create({ formula }) compiles it into the valueGetter), e.g. "[price] * [quantity] * 1.19". Informational – change it with TableApi.setColumnFormula.

See

Live demo: formulas · Training: Formulas your users can type

Since

1.1.95

The editor of this column. Default: TableOptions.getEditRenderer (a text input, InputCellRenderer).

Example

getEditRenderer: () => new SelectCellRenderer(["open", "paid"].map(s => new ValueLabel(s, s)))
Copy

Text of the header cell (used when the header is built from the column definitions).

Whether the column is shown. Hidden columns are not rendered, copied or exported.

Example

ColumnDef.create({ property: "category", headerLabel: "Category", isVisible: FalseFn })
Copy

Upper limit for percentage widths ("%"). Not applied to pixel widths or to resizing with the mouse.

Lower limit for percentage widths ("%"). Not applied to pixel widths or to resizing with the mouse.

Property of the row object shown in this column ("customer"). With nested objects a path like "address.city".

Cell renderers per area – rendererMap.header, .body, .footer. Without a renderer the value is shown as text.

Example

column.rendererMap.body = new NumberCellProgressBarCellRenderer(20, false);
column.rendererMap.footer = new EuroRenderer();     // an own CellRendererIf
Copy

See

Training: Cell renderers

Row drag: the body cells of this column get a drag handle (true, or a function that decides per row – e.g. no handle for locked rows). Dragging the handle moves the row (see TableOptionsIf.rowDragOptions); the keyboard alternative is Ctrl+Alt+↑/↓. TableFactory.createTableModel({ rows, rowDrag: true }) sets it on the first data column.

Example

ColumnDef.create({ property: "title", headerLabel: "Task", rowDrag: (task: { locked: boolean }) => !task.locked })
Copy

Since

1.1.95

Shows the numbers of the column differently without changing the data: share of the column total, running total, rank … (see ShowValuesAs). Change it at runtime with TableApi.setShowValuesAs.

Example

ColumnDef.create({ property: "total", headerLabel: "Share", showValuesAs: "percentOfColumnTotal" })
Copy

See

Training: Show values as

Since

1.1.95

Own comparison of two cell values (and their rows), like for Array.prototype.sort.

Example

sortComparator: (a: string, b: string) => a.localeCompare(b, "de")     // "Müller" before "Nordlicht"
Copy

See

Training: Sorting

Show the sort icon in the header. Default: follows sortable resp. sortState.

The sort icon shown in the header: "asc", "desc" or "" (none). It only sets the icon – sort the rows once with TableModelIf.doSort to match it.

Order of the sort states on repeated double-clicks. Default: TableOptions.sortOrder (["asc", "desc"]).

The column can be sorted by a double-click on its header (e.g. TrueFn).

Checks an edited, filled or pasted value (after editInputPipe): return a message for an invalid value, undefined for a valid one. Batch edit: invalid values are marked (ge-table-cell-invalid, the message as tooltip) and block TableApi.commitBatchEdit; otherwise an invalid value is not written.

Example

ColumnDef.create({
  property: "price", headerLabel: "Price", editable: TrueFn, editInputPipe: editInputPipeForNumber,
  validate: (value: unknown) => typeof value === "number" && value >= 0 ? undefined : "A price is a number ≥ 0",
})
Copy

Since

1.1.96

A calculated column: computes the value from the row instead of reading property (the data stays unchanged). Sorting, filter (TableApi.getRowValue), copy, Excel, totals (footerAggregates) and row groups use the computed value. property stays the id of the column (state, footerAggregates, other formulas). Without a ColumnDefIf.valueSetter the column cannot be edited.

Supported by the models of TableFactory.createTableModel({ rows }), trees, row groups (not by array-of-arrays models; an own AreaModel calls it itself).

Example

ColumnDef.create({ property: "total", headerLabel: "Total", sortable: TrueFn,
                   valueGetter: (o: Item) => o.price * o.quantity })
Copy

See

Live demo: formulas & calculated columns · Training: Calculated columns, “Show values as” and formulas

Since

1.1.95

Makes a calculated column editable: writes the edited value back into the row (return false to reject).

Example

valueSetter: (o: Item, v: unknown) => { o.price = Number(v) / o.quantity; }
Copy

Since

1.1.95

Width of the column: px120, new Size(10, "%") or new Size(1, "weight"). See SizeUnitType.