@guiexpert/table 1.1.92 → 1.1.94

package/README.md

@@ -29,6 +29,19 @@ This is the UI-agnostic table component for your next web app. 😊
   sorting, filter and copy) and full keyboard navigation (arrows, Home/End, Page Up/Down, header focus, Enter) – since 1.1.91
 - Overlays "Loading…" (CSS spinner, `tableApi.showLoadingOverlay()`, `loading` prop in the wrappers) and
   "No rows to show" / "No matching rows" (automatic) – plain HTML/CSS, since 1.1.92
+- Row numbers like in a spreadsheet (`rowNumbersVisible: true` or `RowNumberColumnDef`): fixed on the left, width
+  fits the largest number, click selects the row, view or original order – since 1.1.93
+- Aggregation: total rows in the footer that follow filter and sorting (`footerAggregates: { quantity: "sum", total: "avg" }`,
+  `AreaModelAggregateFooter`), helpers `aggregate()` / `aggregateColumns()` with mergeable aggregators (sum, count, avg,
+  min, max, countDistinct, first, last or your own), and count/sum/average of the selected cells for a status bar
+  (`tableApi.getSelectionAggregates()`) – since 1.1.94
+- Row grouping with aggregation: flat rows grouped by one or more properties or functions, group rows with arrow,
+  label (`"Berlin (12)"`) and sum/average/… per column, total row, filter and sorting by aggregate, regroup at runtime
+  (`RowGroupFactory.createTableModel({ rows, groupBy, aggregations })`, `tableApi.setRowGroupBy()`) – since 1.1.94
+- Pivot tables: row fields (a hierarchy with subtotals) × column fields (their values become columns, several fields
+  = a multi-row header with collapsible groups) × aggregated values, total column and total row, filter before the
+  aggregation, pivot again at runtime (`PivotFactory.createTableModel({ rows, rowFields, columnFields, values })`,
+  `tableApi.setPivotConfig()`, engine `pivotRows()`) – since 1.1.94
 - Custom Filtering
 - In-place Cell Editing
 - Userdefined Key and Mouse Events

package/css/main.css

@@ -46,6 +46,27 @@
   padding-right: 10px;
 }
 
