@guiexpert/table 1.1.93 → 1.1.96

package/README.md

@@ -29,6 +29,31 @@ 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
+- Calculated columns (`ColumnDef.valueGetter` – sorting, filter via `tableApi.getRowValue()`, copy, Excel, totals and
+  row grouping use the computed value), „Show values as“ (`showValuesAs`: share of the column / row / grand / parent
+  total, running total, difference, rank – also per pivot value) and formulas (`formula: "[price] * [quantity] * 1.19"`,
+  own parser and interpreter without `eval`, functions like `ROUND`, `IF`, `SUM([x])`, error values `#DIV/0!`,
+  `tableApi.setColumnFormula()`) – since 1.1.95
+- Row drag: drag handle per row (`ColumnDef.rowDrag` or `rowDrag: true` in the factory), mouse, touch and pen, ghost,
+  drop marker, auto-scroll, Escape, keyboard alternative Ctrl+Alt+↑/↓, several selected rows, trees; the table moves
+  the rows (managed) or only reports the drop (`rowDragOptions: { managed: false }`, `onRowDragEnd`) – since 1.1.95
+- Fill handle and batch edit: a square at the corner of the selected range copies values or continues series (numbers,
+  dates, `Item 1` → `Item 2`; ⌥/Alt switches, Ctrl/⌘+D, Ctrl/⌘+R), batch edit collects changes (`ge-table-cell-pending`)
+  until `tableApi.commitBatchEdit()` / `cancelBatchEdit()`, `ColumnDef.validate`, one `onModelChanged` per change with
+  old and new values (`tableOptions.fillHandle`, `tableOptions.batchEdit`) – since 1.1.96
 - Custom Filtering
 - In-place Cell Editing
 - Userdefined Key and Mouse Events

package/css/main.css

@@ -1,3 +1,10 @@
+/* Calculated columns, „Show values as“, formulas (since 1.1.95) */
+
+/* a cell with a formula error (#DIV/0!, #NAME? …): the message is the tooltip */
+.ge-table-col-div.ge-table-cell-error {
+  color: var(--ge-table-cell-error-color);
+  font-variant-numeric: tabular-nums;
+}
 /* Defaults for the host element. :where() = zero specificity, so the app's own rules always win –
    e.g. ".table-div { height: 500px }" no longer depends on the order in which the stylesheets are bundled. */
 :where(.ge-table) {
@@ -46,6 +53,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 +182,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 +441,21 @@
   --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;
+
+  /* Formulas: error values #DIV/0!, #NAME? … (since 1.1.95) */
+  --ge-table-cell-error-color: #b91c1c;
+
   /* 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 +463,30 @@
   --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;
+
+  /* Row drag (since 1.1.95): handle ≥ 3 : 1 against white (WCAG 1.4.11), marker, ghost */
+  --ge-table-row-drag-handle-color: #6b7280;
+  --ge-table-row-drop-indicator-color: #1a73e8;
+  --ge-table-row-drop-inside-bg: rgba(26, 115, 232, 0.12);
+  --ge-table-row-drag-ghost-bg: #fff;
+  --ge-table-row-drag-ghost-text: #1f2937;
+  --ge-table-row-drag-ghost-border: #1a73e8;
+  --ge-table-row-dragging-opacity: 0.4;
+
+  /* Fill handle and batch edit (since 1.1.96): handle and preview like the selection, pending = yellow, invalid = red */
+  --ge-table-fill-handle-color: #0a6ebd;
+  --ge-table-fill-handle-border: #fff;
+  --ge-table-fill-preview-border: #0a6ebd;
+  --ge-table-cell-pending-bg: #fff3c4;
+  --ge-table-cell-pending-text: #3d2e00;
+  --ge-table-cell-pending-marker: #c27c00;
+  --ge-table-cell-invalid-bg: #fde2e1;
+  --ge-table-cell-invalid-text: #8a1c14;
+  --ge-table-cell-invalid-border: #d93025;
 }
 
 
