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">
};

const { tableModel, tableOptions } = SpreadsheetFactory.create({
  data: [
    ["Item", "Qty", "Price", "Net"],
    ["Laptop", 4, 1299, "=B2*C2"],
    ["Monitor", 8, 349, "=B3*C3"],
    ["Total", "", "", "=SUM(D2:D3)"]
  ]
});
// existing tables: spreadsheet: true in the options

@Component({
  selector: "app-orders",
  imports: [TableSignalComponent],
  template: `
    <guiexpert-table-signal class="table-div" [tableModel]="model" [(tableApi)]="api" />
    <button [disabled]="!ready()" (click)="api()?.downloadExcel('orders.xlsx', 'me')">Excel</button>`
})
export class OrdersComponent {
  readonly model = TableFactory.createTableModel({ rows: createOrders(100_000), properties: ["id", "customer", "city", "total"] });
  readonly api = signal<TableApi | undefined>(undefined);
  readonly ready = computed(() => !!this.api());
  constructor() {
    effect(() => this.api()?.scrollToIndex(0, 0));
  }
}