@guiexpert/table 1.1.97 → 1.1.98

package/README.md

@@ -58,6 +58,9 @@ This is the UI-agnostic table component for your next web app. 😊
   created lazily and kept while scrolling, fixed or measured height, keyboard (Enter, Tab) and screen readers
   (`aria-expanded`), `tableApi.setDetailExpanded()` / `expandAllDetails()`, stored with the table state
   (`tableOptions.masterDetail`) – since 1.1.97. Variable row heights use prefix sums (O(log n) per scroll frame)
+- Right-to-left (Arabic, Hebrew, Persian, Urdu): `tableOptions.direction: "rtl"` (or `"auto"` from the page) mirrors
+  the whole table – first column on the right, horizontal scrolling, fixed columns, tree indent, resize handles, fill
+  handle, row drag, master/detail, arrow keys; right-to-left Excel sheet – since 1.1.98
 - Custom Filtering
 - In-place Cell Editing
 - Userdefined Key and Mouse Events

package/css/main.css

@@ -49,8 +49,8 @@
 
 
 .ge-table-label-div .ge-table-label {
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-inline-start: 10px;
+  padding-inline-end: 10px;
 }
 
 /* Total rows of AreaModelAggregateFooter (1.1.94) – before the align classes, so a column's footer class wins */
@@ -74,21 +74,45 @@
   overflow: visible;
 }
 
+/* "left" and "right" describe the left-to-right layout: start and end of the row – mirrored in right-to-left
+   (direction: "rtl", since 1.1.98). A column that must stay physically right needs its own class. */
 .ge-table-text-align-left {
-  text-align: left;
+  text-align: start;
 }
 
 .ge-table-text-align-right {
+  text-align: end;
+}
+
+.ge-table-text-align-start {
+  text-align: start;
+}
+
+.ge-table-text-align-end {
+  text-align: end;
+}
+
+/* Latin text with punctuation in a right-to-left table ("Rossi S.p.A." would show as ".Rossi S.p.A"): every label gets
+   the direction of its own text (unicode-bidi: plaintext) and stays aligned to the start of the table (since 1.1.98). */
+.ge-table-text-plaintext {
+  text-align: left;
+}
+
+.ge-table[dir="rtl"] .ge-table-text-plaintext:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-text-plaintext) {
   text-align: right;
 }
 
