const tableOptions: TableOptionsIf = {
  ...new TableOptions(),
  ariaLabelledBy: "orders-title",           // the visible heading names the grid
  ariaTexts: {                              // what the screen reader says – in your language
    sorted: (column, state) => state ? `Sortiert nach ${column}` : "Unsortiert",
    filtered: rowCount => `${rowCount} Zeilen`
  }
};
tableApi.announce("12 new orders arrived"); // your own announcement

tableApi.showLoadingOverlay();                      // CSS spinner + "Loading…"
const orders: Order[] = await fetch("/api/orders").then(r => r.json());
tableApi.setRows(orders);
tableApi.repaintHard();
tableApi.hideOverlay();         // 0 rows → "No rows to show" by itself,
                                // a filter without hits → "No matching rows"
// React, Vue, Svelte, Angular …: <GuiexpertTable loading={isLoading} … />

const tableOptions: TableOptionsIf = {
  ...new TableOptions(),
  autoRestoreOptions: {
    ...new AutoRestoreOptions<Order>(),
    getStorageKeyFn: () => "orders",              // localStorage["orderstableState"]
    getRowId: (order: Order) => order.id,
    autoRestoreColumnLayout: true,                // order, widths, hidden columns
    autoRestoreSortingState: true,
    autoRestoreSelectedState: true
  }
};
const json = tableApi.getState();                 // or: send it to your server
tableApi.applyState(json);

const tableModel = TableFactory.createTableModel({
  rows: orders,
  rowNumbersVisible: true    // or { mode: "original", format: n => n.toLocaleString() }
});

const tableModel = TableFactory.createTableModel({
  rows: orders,
  footerAggregates: { quantity: "sum", total: "sum" }     // follows filter and sorting
});
const { count, sum, avg } = tableApi.getSelectionAggregates();   // the selected cells

const tableModel = RowGroupFactory.createTableModel({
  rows: orders,
  groupBy: ["country", "city"],
  aggregations: { quantity: "sum", total: "sum" }
});
tableApi.setRowGroupBy(["category"]);      // regroup at runtime

const tableModel = PivotFactory.createTableModel({
  rows: orders,
  rowFields: ["country", "city"],
  columnFields: ["year"],
  values: ["total"]                          // sum of the revenue per cell
});
tableApi.setPivotConfig({ columnFields: ["category"] });   // pivot again

const columnDefs = [
  ColumnDef.create({ property: "product", headerLabel: "Product" }),
  ColumnDef.create({ property: "net", headerLabel: "Net",
    valueGetter: (o: Item) => o.price * o.quantity }),
  ColumnDef.create({ property: "gross", headerLabel: "Gross",
    formula: "ROUND([net] * 1.19, 2)" }),
  ColumnDef.create({ property: "share", headerLabel: "Share",
    valueGetter: (o: Item) => o.price * o.quantity, showValuesAs: "percentOfColumnTotal" })
];
tableApi.setColumnFormula("gross", "ROUND([net] * 1.07, 2)");   // from an input field

const tableModel = TableFactory.createTableModel({ rows: tasks, rowDrag: true });
listener.onRowDragEnd = (evt: GeRowDragEvent<Task>) => {
  if (evt.moved) save(tasks);          // tasks is already in the new order
};

const tableOptions: TableOptionsIf = {
  ...new TableOptions(),
  getSelectionModel: () => new SelectionModel("range", "multi"),
  fillHandle: true,                           // drag the corner of the selection
  batchEdit: true                             // collect changes, mark them
};
saveButton.onclick = async () => {
  await sendToServer(tableApi.getPendingChanges());
  tableApi.commitBatchEdit();                 // or cancelBatchEdit()
};

const tableOptions: TableOptionsIf = {
  ...new TableOptions(),
  masterDetail: {
    detailHeight: 180,
    detailRenderer: (container, order: Order, ctx) => {
      ctx.createTable({ tableModel: TableFactory.createTableModel({ rows: order.items }) });
    }
  }
};
tableApi.setDetailExpanded(0, true);

const tableOptions: TableOptionsIf = {
  ...new TableOptions(),
  direction: "rtl"            // or "auto": from <html dir="rtl">
};