@@ -482,6 +562,21 @@ 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;
+
+  /* Formulas: error values #DIV/0!, #NAME? … (since 1.1.95) */
+  --ge-table-cell-error-color: #f87171;
+
   /* 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 +584,236 @@ 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;
+
+  /* Row drag (since 1.1.95) */
+  --ge-table-row-drag-handle-color: #9ca3af;
+  --ge-table-row-drop-indicator-color: #8ab4f8;
+  --ge-table-row-drop-inside-bg: rgba(138, 180, 248, 0.16);
+  --ge-table-row-drag-ghost-bg: #1f2937;
+  --ge-table-row-drag-ghost-text: #f3f4f6;
+  --ge-table-row-drag-ghost-border: #8ab4f8;
+  --ge-table-row-dragging-opacity: 0.4;
+
+  /* Fill handle and batch edit (since 1.1.96) */
+  --ge-table-fill-handle-color: #8ab4f8;
+  --ge-table-fill-handle-border: #1e1e1e;
+  --ge-table-fill-preview-border: #8ab4f8;
+  --ge-table-cell-pending-bg: #4a3b0b;
+  --ge-table-cell-pending-text: #fde68a;
+  --ge-table-cell-pending-marker: #f5b82e;
+  --ge-table-cell-invalid-bg: #5c1d1a;
+  --ge-table-cell-invalid-text: #fecaca;
+  --ge-table-cell-invalid-border: #f28b82;
+}
+/* Fill handle and batch edit (since 1.1.96) – colors in table-color-vars.css (--ge-table-fill-*, --ge-table-cell-*) */
+
+/* the square at the bottom right corner of the selected range; its center sits on the corner */
+.ge-table-fill-handle {
+  position: absolute;
+  z-index: 9000; /* above the cells, below the overlay (10000) */
+  width: 7px;
+  height: 7px;
+  margin: -4px 0 0 -4px;
+  box-sizing: border-box;
+  background: var(--ge-table-fill-handle-color);
+  border: 1px solid var(--ge-table-fill-handle-border);
+  cursor: crosshair;
+  touch-action: none; /* touch drags the handle instead of scrolling */
+}
+
+/* a bigger target for touch and pen (the visible square stays small) */
+.ge-table-fill-handle::after {
+  content: "";
+  position: absolute;
+  inset: -8px;
+}
+
+/* the cells a fill will cover */
+.ge-table-fill-preview {
+  position: absolute;
+  z-index: 8999;
+  box-sizing: border-box;
+  border: 2px dashed var(--ge-table-fill-preview-border);
+  pointer-events: none;
+}
+
+.ge-table-fill-active,
+.ge-table-fill-active * {
+  cursor: crosshair !important;
+  user-select: none;
+}
+
+/* batch edit: a value that is not saved yet – a colored cell and a small corner mark (not color only, WCAG 1.4.1) */
+.ge-table-col-div.ge-table-cell-pending {
+  background-image: linear-gradient(225deg, var(--ge-table-cell-pending-marker) 6px, transparent 6px);
+}
+
+/* the color only while the cell is not selected – a selected cell keeps the selection color (and the corner mark) */
+.ge-table-col-div.ge-table-cell-pending:not([class*="-selected-range"]) {
+  background-color: var(--ge-table-cell-pending-bg);
+  color: var(--ge-table-cell-pending-text);
+}
+
+/* an invalid value (ColumnDef.validate): the message is the tooltip */
+.ge-table-col-div.ge-table-cell-invalid:not([class*="-selected-range"]) {
+  background-color: var(--ge-table-cell-invalid-bg);
+  color: var(--ge-table-cell-invalid-text);
+}
+
+.ge-table-col-div.ge-table-cell-invalid {
+  box-shadow: inset 0 0 0 2px var(--ge-table-cell-invalid-border);
+}
+/* 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 drag (since 1.1.95): handle, ghost, drop marker – colors in table-color-vars.css (--ge-table-row-drag-*) */
+
+/* the cell with the handle: room for the grip at the start (a tree cell has its indent already) */
+.ge-table-row-drag-cell:not(.ge-table-col-tree) {
+  box-sizing: border-box;
+  padding-inline-start: 16px;
+}
+
+/* the grip: 2 × 3 dots, drawn with CSS (no text, no image); touch-action: none = touch drags instead of scrolling */
+.ge-table-row-drag-handle {
+  position: absolute;
+  inset-inline-start: 2px;
+  top: 50%;
+  width: 12px;
+  height: 18px;
+  margin-top: -9px;
+  cursor: grab;
+  touch-action: none;
+  border-radius: 3px;
+  background-image: radial-gradient(circle, var(--ge-table-row-drag-handle-color) 1.5px, transparent 1.6px);
+  background-size: 6px 6px;
+  background-position: 0 0;
+}
+
+.ge-table-row-drag-handle:hover {
+  background-color: rgba(128, 128, 128, 0.15);
+}
+
+/* managed drag while the table is sorted or filtered */
+.ge-table-row-drag-handle.ge-table-row-drag-handle-disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+/* the dragged rows while the drag runs */
+.ge-table-row-dragging {
+  opacity: var(--ge-table-row-dragging-opacity);
+}
+
+.ge-table-row-drag-active,
+.ge-table-row-drag-active * {
+  cursor: grabbing !important;
+}
+
+.ge-table-row-drag-active.ge-table-row-drag-invalid,
+.ge-table-row-drag-active.ge-table-row-drag-invalid * {
+  cursor: no-drop !important;
+}
+
+.ge-table-row-drag-ghost {
+  position: absolute;
+  z-index: 10001; /* above the overlay (10000) */
+  pointer-events: none;
+  max-width: 280px;
+  padding: 4px 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 0.9em;
+  line-height: 1.5;
+  color: var(--ge-table-row-drag-ghost-text);
+  background: var(--ge-table-row-drag-ghost-bg);
+  border: 1px solid var(--ge-table-row-drag-ghost-border);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.ge-table-row-drop-indicator {
+  position: absolute;
+  display: none;
+  z-index: 10000;
+  pointer-events: none;
+  background: var(--ge-table-row-drop-indicator-color);
+}
+
+/* tree: drop into the row (becomes its child) */
+.ge-table-row-drop-indicator.ge-table-row-drop-indicator-inside {
+  box-sizing: border-box;
+  background: var(--ge-table-row-drop-inside-bg);
+  border: 2px solid var(--ge-table-row-drop-indicator-color);
+}
+/* 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 +832,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-calc.css

@@ -0,0 +1,7 @@
+/* Calculated columns, „Show values as“, formulas (since 1.1.95) */
+
+/* a cell with a formula error (#DIV/0!, #NAME? …): the message is the tooltip */
+.ge-table-col-div.ge-table-cell-error {
+  color: var(--ge-table-cell-error-color);
+  font-variant-numeric: tabular-nums;
+}

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,21 @@ 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;
+
+  /* Formulas: error values #DIV/0!, #NAME? … (since 1.1.95) */
+  --ge-table-cell-error-color: #b91c1c;
+
   /* 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 +106,30 @@ 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;
+
+  /* Row drag (since 1.1.95): handle ≥ 3 : 1 against white (WCAG 1.4.11), marker, ghost */
+  --ge-table-row-drag-handle-color: #6b7280;
+  --ge-table-row-drop-indicator-color: #1a73e8;
+  --ge-table-row-drop-inside-bg: rgba(26, 115, 232, 0.12);
+  --ge-table-row-drag-ghost-bg: #fff;
+  --ge-table-row-drag-ghost-text: #1f2937;
+  --ge-table-row-drag-ghost-border: #1a73e8;
+  --ge-table-row-dragging-opacity: 0.4;
+
+  /* Fill handle and batch edit (since 1.1.96): handle and preview like the selection, pending = yellow, invalid = red */
+  --ge-table-fill-handle-color: #0a6ebd;
+  --ge-table-fill-handle-border: #fff;
+  --ge-table-fill-preview-border: #0a6ebd;
+  --ge-table-cell-pending-bg: #fff3c4;
+  --ge-table-cell-pending-text: #3d2e00;
+  --ge-table-cell-pending-marker: #c27c00;
+  --ge-table-cell-invalid-bg: #fde2e1;
+  --ge-table-cell-invalid-text: #8a1c14;
+  --ge-table-cell-invalid-border: #d93025;
 }
 
 