+.ge-table-text-plaintext .ge-table-label {
+  unicode-bidi: plaintext;
+}
+
 .ge-table-text-align-center {
   text-align: center;
 }
 
 /* Row checkbox */
 .ge-table-row-checkbox-div {
-  padding-left: 14px;
+  padding-inline-start: 14px;
 }
 .ge-table-body-east {
   z-index: 999;
@@ -112,10 +136,10 @@
     overflow-y: auto;
     table th,
     table td {
-      text-align: left;
+      text-align: start;
 
       &:nth-child(2) {
-        padding-left: 12px;
+        padding-inline-start: 12px;
       }
       &.ge-table-crud-object-view-object-child {
         font-weight: bold;
@@ -152,7 +176,7 @@
       justify-items: stretch;
       label {
         align-self: end;
-        text-align: right;
+        text-align: end;
         line-height: 2;
       }
     }
@@ -176,9 +200,9 @@
 }
 
 
-/* room for the sort icon (20px, absolute, right) – otherwise it covers right-aligned header labels */
+/* room for the sort icon (20px, absolute, at the end) – otherwise it covers end-aligned header labels */
 .ge-table-col-div:has(> .ge-table-sorted-icon-div) .ge-table-label {
-  padding-right: 22px;
+  padding-inline-end: 22px;
 }
 
 
@@ -623,13 +647,15 @@ html[data-theme="dark"] {
 }
 /* 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 */
+/* the square at the bottom end corner of the selected range (right-to-left: bottom left); its center sits on it */
 .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;
+  margin: 0;
+  margin-block-start: -4px;
+  margin-inline-start: -4px;
   box-sizing: border-box;
   background: var(--ge-table-fill-handle-color);
   border: 1px solid var(--ge-table-fill-handle-border);
@@ -664,6 +690,11 @@ html[data-theme="dark"] {
   background-image: linear-gradient(225deg, var(--ge-table-cell-pending-marker) 6px, transparent 6px);
 }
 
+/* right-to-left: the corner mark at the top end (left) */
+.ge-table[dir="rtl"] .ge-table-col-div.ge-table-cell-pending:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-col-div.ge-table-cell-pending) {
+  background-image: linear-gradient(135deg, 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);
@@ -774,6 +805,26 @@ html[data-theme="dark"] {
 .ge-table-detail-toggle.ge-table-detail-toggle-expanded::before {
   transform: rotate(90deg);
 }
+
+/* right-to-left (since 1.1.98): the triangle points to the left, expanded down */
+.ge-table[dir="rtl"] .ge-table-detail-toggle:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-detail-toggle)::before {
+  border-width: 4px 6px 4px 0;
+  border-color: transparent var(--ge-table-detail-toggle-color) transparent transparent;
+}
+
+.ge-table[dir="rtl"] .ge-table-detail-toggle.ge-table-detail-toggle-expanded:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-detail-toggle.ge-table-detail-toggle-expanded)::before {
+  transform: rotate(-90deg);
+}
+
+/* right-to-left (since 1.1.98): the triangle points to the left, expanded down */
+.ge-table[dir="rtl"] .ge-table-detail-toggle:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-detail-toggle)::before {
+  border-width: 4px 6px 4px 0;
+  border-color: transparent var(--ge-table-detail-toggle-color) transparent transparent;
+}
+
+.ge-table[dir="rtl"] .ge-table-detail-toggle.ge-table-detail-toggle-expanded:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-detail-toggle.ge-table-detail-toggle-expanded)::before {
+  transform: rotate(-90deg);
+}
 /* Pivot tables (PivotFactory / AreaModelPivot, since 1.1.94) */
 
 /* every value cell: numbers on the end side, same digit widths */
@@ -925,23 +976,23 @@ html[data-theme="dark"] {
 /* Tree table */
 
 .ge-table-col-div.ge-table-col-div-0.ge-table-tree-cell {
-  text-align: left;
+  text-align: start;
 }
 
 .ge-table-tree-cell .ge-table-label-div {
-  padding-left: 0;
-  padding-right: 10px;
+  padding-inline-start: 0;
+  padding-inline-end: 10px;
   display: inline;
 }
 
 
 .ge-table-col-tree {
-  text-align: left;
+  text-align: start;
 }
 
 /* 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;
+  text-align: end;
 }
 .ge-table-row-number.ge-table-tree-cell .ge-table-label-div {
   display: block;
@@ -949,47 +1000,47 @@ html[data-theme="dark"] {
 }
 
 .ge-padding-property-checkbox {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-0 {
-  padding-left: 16px;
+  padding-inline-start: 16px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-1 {
-  padding-left: 36px;
+  padding-inline-start: 36px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-2 {
-  padding-left: 56px;
+  padding-inline-start: 56px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-3 {
-  padding-left: 76px;
+  padding-inline-start: 76px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-4 {
-  padding-left: 96px;
+  padding-inline-start: 96px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-5 {
-  padding-left: 116px;
+  padding-inline-start: 116px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-6 {
-  padding-left: 136px;
+  padding-inline-start: 136px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-7 {
-  padding-left: 156px;
+  padding-inline-start: 156px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-8 {
-  padding-left: 176px;
+  padding-inline-start: 176px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-9 {
-  padding-left: 196px;
+  padding-inline-start: 196px;
 }
 
 .ge-table-col-div.ge-table-col-tree.ge-table-tree-cell {
@@ -1000,3 +1051,10 @@ html[data-theme="dark"] {
   display: grid;
   grid-template-columns: 16px 20px 1fr;
 }
+
+/* Right-to-left (direction: "rtl", since 1.1.98): the arrow ">" is mirrored by the browser ("<"), so the expanded
+   arrow of the default icon turns the other way (its transform is an inline style: !important). */
+.ge-table[dir="rtl"] .gt-table-tree-arrow-expanded:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .gt-table-tree-arrow-expanded) {
+  transform: rotate(-90deg) translate(-66%, -66%) !important;
+  transform-origin: 100% 0 !important;
+}

