Choose the columns with properties

In chapter 5 (First table) every key of the first row became a column. Usually you want a selection, in a certain order. TableFactory.createTableModel() takes the list as properties:

import { TableFactory, type TableModelIf } from "@guiexpert/table";
import type { Order } from "./data/orders";

const ORDER_PROPERTIES: (keyof Order)[] =
  ["id", "date", "customer", "country", "product", "quantity", "total", "status"];

export function createOrdersModel(orders: Order[]): TableModelIf {
  return TableFactory.createTableModel({ rows: orders, properties: ORDER_PROPERTIES });
}

1. Only rows → every key of the first row is a column (chapter 5 (First table)).
2. properties → selection and order of the columns.
3. (keyof Order)[] → a typo in a column name is a compile error, not an empty column.
4. The header label is the property in upper case. Own labels, widths and alignment: chapter 13 (ColumnDef).

Live rows + properties

▶ Run live demo

What else createTableModel accepts

TableFactory.createTableModel() is the universal entry point. It takes a partial CreateTableModelPara – the most important fields:

Other factory methods

// rows + column definitions (+ options, fixed columns)
TableFactory.buildByTypedRows<Order>(orders, columnDefs, tableOptions, fixedLeft, fixedRight);
// rows + header/footer rows as data
TableFactory.createByObjectArray<Order>(orders, headerRows, footerRows, fixedLeft, fixedRight, …);
// three area models of your own
TableFactory.createByAreaModels(headerModel, bodyModel, footerModel, fixedLeft, fixedRight, …);

See TableFactory.buildByTypedRows(), TableFactory.createByObjectArray() and TableFactory.createByAreaModels() for all parameters.

Next

Header labels, widths, alignment and hidden columns: chapter 13 (ColumnDef).