+/* Total rows of AreaModelAggregateFooter (1.1.94) – before the align classes, so a column's footer class wins */
+.ge-table-footer-aggregate {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.ge-table-footer-label {
+  font-weight: 600;
+  text-align: start;
+}
+
+/* the next footer cell is empty: the label may run into it instead of being cut off */
+.ge-table-footer-label-overflow {
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.ge-table-footer-label-overflow .ge-table-label-div {
+  overflow: visible;
+}
+
 .ge-table-text-align-left {
   text-align: left;
 }
@@ -154,6 +175,19 @@
 }
 
 
+/* Row numbers (RowNumberColumnDef, since 1.1.93): right aligned, digits of equal width. Before the color classes
+   in main.css, so that the selection colors (.ge-table-body-west-selected-range …) still win. */
+.ge-table-row-number {
+  background-color: var(--ge-table-row-number-bg);
+  color: var(--ge-table-row-number-color);
+}
+.ge-table-row-number .ge-table-label,
+.ge-table-row-number-header .ge-table-label {
+  padding-inline: 6px;
+  font-variant-numeric: tabular-nums;
+}
+
+
 /* Overlays over the body: "Loading…" with a CSS spinner, "No rows to show", "No matching rows" (since 1.1.92).
    Position and size are set inline by the table (the visible body), display is switched inline (none / flex). */
 .ge-table-overlay {
@@ -400,6 +434,18 @@
   --ge-table-color-star-rating: #a86f00;
   --ge-table-color-progress-bar: #1e874b;
 
+  /* Row grouping: group rows (since 1.1.94) */
+  --ge-table-row-group-bg: rgba(0, 0, 0, 0.045);
+  --ge-table-row-group-text: inherit;
+  --ge-table-row-group-label-font-weight: 600;
+
+  /* Pivot tables: subtotals, totals, empty cells (since 1.1.94) */
+  --ge-table-pivot-subtotal-bg: rgba(0, 0, 0, 0.035);
+  --ge-table-pivot-subtotal-font-weight: 600;
+  --ge-table-pivot-total-bg: rgba(0, 0, 0, 0.07);
+  --ge-table-pivot-total-font-weight: 600;
+  --ge-table-pivot-empty-text: #6b7280;
+
   /* Overlays "Loading…" / "No rows" (since 1.1.92) */
   --ge-table-overlay-bg: rgba(255, 255, 255, 0.7);
   --ge-table-overlay-content-bg: #fff;
@@ -407,6 +453,10 @@
   --ge-table-spinner-color: #1a73e8;
   --ge-table-spinner-track-color: rgba(0, 0, 0, 0.12);
   --ge-table-spinner-size: 28px;
+
+  /* Row numbers (since 1.1.93): like the header, muted digits (#555 on the header gray ≈ 6.9 : 1) */
+  --ge-table-row-number-bg: var(--ge-table-header-west-bg);
+  --ge-table-row-number-color: #555;
 }
 
 
@@ -482,6 +532,18 @@ html[data-theme="dark"] {
   --ge-table-color-star-rating: #fcb515;
   --ge-table-color-progress-bar: #36BB6C;
 
+  /* Row grouping: group rows (since 1.1.94) */
+  --ge-table-row-group-bg: rgba(255, 255, 255, 0.06);
+  --ge-table-row-group-text: inherit;
+  --ge-table-row-group-label-font-weight: 600;
+
+  /* Pivot tables: subtotals, totals, empty cells (since 1.1.94) */
+  --ge-table-pivot-subtotal-bg: rgba(255, 255, 255, 0.05);
+  --ge-table-pivot-subtotal-font-weight: 600;
+  --ge-table-pivot-total-bg: rgba(255, 255, 255, 0.1);
+  --ge-table-pivot-total-font-weight: 600;
+  --ge-table-pivot-empty-text: #9ca3af;
+
   /* Overlays "Loading…" / "No rows" (since 1.1.92) */
   --ge-table-overlay-bg: rgba(17, 24, 39, 0.7); /* --ge-table-bg of the dark theme */
   --ge-table-overlay-content-bg: #1f2937;
@@ -489,6 +551,77 @@ html[data-theme="dark"] {
   --ge-table-spinner-color: #8ab4f8;
   --ge-table-spinner-track-color: rgba(255, 255, 255, 0.18);
   --ge-table-spinner-size: 28px;
+
+  /* Row numbers (since 1.1.93) */
+  --ge-table-row-number-bg: var(--ge-table-header-west-bg);
+  --ge-table-row-number-color: #aaa;
+}
+/* Pivot tables (PivotFactory / AreaModelPivot, since 1.1.94) */
+
+/* every value cell: numbers on the end side, same digit widths */
+.ge-table-pivot-value {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* the label in the group column ("Nord") */
+.ge-table-pivot-label .ge-table-label-div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* subtotals: group rows and the total columns of column groups */
+.ge-table-col-div.ge-table-pivot-subtotal {
+  background-color: var(--ge-table-pivot-subtotal-bg);
+  font-weight: var(--ge-table-pivot-subtotal-font-weight);
+}
+
+/* totals: the total column(s) and the total row */
+.ge-table-col-div.ge-table-pivot-total {
+  background-color: var(--ge-table-pivot-total-bg);
+  font-weight: var(--ge-table-pivot-total-font-weight);
+}
+
+/* a combination without data (emptyText, e.g. "–") */
+.ge-table-pivot-empty {
+  color: var(--ge-table-pivot-empty-text);
+}
+
+/* header: a column group ("2026", "Jan") starts at the left of its span, a column label ("Q1", "Revenue") sits above
+   its numbers (value columns only – the group column keeps its alignment) */
+.ge-table-pivot-header-group {
+  text-align: start;
+  padding-inline-start: 6px;
+}
+
+.ge-table-pivot-header.ge-table-pivot-header-column {
+  text-align: end;
+}
+/* Row grouping (RowGroupFactory / AreaModelRowGroups, since 1.1.94) */
+
+/* every cell of a group row */
+.ge-table-col-div.ge-table-row-group {
+  background-color: var(--ge-table-row-group-bg);
+  color: var(--ge-table-row-group-text);
+}
+
+/* the label in the group column: "Nord (3)" */
+.ge-table-row-group-label {
+  font-weight: var(--ge-table-row-group-label-font-weight);
+}
+
+.ge-table-row-group-label .ge-table-label-div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* the aggregates of a group row */
+.ge-table-row-group-aggregate {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--ge-table-row-group-label-font-weight);
 }
 /* Tree table */
 
@@ -507,6 +640,15 @@ html[data-theme="dark"] {
   text-align: left;
 }
 
+/* Row numbers (RowNumberColumnDef) in a tree: no tree look – right aligned like in a flat table (since 1.1.93) */
+.ge-table-col-div.ge-table-row-number.ge-table-tree-cell {
+  text-align: right;
+}
+.ge-table-row-number.ge-table-tree-cell .ge-table-label-div {
+  display: block;
+  padding: 0;
+}
+
 .ge-padding-property-checkbox {
   padding-left: 0;
 }

package/css/table-classes.css

@@ -46,6 +46,27 @@
   padding-right: 10px;
 }
 
+/* Total rows of AreaModelAggregateFooter (1.1.94) – before the align classes, so a column's footer class wins */
+.ge-table-footer-aggregate {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.ge-table-footer-label {
+  font-weight: 600;
+  text-align: start;
+}
+
+/* the next footer cell is empty: the label may run into it instead of being cut off */
+.ge-table-footer-label-overflow {
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.ge-table-footer-label-overflow .ge-table-label-div {
+  overflow: visible;
+}
+
 .ge-table-text-align-left {
   text-align: left;
 }
@@ -154,6 +175,19 @@
 }
 
 
+/* Row numbers (RowNumberColumnDef, since 1.1.93): right aligned, digits of equal width. Before the color classes
+   in main.css, so that the selection colors (.ge-table-body-west-selected-range …) still win. */
+.ge-table-row-number {
+  background-color: var(--ge-table-row-number-bg);
+  color: var(--ge-table-row-number-color);
+}
+.ge-table-row-number .ge-table-label,
+.ge-table-row-number-header .ge-table-label {
+  padding-inline: 6px;
+  font-variant-numeric: tabular-nums;
+}
+
+
 /* Overlays over the body: "Loading…" with a CSS spinner, "No rows to show", "No matching rows" (since 1.1.92).
    Position and size are set inline by the table (the visible body), display is switched inline (none / flex). */
 .ge-table-overlay {

package/css/table-color-vars.css

@@ -84,6 +84,18 @@ html, html[data-theme="light"] {
   --ge-table-color-star-rating: #a86f00;
   --ge-table-color-progress-bar: #1e874b;
 
+  /* Row grouping: group rows (since 1.1.94) */
+  --ge-table-row-group-bg: rgba(0, 0, 0, 0.045);
+  --ge-table-row-group-text: inherit;
+  --ge-table-row-group-label-font-weight: 600;
+
+  /* Pivot tables: subtotals, totals, empty cells (since 1.1.94) */
+  --ge-table-pivot-subtotal-bg: rgba(0, 0, 0, 0.035);
+  --ge-table-pivot-subtotal-font-weight: 600;
+  --ge-table-pivot-total-bg: rgba(0, 0, 0, 0.07);
+  --ge-table-pivot-total-font-weight: 600;
+  --ge-table-pivot-empty-text: #6b7280;
+
   /* Overlays "Loading…" / "No rows" (since 1.1.92) */
   --ge-table-overlay-bg: rgba(255, 255, 255, 0.7);
   --ge-table-overlay-content-bg: #fff;
@@ -91,6 +103,10 @@ html, html[data-theme="light"] {
   --ge-table-spinner-color: #1a73e8;
   --ge-table-spinner-track-color: rgba(0, 0, 0, 0.12);
   --ge-table-spinner-size: 28px;
+
+  /* Row numbers (since 1.1.93): like the header, muted digits (#555 on the header gray ≈ 6.9 : 1) */
+  --ge-table-row-number-bg: var(--ge-table-header-west-bg);
+  --ge-table-row-number-color: #555;
 }
 
 
@@ -166,6 +182,18 @@ html[data-theme="dark"] {
   --ge-table-color-star-rating: #fcb515;
   --ge-table-color-progress-bar: #36BB6C;
 
+  /* Row grouping: group rows (since 1.1.94) */
+  --ge-table-row-group-bg: rgba(255, 255, 255, 0.06);
+  --ge-table-row-group-text: inherit;
+  --ge-table-row-group-label-font-weight: 600;
+
+  /* Pivot tables: subtotals, totals, empty cells (since 1.1.94) */
+  --ge-table-pivot-subtotal-bg: rgba(255, 255, 255, 0.05);
+  --ge-table-pivot-subtotal-font-weight: 600;
+  --ge-table-pivot-total-bg: rgba(255, 255, 255, 0.1);
+  --ge-table-pivot-total-font-weight: 600;
+  --ge-table-pivot-empty-text: #9ca3af;
+
   /* Overlays "Loading…" / "No rows" (since 1.1.92) */
   --ge-table-overlay-bg: rgba(17, 24, 39, 0.7); /* --ge-table-bg of the dark theme */
   --ge-table-overlay-content-bg: #1f2937;
@@ -173,4 +201,8 @@ html[data-theme="dark"] {
   --ge-table-spinner-color: #8ab4f8;
   --ge-table-spinner-track-color: rgba(255, 255, 255, 0.18);
   --ge-table-spinner-size: 28px;
+
+  /* Row numbers (since 1.1.93) */
+  --ge-table-row-number-bg: var(--ge-table-header-west-bg);
+  --ge-table-row-number-color: #aaa;
 }

package/css/table-pivot.css

@@ -0,0 +1,42 @@
+/* Pivot tables (PivotFactory / AreaModelPivot, since 1.1.94) */
+
+/* every value cell: numbers on the end side, same digit widths */
+.ge-table-pivot-value {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* the label in the group column ("Nord") */
+.ge-table-pivot-label .ge-table-label-div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* subtotals: group rows and the total columns of column groups */
+.ge-table-col-div.ge-table-pivot-subtotal {
+  background-color: var(--ge-table-pivot-subtotal-bg);
+  font-weight: var(--ge-table-pivot-subtotal-font-weight);
+}
+
+/* totals: the total column(s) and the total row */
+.ge-table-col-div.ge-table-pivot-total {
+  background-color: var(--ge-table-pivot-total-bg);
+  font-weight: var(--ge-table-pivot-total-font-weight);
+}
+
+/* a combination without data (emptyText, e.g. "–") */
+.ge-table-pivot-empty {
+  color: var(--ge-table-pivot-empty-text);
+}
+
+/* header: a column group ("2026", "Jan") starts at the left of its span, a column label ("Q1", "Revenue") sits above
+   its numbers (value columns only – the group column keeps its alignment) */
+.ge-table-pivot-header-group {
+  text-align: start;
+  padding-inline-start: 6px;
+}
+
+.ge-table-pivot-header.ge-table-pivot-header-column {
+  text-align: end;
+}

package/css/table-row-group.css

@@ -0,0 +1,25 @@
+/* Row grouping (RowGroupFactory / AreaModelRowGroups, since 1.1.94) */
+
+/* every cell of a group row */
+.ge-table-col-div.ge-table-row-group {
+  background-color: var(--ge-table-row-group-bg);
+  color: var(--ge-table-row-group-text);
+}
+
+/* the label in the group column: "Nord (3)" */
+.ge-table-row-group-label {
+  font-weight: var(--ge-table-row-group-label-font-weight);
+}
+
+.ge-table-row-group-label .ge-table-label-div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* the aggregates of a group row */
+.ge-table-row-group-aggregate {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--ge-table-row-group-label-font-weight);
+}

package/css/table-tree.css

@@ -15,6 +15,15 @@
   text-align: left;
 }
 
+/* Row numbers (RowNumberColumnDef) in a tree: no tree look – right aligned like in a flat table (since 1.1.93) */
+.ge-table-col-div.ge-table-row-number.ge-table-tree-cell {
+  text-align: right;
+}
+.ge-table-row-number.ge-table-tree-cell .ge-table-label-div {
+  display: block;
+  padding: 0;
+}
+
 .ge-padding-property-checkbox {
   padding-left: 0;
 }