package/css/table-classes.css

@@ -42,8 +42,8 @@
 
 
 .ge-table-label-div .ge-table-label {
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-inline-start: 10px;
+  padding-inline-end: 10px;
 }
 
 /* Total rows of AreaModelAggregateFooter (1.1.94) – before the align classes, so a column's footer class wins */
@@ -67,21 +67,45 @@
   overflow: visible;
 }
 
+/* "left" and "right" describe the left-to-right layout: start and end of the row – mirrored in right-to-left
+   (direction: "rtl", since 1.1.98). A column that must stay physically right needs its own class. */
 .ge-table-text-align-left {
-  text-align: left;
+  text-align: start;
 }
 
 .ge-table-text-align-right {
+  text-align: end;
+}
+
+.ge-table-text-align-start {
+  text-align: start;
+}
+
+.ge-table-text-align-end {
+  text-align: end;
+}
+
+/* Latin text with punctuation in a right-to-left table ("Rossi S.p.A." would show as ".Rossi S.p.A"): every label gets
+   the direction of its own text (unicode-bidi: plaintext) and stays aligned to the start of the table (since 1.1.98). */
+.ge-table-text-plaintext {
+  text-align: left;
+}
+
+.ge-table[dir="rtl"] .ge-table-text-plaintext:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-text-plaintext) {
   text-align: right;
 }
 
+.ge-table-text-plaintext .ge-table-label {
+  unicode-bidi: plaintext;
+}
+
 .ge-table-text-align-center {
   text-align: center;
 }
 
 /* Row checkbox */
 .ge-table-row-checkbox-div {
-  padding-left: 14px;
+  padding-inline-start: 14px;
 }
 .ge-table-body-east {
   z-index: 999;
@@ -105,10 +129,10 @@
     overflow-y: auto;
     table th,
     table td {
-      text-align: left;
+      text-align: start;
 
       &:nth-child(2) {
-        padding-left: 12px;
+        padding-inline-start: 12px;
       }
       &.ge-table-crud-object-view-object-child {
         font-weight: bold;
@@ -145,7 +169,7 @@
       justify-items: stretch;
       label {
         align-self: end;
-        text-align: right;
+        text-align: end;
         line-height: 2;
       }
     }
@@ -169,9 +193,9 @@
 }
 
 
-/* room for the sort icon (20px, absolute, right) – otherwise it covers right-aligned header labels */
+/* room for the sort icon (20px, absolute, at the end) – otherwise it covers end-aligned header labels */
 .ge-table-col-div:has(> .ge-table-sorted-icon-div) .ge-table-label {
-  padding-right: 22px;
+  padding-inline-end: 22px;
 }
 
 

package/css/table-fill-batch.css

@@ -1,12 +1,14 @@
 /* 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 */
+/* the square at the bottom end corner of the selected range (right-to-left: bottom left); its center sits on it */
 .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;
+  margin: 0;
+  margin-block-start: -4px;
+  margin-inline-start: -4px;
   box-sizing: border-box;
   background: var(--ge-table-fill-handle-color);
   border: 1px solid var(--ge-table-fill-handle-border);
@@ -41,6 +43,11 @@
   background-image: linear-gradient(225deg, var(--ge-table-cell-pending-marker) 6px, transparent 6px);
 }
 
