Interface CreateTableModelPara

Model of the body. Default: built from rows (objects or tree rows) or bodyData. See AreaModel for own models.

The body as rows of values (any[][]).

Number of columns. Default: derived from columnDefs, headerData or columnSizes.

The columns: property, header label, width, classes, renderers, sorting, editing. See ColumnDef.

Column letters A, B, … as an extra header row above the header labels (like a spreadsheet; for cell formulas, TableOptionsIf.cellFormulas). A click on a letter selects the column (selection type "range"). Row number and checkbox columns get no letter. Only with the default header (labels or headerData).

Example

const tableModel = TableFactory.createTableModel({ rows, columnDefs, rowNumbersVisible: { mode: "original" }, columnLetters: true });
Copy

Since

1.1.99

Column widths in px – the simple alternative to columnDefs (e.g. with bodyData).

Row heights of header, body and footer in px. Default: tableOptions.defaultRowHeights, otherwise 34 / 34 / 34.

Number of columns fixed on the left (side "west"). Default 0.

Number of columns fixed on the right (side "east"). Default 0.

A footer with totals that follow filter and sorting (AreaModelAggregateFooter): { total: "sum" } (one row – the key is the property of the column), [{ label, aggregates }, …] (several rows) or full AggregateFooterOptionsIf. Row height: defaultRowHeights.footer. Ignored with an own footerAreaModel (warning); footerData is ignored with it (warning).

Example

const tableModel = TableFactory.createTableModel({
  rows: orders,
  columnDefs,
  footerAggregates: { quantity: "sum", total: "sum" }       // footer: "100,000 rows" | … | 549,812 | 27,481,033.5
});
Copy

See

Live demo: totals & aggregation · Training: Totals in one option

Since

1.1.94

Model of the footer. Default: footerAggregates, footerData, otherwise no footer.

Footer rows as values (static – they don't follow filter or edits).

Selection model factory. Default: tableOptions.getSelectionModel.

Model of the header. Default: one header row from the headerLabels of columnDefs, or headerData.

Header rows as values – several rows are possible.

A width in px for all columns; -1 (default) = use the column definitions.

Width of the parent element in px, used for percentage column widths before the first render (default 400).

Which properties of rows become columns, in this order (ignored if columnDefs is given).

Show a checkbox column for every row. Default false.

Row drag: true puts a drag handle into the first data column (behind row numbers and checkboxes) – sets ColumnDefIf.rowDrag on that column definition. Options: TableOptionsIf.rowDragOptions. Default false.

Example

const tableModel = TableFactory.createTableModel({ rows: orders, rowDrag: true });
Copy

See

Live demo: row drag · Training: Dragging rows into order

Since

1.1.95

Row numbers (1, 2, 3 …) in a column in front of all others, fixed on the left: true or options (RowNumberOptionsIf). Puts a RowNumberColumnDef in front of columnDefs and adds 1 to fixedLeftColumnCount; headerData/footerData get an empty cell in front. Default false.

The column is a real column: the indices of all other columns are one higher – use properties where you can (TableApi.getColumnIndex). With bodyData or own area models the flag is ignored (with a warning), because their columns would shift – put a RowNumberColumnDef into the column definitions of your models yourself.

Example

const tableModel = TableFactory.createTableModel({ rows: orders, columnDefs, rowNumbersVisible: true });
Copy

See

Live demo: row numbers · Training: Row numbers

Since

1.1.93

The rows as objects (T[]) or tree rows from TreeFactory.buildTreeRows.

Options of the table; the factory reads defaultRowHeights, getSelectionModel and showCheckboxWihoutExtraColumn.