@guiexpert/table 1.1.90 → 1.1.92

package/README.md

@@ -25,20 +25,26 @@ This is the UI-agnostic table component for your next web app. 😊
 - Row and Column Spanning
 - Fixed Columns (Left and Right)
 - Tree table (Hierarchical View)
-- Accessibility support: Keyboard Shortcuts
+- Accessibility: screen readers (WAI-ARIA grid/treegrid, row/column counts with virtual scrolling, announcements of
+  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
 - Custom Filtering
 - In-place Cell Editing
 - Userdefined Key and Mouse Events
 - Customizable Look & Feel (via CSS variables)
 - Row sorting
 - Column Reordering (Drag and Drop)
-- State Persistence (Row Sorting, Column Order, Selection)
+- State persistence: column layout (width, order, visibility), sorting, scroll position, tree, checked and selected
+  rows, header groups – in `localStorage` (`autoRestoreOptions`) or on your server (`tableApi.getState()` /
+  `applyState()`, `initialState`, `onStateChanged`); stored by property and row id, never by index – since 1.1.92
 - Customizable Cell Contents via Renderer for Header, Body and Footer
 - Full control over the HTML structure and style
 
 
 ## Links
 
+- [Training: GuiExpert Table step by step](https://gui.expert/training/)
 - [Demos](https://gui.expert/demos)
 - [Documentation](https://gui.expert/doc)
 - [API](https://gui.expert/api)

package/css/main.css

@@ -7,6 +7,26 @@
   height: 100%;
 }
 
+/* Keyboard focus ring of the table (the table is one tab stop; the focused cell has its own frame). */
+.ge-table:focus-visible {
+  outline: 2px solid var(--ge-table-focus-outline-color, var(--ge-table-focus-border));
+  outline-offset: -2px;
+}
+
+/* Visually hidden, but read by screen readers – e.g. a text alternative in an own cell renderer:
+   <span class="ge-table-sr-only">75 percent</span> */
+.ge-table-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
 .ge-table-col-div {
   text-align: center;
   line-height: 2.5;
@@ -108,6 +128,16 @@
         line-height: 2;
       }
     }
+    /* a nested object: its fields, headed by the property name */
+    fieldset.form-group {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      legend {
+        font-weight: bold;
+        padding: 6px 0;
+      }
+    }
   }
   .ge-table-dialog-footer {
     display: flex;
@@ -124,6 +154,69 @@
 }
 
 
+/* 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 {
+  z-index: 10000; /* above .ge-table-body-east (999) and the focus frame (9999) */
+  box-sizing: border-box;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none; /* "no rows" never blocks */
+  color: var(--ge-table-overlay-color);
+}
+.ge-table-overlay-loading {
+  background-color: var(--ge-table-overlay-bg);
+}
+.ge-table-overlay-blocking {
+  pointer-events: auto; /* catches clicks, hover and the context menu while loading */
+  cursor: progress;
+}
+.ge-table-overlay-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  max-width: 100%;
+  padding-inline: 16px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.ge-table-overlay-loading .ge-table-overlay-content {
+  /* a small card: the text stays readable over the rows of a refresh */
+  padding: 12px 20px;
+  border-radius: 8px;
+  background-color: var(--ge-table-overlay-content-bg);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
+}
+.ge-table-overlay-text {
+  color: var(--ge-table-overlay-color);
+  font-size: 14px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.ge-table-spinner {
+  flex: none;
+  box-sizing: border-box;
+  width: var(--ge-table-spinner-size);
+  height: var(--ge-table-spinner-size);
+  border: 3px solid var(--ge-table-spinner-track-color);
+  border-top-color: var(--ge-table-spinner-color);
+  border-radius: 50%;
+  animation: ge-table-spin 0.8s linear infinite;
+}
+@keyframes ge-table-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ge-table-spinner {
+    animation: none; /* a still ring segment and the text */
+  }
+}
+
+
 .ge-table { background-color: var(--ge-table-bg); }
 
 .ge-table-header-west { background-color: var(--ge-table-header-west-bg); }
@@ -194,7 +287,9 @@
 .ge-table-hover-column { background-color: var(--ge-table-hover-column-bg); }
 .ge-table-hover-row { background-color: var(--ge-table-hover-row-bg); }
 
-.ge-table-focus-border { background-color: var(--ge-table-focus-border); }
+/* Focus frame of the focused cell (2 px). --ge-table-focus-outline-color (not set by default) overrides the
+   color of the cell frame and of the host's keyboard focus ring at once. */
+.ge-table-focus-border { background-color: var(--ge-table-focus-outline-color, var(--ge-table-focus-border)); }
 .ge-table-color-col-resize-handle-hover { background-color: var(--ge-table-color-col-resize-handle-hover-bg); }
 .ge-table-color-dragged-col-div { background-color: var(--ge-table-color-dragged-col-div-bg); }
 .ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone-bg); }