+/* right-to-left: the corner mark at the top end (left) */
+.ge-table[dir="rtl"] .ge-table-col-div.ge-table-cell-pending:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-col-div.ge-table-cell-pending) {
+  background-image: linear-gradient(135deg, 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);

package/css/table-master-detail.css

@@ -93,3 +93,23 @@
 .ge-table-detail-toggle.ge-table-detail-toggle-expanded::before {
   transform: rotate(90deg);
 }
+
+/* right-to-left (since 1.1.98): the triangle points to the left, expanded down */
+.ge-table[dir="rtl"] .ge-table-detail-toggle:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-detail-toggle)::before {
+  border-width: 4px 6px 4px 0;
+  border-color: transparent var(--ge-table-detail-toggle-color) transparent transparent;
+}
+
+.ge-table[dir="rtl"] .ge-table-detail-toggle.ge-table-detail-toggle-expanded:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-detail-toggle.ge-table-detail-toggle-expanded)::before {
+  transform: rotate(-90deg);
+}
+
+/* right-to-left (since 1.1.98): the triangle points to the left, expanded down */
+.ge-table[dir="rtl"] .ge-table-detail-toggle:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-detail-toggle)::before {
+  border-width: 4px 6px 4px 0;
+  border-color: transparent var(--ge-table-detail-toggle-color) transparent transparent;
+}
+
+.ge-table[dir="rtl"] .ge-table-detail-toggle.ge-table-detail-toggle-expanded:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .ge-table-detail-toggle.ge-table-detail-toggle-expanded)::before {
+  transform: rotate(-90deg);
+}

package/css/table-tree.css

@@ -1,23 +1,23 @@
 /* Tree table */
 
 .ge-table-col-div.ge-table-col-div-0.ge-table-tree-cell {
-  text-align: left;
+  text-align: start;
 }
 
 .ge-table-tree-cell .ge-table-label-div {
-  padding-left: 0;
-  padding-right: 10px;
+  padding-inline-start: 0;
+  padding-inline-end: 10px;
   display: inline;
 }
 
 
 .ge-table-col-tree {
-  text-align: left;
+  text-align: start;
 }
 
 /* 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;
+  text-align: end;
 }
 .ge-table-row-number.ge-table-tree-cell .ge-table-label-div {
   display: block;
@@ -25,47 +25,47 @@
 }
 
 .ge-padding-property-checkbox {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-0 {
-  padding-left: 16px;
+  padding-inline-start: 16px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-1 {
-  padding-left: 36px;
+  padding-inline-start: 36px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-2 {
-  padding-left: 56px;
+  padding-inline-start: 56px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-3 {
-  padding-left: 76px;
+  padding-inline-start: 76px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-4 {
-  padding-left: 96px;
+  padding-inline-start: 96px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-5 {
-  padding-left: 116px;
+  padding-inline-start: 116px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-6 {
-  padding-left: 136px;
+  padding-inline-start: 136px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-7 {
-  padding-left: 156px;
+  padding-inline-start: 156px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-8 {
-  padding-left: 176px;
+  padding-inline-start: 176px;
 }
 
 .ge-table-col-tree.ge-table-tree-deep-9 {
-  padding-left: 196px;
+  padding-inline-start: 196px;
 }
 
 .ge-table-col-div.ge-table-col-tree.ge-table-tree-cell {
@@ -76,3 +76,10 @@
   display: grid;
   grid-template-columns: 16px 20px 1fr;
 }
+
+/* Right-to-left (direction: "rtl", since 1.1.98): the arrow ">" is mirrored by the browser ("<"), so the expanded
+   arrow of the default icon turns the other way (its transform is an inline style: !important). */
+.ge-table[dir="rtl"] .gt-table-tree-arrow-expanded:not(.ge-table[dir="rtl"] .ge-table[dir="ltr"] .gt-table-tree-arrow-expanded) {
+  transform: rotate(-90deg) translate(-66%, -66%) !important;
+  transform-origin: 100% 0 !important;
+}