Class RowGroupFactory

Creates a table model that groups flat rows: one row per group with an arrow, a label ("Nord (3)") and aggregates per column, below it the sub-groups or the original rows – plus a total row. MIT-licensed, no dependencies, built on the tree table (AreaModelRowGroups).

What the factory does:

  • puts a RowGroupColumnDef (arrows, labels) behind row numbers and checkbox column and fixes it on the left;
  • hides the columns of grouped properties (hideGroupedColumns), their values are in the group column;
  • builds the body (AreaModelRowGroups) and a total row from the aggregations (AreaModelAggregateFooter).

Regroup at runtime with TableApi.setRowGroupBy; filter, sort, edit and export as in any table.

Example

// R1: sales by region, sum of umsatz, total row
const tableModel = RowGroupFactory.createTableModel<Sale>({
  rows: sales,
  columnDefs,
  groupBy: ["region"],
  aggregations: { umsatz: "sum" }
});
// ▾ Nord (3) … 270 · A Jan 100 · B Jan 50 · A Feb 120 · ▾ Süd (3) … 180 · … · footer "6 rows" … 450

Example

// two levels, all groups closed, regroup with a select
const tableModel = RowGroupFactory.createTableModel<Order>({
  rows: orders, columnDefs, groupBy: ["country", "city"],
  aggregations: { quantity: "sum", total: "sum" }, expanded: 0
});
select.addEventListener("change", () => tableApi.setRowGroupBy(select.value.split(",")));

See

Live demo: row grouping · Training: Row grouping

Since

1.1.94

Hierarchy

  • RowGroupFactory

Constructors

constructor

Methods

createTableModel updateLayout

Constructors

constructor

Methods

Static createTableModel

  • Creates the table model of a row grouping (see the class description).

    Type Parameters

    • T = any

    Parameters

    Returns TableModelIf

    the table model – its body is an AreaModelRowGroups

    Example

    const tableModel = RowGroupFactory.createTableModel<Sale>({
      rows: sales, columnDefs, groupBy: ["region", "produkt"], aggregations: { umsatz: "avg" }
    });
    const body = tableModel.getBodyModel() as AreaModelRowGroups<Sale>;
    body.getGroups()[0].results.umsatz;   // 90 – Nord, the average of its three rows

Static updateLayout

  • Hides the columns of the grouped properties (and shows the ones that are no longer grouped) and sets the header of the group column – after body.setGroupBy(…). TableApi.setRowGroupBy calls it for you.

    Parameters

    Returns boolean

    false if the body is no row grouping

    Example

    const body = tableModel.getBodyModel() as AreaModelRowGroups<Sale>;
    body.setGroupBy(["produkt"]);
    RowGroupFactory.updateLayout(tableModel);
    tableApi.recalcWrappers();
    tableApi.repaintHard();

Settings

Member Visibility

Theme

On This Page