@@ -300,8 +395,18 @@
   --ge-table-color-drop-zone: #fafafa;
   --ge-table-color-tree-arrow-collapsed-color: var(--ge-table-body-west-text);
 
-  --ge-table-color-star-rating: #fcb515;
-  --ge-table-color-progress-bar: #36BB6C;
+  /* light theme: ≥ 3 : 1 against white (WCAG 1.4.11, the stars and bars are images for screen readers);
+     before 1.1.91: #fcb515 (1.8 : 1) and #36BB6C (2.5 : 1) */
+  --ge-table-color-star-rating: #a86f00;
+  --ge-table-color-progress-bar: #1e874b;
+
+  /* Overlays "Loading…" / "No rows" (since 1.1.92) */
+  --ge-table-overlay-bg: rgba(255, 255, 255, 0.7);
+  --ge-table-overlay-content-bg: #fff;
+  --ge-table-overlay-color: #333;
+  --ge-table-spinner-color: #1a73e8;
+  --ge-table-spinner-track-color: rgba(0, 0, 0, 0.12);
+  --ge-table-spinner-size: 28px;
 }
 
 
@@ -376,6 +481,14 @@ html[data-theme="dark"] {
 
   --ge-table-color-star-rating: #fcb515;
   --ge-table-color-progress-bar: #36BB6C;
+
+  /* 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;
+  --ge-table-overlay-color: #ddd;
+  --ge-table-spinner-color: #8ab4f8;
+  --ge-table-spinner-track-color: rgba(255, 255, 255, 0.18);
+  --ge-table-spinner-size: 28px;
 }
 /* Tree table */
 
@@ -422,10 +535,22 @@ html[data-theme="dark"] {
   padding-left: 116px;
 }
 
-.ge-table-col-tree.ge-table-tree-deep-5 {
+.ge-table-col-tree.ge-table-tree-deep-6 {
   padding-left: 136px;
 }
 
+.ge-table-col-tree.ge-table-tree-deep-7 {
+  padding-left: 156px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-8 {
+  padding-left: 176px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-9 {
+  padding-left: 196px;
+}
+
 .ge-table-col-div.ge-table-col-tree.ge-table-tree-cell {
   display: grid;
   grid-template-columns: 16px 1fr;

package/css/table-classes.css

@@ -7,6 +7,26 @@
   height: 100%;
 }
 
+/* Keyboard focus ring of the table (the table is one tab stop; the focused cell has its own frame). */
+.ge-table:focus-visible {
+  outline: 2px solid var(--ge-table-focus-outline-color, var(--ge-table-focus-border));
+  outline-offset: -2px;
+}
+
+/* Visually hidden, but read by screen readers – e.g. a text alternative in an own cell renderer:
+   <span class="ge-table-sr-only">75 percent</span> */
+.ge-table-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
 .ge-table-col-div {
   text-align: center;
   line-height: 2.5;
@@ -108,6 +128,16 @@
         line-height: 2;
       }
     }
+    /* a nested object: its fields, headed by the property name */
+    fieldset.form-group {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      legend {
+        font-weight: bold;
+        padding: 6px 0;
+      }
+    }
   }
   .ge-table-dialog-footer {
     display: flex;
@@ -122,3 +152,66 @@
 .ge-table-col-div:has(> .ge-table-sorted-icon-div) .ge-table-label {
   padding-right: 22px;
 }
+
+
+/* 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 {
+  z-index: 10000; /* above .ge-table-body-east (999) and the focus frame (9999) */
+  box-sizing: border-box;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none; /* "no rows" never blocks */
+  color: var(--ge-table-overlay-color);
+}
+.ge-table-overlay-loading {
+  background-color: var(--ge-table-overlay-bg);
+}
+.ge-table-overlay-blocking {
+  pointer-events: auto; /* catches clicks, hover and the context menu while loading */
+  cursor: progress;
+}
+.ge-table-overlay-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  max-width: 100%;
+  padding-inline: 16px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.ge-table-overlay-loading .ge-table-overlay-content {
+  /* a small card: the text stays readable over the rows of a refresh */
+  padding: 12px 20px;
+  border-radius: 8px;
+  background-color: var(--ge-table-overlay-content-bg);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
+}
+.ge-table-overlay-text {
+  color: var(--ge-table-overlay-color);
+  font-size: 14px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.ge-table-spinner {
+  flex: none;
+  box-sizing: border-box;
+  width: var(--ge-table-spinner-size);
+  height: var(--ge-table-spinner-size);
+  border: 3px solid var(--ge-table-spinner-track-color);
+  border-top-color: var(--ge-table-spinner-color);
+  border-radius: 50%;
+  animation: ge-table-spin 0.8s linear infinite;
+}
+@keyframes ge-table-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ge-table-spinner {
+    animation: none; /* a still ring segment and the text */
+  }
+}

package/css/table-color-classes.css

@@ -70,7 +70,9 @@
 .ge-table-hover-column { background-color: var(--ge-table-hover-column-bg); }
 .ge-table-hover-row { background-color: var(--ge-table-hover-row-bg); }
 
-.ge-table-focus-border { background-color: var(--ge-table-focus-border); }
+/* Focus frame of the focused cell (2 px). --ge-table-focus-outline-color (not set by default) overrides the
+   color of the cell frame and of the host's keyboard focus ring at once. */
+.ge-table-focus-border { background-color: var(--ge-table-focus-outline-color, var(--ge-table-focus-border)); }
 .ge-table-color-col-resize-handle-hover { background-color: var(--ge-table-color-col-resize-handle-hover-bg); }
 .ge-table-color-dragged-col-div { background-color: var(--ge-table-color-dragged-col-div-bg); }
 .ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone-bg); }