@@ -166,6 +205,21 @@ 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;
+
+  /* Formulas: error values #DIV/0!, #NAME? … (since 1.1.95) */
+  --ge-table-cell-error-color: #f87171;
+
   /* 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 +227,28 @@ 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;
+
+  /* Row drag (since 1.1.95) */
+  --ge-table-row-drag-handle-color: #9ca3af;
+  --ge-table-row-drop-indicator-color: #8ab4f8;
+  --ge-table-row-drop-inside-bg: rgba(138, 180, 248, 0.16);
+  --ge-table-row-drag-ghost-bg: #1f2937;
+  --ge-table-row-drag-ghost-text: #f3f4f6;
+  --ge-table-row-drag-ghost-border: #8ab4f8;
+  --ge-table-row-dragging-opacity: 0.4;
+
+  /* Fill handle and batch edit (since 1.1.96) */
+  --ge-table-fill-handle-color: #8ab4f8;
+  --ge-table-fill-handle-border: #1e1e1e;
+  --ge-table-fill-preview-border: #8ab4f8;
+  --ge-table-cell-pending-bg: #4a3b0b;
+  --ge-table-cell-pending-text: #fde68a;
+  --ge-table-cell-pending-marker: #f5b82e;
+  --ge-table-cell-invalid-bg: #5c1d1a;
+  --ge-table-cell-invalid-text: #fecaca;
+  --ge-table-cell-invalid-border: #f28b82;
 }