package/css/table-color-vars.css

@@ -79,8 +79,18 @@ html, html[data-theme="light"] {
   --ge-table-color-drop-zone: #fafafa;
   --ge-table-color-tree-arrow-collapsed-color: var(--ge-table-body-west-text);
 
-  --ge-table-color-star-rating: #fcb515;
-  --ge-table-color-progress-bar: #36BB6C;
+  /* light theme: ≥ 3 : 1 against white (WCAG 1.4.11, the stars and bars are images for screen readers);
+     before 1.1.91: #fcb515 (1.8 : 1) and #36BB6C (2.5 : 1) */
+  --ge-table-color-star-rating: #a86f00;
+  --ge-table-color-progress-bar: #1e874b;
+
+  /* Overlays "Loading…" / "No rows" (since 1.1.92) */
+  --ge-table-overlay-bg: rgba(255, 255, 255, 0.7);
+  --ge-table-overlay-content-bg: #fff;
+  --ge-table-overlay-color: #333;
+  --ge-table-spinner-color: #1a73e8;
+  --ge-table-spinner-track-color: rgba(0, 0, 0, 0.12);
+  --ge-table-spinner-size: 28px;
 }
 
 
@@ -155,4 +165,12 @@ html[data-theme="dark"] {
 
   --ge-table-color-star-rating: #fcb515;
   --ge-table-color-progress-bar: #36BB6C;
+
+  /* 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;
+  --ge-table-overlay-color: #ddd;
+  --ge-table-spinner-color: #8ab4f8;
+  --ge-table-spinner-track-color: rgba(255, 255, 255, 0.18);
+  --ge-table-spinner-size: 28px;
 }

package/css/table-tree.css

@@ -43,10 +43,22 @@
   padding-left: 116px;
 }
 
-.ge-table-col-tree.ge-table-tree-deep-5 {
+.ge-table-col-tree.ge-table-tree-deep-6 {
   padding-left: 136px;
 }
 
+.ge-table-col-tree.ge-table-tree-deep-7 {
+  padding-left: 156px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-8 {
+  padding-left: 176px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-9 {
+  padding-left: 196px;
+}
+
 .ge-table-col-div.ge-table-col-tree.ge-table-tree-cell {
   display: grid;
   grid-template-columns: 16px 1fr;