package/css/table-fill-batch.css

@@ -0,0 +1,58 @@
+/* Fill handle and batch edit (since 1.1.96) – colors in table-color-vars.css (--ge-table-fill-*, --ge-table-cell-*) */
+
+/* the square at the bottom right corner of the selected range; its center sits on the corner */
+.ge-table-fill-handle {
+  position: absolute;
+  z-index: 9000; /* above the cells, below the overlay (10000) */
+  width: 7px;
+  height: 7px;
+  margin: -4px 0 0 -4px;
+  box-sizing: border-box;
+  background: var(--ge-table-fill-handle-color);
+  border: 1px solid var(--ge-table-fill-handle-border);
+  cursor: crosshair;
+  touch-action: none; /* touch drags the handle instead of scrolling */
+}
+
+/* a bigger target for touch and pen (the visible square stays small) */
+.ge-table-fill-handle::after {
+  content: "";
+  position: absolute;
+  inset: -8px;
+}
+
+/* the cells a fill will cover */
+.ge-table-fill-preview {
+  position: absolute;
+  z-index: 8999;
+  box-sizing: border-box;
+  border: 2px dashed var(--ge-table-fill-preview-border);
+  pointer-events: none;
+}
+
+.ge-table-fill-active,
+.ge-table-fill-active * {
+  cursor: crosshair !important;
+  user-select: none;
+}
+
+/* batch edit: a value that is not saved yet – a colored cell and a small corner mark (not color only, WCAG 1.4.1) */
+.ge-table-col-div.ge-table-cell-pending {
+  background-image: linear-gradient(225deg, var(--ge-table-cell-pending-marker) 6px, transparent 6px);
+}
+
+/* the color only while the cell is not selected – a selected cell keeps the selection color (and the corner mark) */
+.ge-table-col-div.ge-table-cell-pending:not([class*="-selected-range"]) {
+  background-color: var(--ge-table-cell-pending-bg);
+  color: var(--ge-table-cell-pending-text);
+}
+
+/* an invalid value (ColumnDef.validate): the message is the tooltip */
+.ge-table-col-div.ge-table-cell-invalid:not([class*="-selected-range"]) {
+  background-color: var(--ge-table-cell-invalid-bg);
+  color: var(--ge-table-cell-invalid-text);
+}
+
+.ge-table-col-div.ge-table-cell-invalid {
+  box-shadow: inset 0 0 0 2px var(--ge-table-cell-invalid-border);
+}

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