@guiexpert/table 1.1.97 → 1.1.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/css/main.css +85 -27
- package/css/table-classes.css +33 -9
- package/css/table-fill-batch.css +9 -2
- package/css/table-master-detail.css +20 -0
- package/css/table-tree.css +23 -16
- package/index.cjs +37 -37
- package/index.d.ts +6 -0
- package/index.js +1205 -1022
- package/lib/table/crud/crud-object-edit.d.ts +2 -0
- package/lib/table/crud/crud-object-view.d.ts +2 -0
- package/lib/table/crud/crud-table-model-factory.d.ts +2 -0
- package/lib/table/data/options/table-options.d.ts +6 -0
- package/lib/table/data/options/table-options.if.d.ts +17 -0
- package/lib/table/ele-scope.d.ts +37 -0
- package/lib/table/rtl/rtl-util.d.ts +126 -0
- package/lib/table/rtl/table-direction.type.d.ts +23 -0
- package/lib/table/service/convenience-dom.service.d.ts +49 -1
- package/lib/table/service/excel-export-options.if.d.ts +17 -0
- package/lib/table/service/excel-service.d.ts +8 -2
- package/lib/table/service/excel-service.if.d.ts +3 -1
- package/lib/table/table-api.d.ts +22 -2
- package/lib/table/table-scope.d.ts +5 -0
- package/package.json +1 -1
|
@@ -17,6 +17,8 @@
|
|
|
17
17
|
export declare class CrudObjectEdit<T extends Record<string, any>> {
|
|
18
18
|
private idKey;
|
|
19
19
|
dialogTitle: string;
|
|
20
|
+
/** Writing direction of the dialog (`dir`) – the CRUD factory sets the direction of the table. @since 1.1.98 */
|
|
21
|
+
direction?: "ltr" | "rtl";
|
|
20
22
|
private object;
|
|
21
23
|
/** Property path of every input (index = `data-field-index`) – a key may contain a dot itself. */
|
|
22
24
|
private fieldPaths;
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
* @category CRUD
|
|
6
6
|
*/
|
|
7
7
|
export declare class CrudObjectView<T extends Record<string, any>> {
|
|
8
|
+
/** Writing direction of the dialog (`dir`) – the CRUD factory sets the direction of the table. @since 1.1.98 */
|
|
9
|
+
direction?: "ltr" | "rtl";
|
|
8
10
|
private object;
|
|
9
11
|
constructor(obj: T);
|
|
10
12
|
openDialog(): void;
|
|
@@ -59,6 +59,8 @@ export declare class CrudTableModelFactory implements ActionEventListenerIf {
|
|
|
59
59
|
* While a request runs, the table shows its loading overlay ({@link TableApi.showLoadingOverlay}, since 1.1.92).
|
|
60
60
|
* A failed request is logged with `console.error`; the table stays unchanged.
|
|
61
61
|
*/
|
|
62
|
+
/** The dialogs live outside the host: they get the writing direction of the table (since 1.1.98). */
|
|
63
|
+
private withDirection;
|
|
62
64
|
onActionEvent(actionEvent: ActionEventIf): void;
|
|
63
65
|
/** `createItem` without the id property (the server assigns it), then shows the new row. */
|
|
64
66
|
private createItem;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { TableDirection } from '../../rtl/table-direction.type.js';
|
|
1
2
|
import { MasterDetailOptionsIf } from '../../master-detail/master-detail-options.if.js';
|
|
2
3
|
import { DefaultRowHeightsIf } from './default-row-heights.if.js';
|
|
3
4
|
import { TableOptionsIf } from './table-options.if.js';
|
|
@@ -88,4 +89,9 @@ export declare class TableOptions implements TableOptionsIf {
|
|
|
88
89
|
fillHandle?: boolean | Partial<FillHandleOptionsIf>;
|
|
89
90
|
masterDetail?: Partial<MasterDetailOptionsIf>;
|
|
90
91
|
batchEdit?: boolean | Partial<BatchEditOptionsIf>;
|
|
92
|
+
/**
|
|
93
|
+
* Writing direction (`"ltr"` | `"rtl"` | `"auto"`). Not set = `"ltr"`; a nested table (master/detail) without its
|
|
94
|
+
* own value takes the direction of the outer table. @since 1.1.98
|
|
95
|
+
*/
|
|
96
|
+
direction?: TableDirection;
|
|
91
97
|
}
|
|
@@ -17,6 +17,7 @@ import { HeaderGroupOptionsIf } from './header-group-options.if.js';
|
|
|
17
17
|
import { AriaTextsIf } from '../../aria/aria-texts.if.js';
|
|
18
18
|
import { TableStateIf } from '../../state/table-state.if.js';
|
|
19
19
|
import { OverlayOptionsIf } from './overlay-options.if.js';
|
|
20
|
+
import { TableDirection } from '../../rtl/table-direction.type.js';
|
|
20
21
|
|
|
21
22
|
/**
|
|
22
23
|
* Represents the options for configuring a table.
|
|
@@ -379,6 +380,22 @@ export interface TableOptionsIf {
|
|
|
379
380
|
* @since 1.1.97
|
|
380
381
|
*/
|
|
381
382
|
masterDetail?: Partial<MasterDetailOptionsIf>;
|
|
383
|
+
/**
|
|
384
|
+
* Writing direction: `"ltr"` (default), `"rtl"` for Arabic, Hebrew, Persian, Urdu … (first column on the right,
|
|
385
|
+
* horizontal scrolling, fixed columns, tree indent, resize handles and arrow keys mirrored) or `"auto"` (the
|
|
386
|
+
* direction of the page: `dir="rtl"` on `<html>` or a parent element). Read once when the table is built – a new
|
|
387
|
+
* options object rebuilds the table in the wrappers.
|
|
388
|
+
*
|
|
389
|
+
* In right-to-left, the "left" and "right" in names of the API mean **start** and **end**:
|
|
390
|
+
* `fixedLeftColumnCount` fixes columns at the start (right), `fixedRightColumnCount` at the end (left),
|
|
391
|
+
* `ge-table-text-align-left` aligns to the start. The table sets `dir` on its host element (also `dir="ltr"`).
|
|
392
|
+
*
|
|
393
|
+
* @example
|
|
394
|
+
* const tableOptions: TableOptionsIf = { ...new TableOptions(), direction: "rtl" };
|
|
395
|
+
*
|
|
396
|
+
* @since 1.1.98
|
|
397
|
+
*/
|
|
398
|
+
direction?: TableDirection;
|
|
382
399
|
/**
|
|
383
400
|
* The state the table starts with: column layout, sorting, tree, checked and selected rows … – e.g. loaded from
|
|
384
401
|
* your server ({@link TableApi.getState}, {@link EventListenerIf.onStateChanged}). A state stored by
|
package/lib/table/ele-scope.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import { AriaIds } from './aria/aria-ids.js';
|
|
|
7
7
|
import { AreaIdent } from './data/tablemodel/area-ident.type.js';
|
|
8
8
|
import { SideIdent } from './data/side-ident.type.js';
|
|
9
9
|
import { TableOverlay } from './overlay/table-overlay.js';
|
|
10
|
+
import { ResolvedTableDirection } from './rtl/table-direction.type.js';
|
|
10
11
|
|
|
11
12
|
/**
|
|
12
13
|
* Represents a store for HTML elements.
|
|
@@ -53,7 +54,43 @@ export declare class EleScope {
|
|
|
53
54
|
readonly ariaIds: AriaIds;
|
|
54
55
|
/** The overlay layer over the body ("Loading…", "No rows to show"). @since 1.1.92 */
|
|
55
56
|
readonly tableOverlay: TableOverlay;
|
|
57
|
+
/**
|
|
58
|
+
* The resolved writing direction of the table ({@link TableOptionsIf.direction}; `"auto"` is decided when the table
|
|
59
|
+
* is built). @since 1.1.98
|
|
60
|
+
*/
|
|
61
|
+
readonly direction: ResolvedTableDirection;
|
|
56
62
|
constructor(hostElement: HTMLDivElement, tableModel: TableModelIf, dom: ConvenienceDomService, tableOptions: TableOptionsIf);
|
|
63
|
+
/**
|
|
64
|
+
* Whether the table runs from right to left ({@link TableOptionsIf.direction}).
|
|
65
|
+
*
|
|
66
|
+
* @returns {boolean} true for `"rtl"` (also a resolved `"auto"`)
|
|
67
|
+
* @since 1.1.98
|
|
68
|
+
*/
|
|
69
|
+
isRtl(): boolean;
|
|
70
|
+
/**
|
|
71
|
+
* The horizontal scroll position of the body as distance from the **start** (≥ 0) – `scrollLeft`, in
|
|
72
|
+
* right-to-left `-scrollLeft`.
|
|
73
|
+
*
|
|
74
|
+
* @returns {number} px
|
|
75
|
+
* @since 1.1.98
|
|
76
|
+
*/
|
|
77
|
+
getViewportScrollLeft(): number;
|
|
78
|
+
/**
|
|
79
|
+
* Sets the horizontal scroll position of the body as distance from the **start** (see {@link getViewportScrollLeft}).
|
|
80
|
+
*
|
|
81
|
+
* @param {number} x - px from the start
|
|
82
|
+
* @since 1.1.98
|
|
83
|
+
*/
|
|
84
|
+
setViewportScrollLeft(x: number): void;
|
|
85
|
+
/**
|
|
86
|
+
* A client x coordinate (e.g. `PointerEvent.clientX`) as x in the host from the start of its padding box – the
|
|
87
|
+
* coordinates in which the table positions everything (right-to-left: from the right edge).
|
|
88
|
+
*
|
|
89
|
+
* @param {number} clientX - x in client (viewport) coordinates
|
|
90
|
+
* @returns {number} px from the start
|
|
91
|
+
* @since 1.1.98
|
|
92
|
+
*/
|
|
93
|
+
clientXToHostX(clientX: number): number;
|
|
57
94
|
/**
|
|
58
95
|
* Shows the overlay that fits the current state (requested by the API, or "no rows" for an empty body).
|
|
59
96
|
* Overwritten in {@link RenderScope}.
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { ResolvedTableDirection, TableDirection } from './table-direction.type.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Decides the direction of a table: `"rtl"` and `"ltr"` as given, `"auto"` from the computed `direction` of the host
|
|
5
|
+
* (inherited from `<html dir="rtl">` or any parent) – for a host that is not in the document yet from the nearest
|
|
6
|
+
* `dir` attribute of the host or a parent. Missing (`undefined`) = `"ltr"`.
|
|
7
|
+
*
|
|
8
|
+
* Must be called before the table sets the `dir` attribute of the host.
|
|
9
|
+
*
|
|
10
|
+
* @param {TableDirection | undefined} direction - the option ({@link TableOptionsIf.direction})
|
|
11
|
+
* @param {HTMLElement} [host] - the host element of the table (needed for `"auto"`)
|
|
12
|
+
* @returns {ResolvedTableDirection} `"ltr"` or `"rtl"`
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* resolveTableDirection("auto", document.getElementById("table")!); // "rtl" on a page with <html dir="rtl">
|
|
16
|
+
*
|
|
17
|
+
* @since 1.1.98
|
|
18
|
+
* @category Utilities
|
|
19
|
+
*/
|
|
20
|
+
export declare function resolveTableDirection(direction: TableDirection | undefined, host?: HTMLElement): ResolvedTableDirection;
|
|
21
|
+
/**
|
|
22
|
+
* The horizontal scroll position of an element as distance from the **start** (≥ 0): in left-to-right `scrollLeft`,
|
|
23
|
+
* in right-to-left `-scrollLeft` (browsers report 0 at the right start and negative values when scrolled to the left,
|
|
24
|
+
* CSSOM View).
|
|
25
|
+
*
|
|
26
|
+
* @param {{ scrollLeft: number }} element - a scroll container
|
|
27
|
+
* @param {boolean} rtl - the container is right-to-left
|
|
28
|
+
* @returns {number} px from the start
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* const fromStart = getLogicalScrollLeft(tableApi.getTableScope().scrollViewport, tableApi.getDirection() === "rtl");
|
|
32
|
+
*
|
|
33
|
+
* @since 1.1.98
|
|
34
|
+
* @category Utilities
|
|
35
|
+
*/
|
|
36
|
+
export declare function getLogicalScrollLeft(element: {
|
|
37
|
+
scrollLeft: number;
|
|
38
|
+
}, rtl: boolean): number;
|
|
39
|
+
/**
|
|
40
|
+
* Sets the horizontal scroll position of an element as distance from the **start** (see {@link getLogicalScrollLeft}).
|
|
41
|
+
*
|
|
42
|
+
* @param {{ scrollLeft: number }} element - a scroll container
|
|
43
|
+
* @param {number} x - px from the start
|
|
44
|
+
* @param {boolean} rtl - the container is right-to-left
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* setLogicalScrollLeft(tableApi.getTableScope().scrollViewport, 0, true); // back to the (right) start
|
|
48
|
+
*
|
|
49
|
+
* @since 1.1.98
|
|
50
|
+
* @category Utilities
|
|
51
|
+
*/
|
|
52
|
+
export declare function setLogicalScrollLeft(element: {
|
|
53
|
+
scrollLeft: number;
|
|
54
|
+
}, x: number, rtl: boolean): void;
|
|
55
|
+
/**
|
|
56
|
+
* The horizontal scroll position for `element.scrollTo(…)` – physical, i.e. negative in right-to-left.
|
|
57
|
+
*
|
|
58
|
+
* @param {number} x - px from the start
|
|
59
|
+
* @param {boolean} rtl - right-to-left
|
|
60
|
+
* @returns {number} the value for `scrollLeft` / `scrollTo()`
|
|
61
|
+
*
|
|
62
|
+
* @example
|
|
63
|
+
* tableApi.getTableScope().scrollViewport.scrollTo(toPhysicalScrollLeft(200, true), 0); // 200 px from the right start
|
|
64
|
+
*
|
|
65
|
+
* @since 1.1.98
|
|
66
|
+
* @category Utilities
|
|
67
|
+
*/
|
|
68
|
+
export declare function toPhysicalScrollLeft(x: number, rtl: boolean): number;
|
|
69
|
+
/**
|
|
70
|
+
* Whether a scroll container can still scroll horizontally by `dx` (physical: `dx > 0` = to the right) – for
|
|
71
|
+
* left-to-right and right-to-left containers alike.
|
|
72
|
+
*
|
|
73
|
+
* @param {{ scrollLeft: number, scrollWidth: number, clientWidth: number }} element - a scroll container
|
|
74
|
+
* @param {number} dx - physical delta (e.g. `WheelEvent.deltaX`)
|
|
75
|
+
* @param {boolean} rtl - the container is right-to-left
|
|
76
|
+
* @returns {boolean} true if a scroll by `dx` would move the content
|
|
77
|
+
*
|
|
78
|
+
* @example
|
|
79
|
+
* host.addEventListener("wheel", e => {
|
|
80
|
+
* const takesIt = canScrollHorizontally(host, e.deltaX, getComputedStyle(host).direction === "rtl");
|
|
81
|
+
* console.info(takesIt ? "the element scrolls itself" : "pass it on");
|
|
82
|
+
* });
|
|
83
|
+
*
|
|
84
|
+
* @since 1.1.98
|
|
85
|
+
* @category Utilities
|
|
86
|
+
*/
|
|
87
|
+
export declare function canScrollHorizontally(element: {
|
|
88
|
+
scrollLeft: number;
|
|
89
|
+
scrollWidth: number;
|
|
90
|
+
clientWidth: number;
|
|
91
|
+
}, dx: number, rtl: boolean): boolean;
|
|
92
|
+
/**
|
|
93
|
+
* A client x coordinate (e.g. `PointerEvent.clientX`) as position in a box measured from the box's **start**:
|
|
94
|
+
* left-to-right from its left edge, right-to-left from its right edge.
|
|
95
|
+
*
|
|
96
|
+
* @param {number} clientX - x in client (viewport) coordinates
|
|
97
|
+
* @param {number} boxLeft - the left edge of the box in client coordinates
|
|
98
|
+
* @param {number} boxWidth - the width of the box
|
|
99
|
+
* @param {boolean} rtl - right-to-left
|
|
100
|
+
* @returns {number} px from the start of the box
|
|
101
|
+
*
|
|
102
|
+
* @example
|
|
103
|
+
* host.addEventListener("pointerdown", e => {
|
|
104
|
+
* const r = host.getBoundingClientRect();
|
|
105
|
+
* console.info(toLogicalX(e.clientX, r.left + host.clientLeft, host.clientWidth, true)); // px from the right edge
|
|
106
|
+
* });
|
|
107
|
+
*
|
|
108
|
+
* @since 1.1.98
|
|
109
|
+
* @category Utilities
|
|
110
|
+
*/
|
|
111
|
+
export declare function toLogicalX(clientX: number, boxLeft: number, boxWidth: number, rtl: boolean): number;
|
|
112
|
+
/**
|
|
113
|
+
* Swaps the arrow keys "left" and "right" in a harmonized shortcut (e.g. `"cmd left"` → `"cmd right"`) – the
|
|
114
|
+
* keyboard handling of a right-to-left table, so that → moves backwards in reading direction.
|
|
115
|
+
*
|
|
116
|
+
* @param {string} shortcut - a harmonized shortcut (`harmonizeShortcut`)
|
|
117
|
+
* @returns {string} the shortcut with swapped arrow keys
|
|
118
|
+
*
|
|
119
|
+
* @example
|
|
120
|
+
* mirrorArrowKeys("left"); // "right"
|
|
121
|
+
* mirrorArrowKeys("cmd right"); // "cmd left"
|
|
122
|
+
*
|
|
123
|
+
* @since 1.1.98
|
|
124
|
+
* @category Keyboard
|
|
125
|
+
*/
|
|
126
|
+
export declare function mirrorArrowKeys(shortcut: string): string;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The writing direction of a table ({@link TableOptionsIf.direction}):
|
|
3
|
+
*
|
|
4
|
+
* - `"ltr"` (default): left to right – the first column on the left.
|
|
5
|
+
* - `"rtl"`: right to left (Arabic, Hebrew, Persian, Urdu …) – the first column on the right, horizontal scrolling,
|
|
6
|
+
* fixed columns, tree indent, resize handles and arrow keys mirrored.
|
|
7
|
+
* - `"auto"`: the direction of the page where the table is created (`dir="rtl"` on `<html>`, a parent element or the
|
|
8
|
+
* host itself → `"rtl"`).
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* const tableOptions: TableOptionsIf = { ...new TableOptions(), direction: "rtl" };
|
|
12
|
+
*
|
|
13
|
+
* @since 1.1.98
|
|
14
|
+
* @category Options
|
|
15
|
+
*/
|
|
16
|
+
export type TableDirection = "ltr" | "rtl" | "auto";
|
|
17
|
+
/**
|
|
18
|
+
* A resolved writing direction – what {@link TableApi.getDirection} returns (`"auto"` is already decided).
|
|
19
|
+
*
|
|
20
|
+
* @since 1.1.98
|
|
21
|
+
* @category Options
|
|
22
|
+
*/
|
|
23
|
+
export type ResolvedTableDirection = "ltr" | "rtl";
|
|
@@ -10,6 +10,7 @@ import { SideIdent } from '../data/side-ident.type.js';
|
|
|
10
10
|
import { SortState } from '../data/common/sort-state.type.js';
|
|
11
11
|
import { SortedOptionsIf } from '../data/options/sorted-options.if.js';
|
|
12
12
|
import { HtmlStyle } from './data/html-style.type.js';
|
|
13
|
+
import { ResolvedTableDirection } from '../rtl/table-direction.type.js';
|
|
13
14
|
|
|
14
15
|
/** @category DOM */
|
|
15
16
|
export interface AddColumnDivPara {
|
|
@@ -37,7 +38,54 @@ export declare class ConvenienceDomService {
|
|
|
37
38
|
readonly domService: DomServiceIf;
|
|
38
39
|
/** Width of the focus frame of a cell in px (WCAG 2.4.7: visible focus, not only a color). @since 1.1.91 */
|
|
39
40
|
static focusBorderWidthInPx: number;
|
|
41
|
+
/** Right-to-left: `left` is written as `right` and vice versa (see {@link setDirection}). */
|
|
42
|
+
private rtl;
|
|
43
|
+
/** The physical CSS property of the inline start (`left`, right-to-left `right`). */
|
|
44
|
+
private startKey;
|
|
45
|
+
/** The physical CSS property of the inline end (`right`, right-to-left `left`). */
|
|
46
|
+
private endKey;
|
|
40
47
|
constructor(domService: DomServiceIf);
|
|
48
|
+
/**
|
|
49
|
+
* Sets the writing direction of the table. All positions of the table are computed from the **start** of a row
|
|
50
|
+
* (x = 0 is the first column); in right-to-left this service writes them as `right` instead of `left` – in
|
|
51
|
+
* {@link setStyle}, {@link applyStyle}, {@link applyStyleInPx} and all `add…` methods – so that the whole table is
|
|
52
|
+
* mirrored. Called once by the table before anything is positioned.
|
|
53
|
+
*
|
|
54
|
+
* @param {ResolvedTableDirection} direction - `"ltr"` or `"rtl"`
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* const dom = new ConvenienceDomService(new SimpleDomService());
|
|
58
|
+
* dom.setDirection("rtl");
|
|
59
|
+
* const div = document.createElement("div");
|
|
60
|
+
* dom.setStyle(div, "left", "20px"); // div.style.right = "20px"
|
|
61
|
+
*
|
|
62
|
+
* @since 1.1.98
|
|
63
|
+
*/
|
|
64
|
+
setDirection(direction: ResolvedTableDirection): void;
|
|
65
|
+
/**
|
|
66
|
+
* The writing direction set with {@link setDirection} (default `"ltr"`).
|
|
67
|
+
*
|
|
68
|
+
* @returns {ResolvedTableDirection} `"ltr"` or `"rtl"`
|
|
69
|
+
* @since 1.1.98
|
|
70
|
+
*/
|
|
71
|
+
getDirection(): ResolvedTableDirection;
|
|
72
|
+
/**
|
|
73
|
+
* The physical CSS property for a logical position key: in right-to-left `left` ↔ `right`, everything else as is.
|
|
74
|
+
*
|
|
75
|
+
* @param {string} key - a CSS property
|
|
76
|
+
* @returns {string} the property to write
|
|
77
|
+
* @since 1.1.98
|
|
78
|
+
*/
|
|
79
|
+
toPhysicalStyleKey(key: string): string;
|
|
80
|
+
/**
|
|
81
|
+
* The position of an element from the inline start in px, as written by this service (`style.left`, right-to-left
|
|
82
|
+
* `style.right`); 0 if it has none.
|
|
83
|
+
*
|
|
84
|
+
* @param {HTMLElement} ele - an element positioned by this service
|
|
85
|
+
* @returns {number} px
|
|
86
|
+
* @since 1.1.98
|
|
87
|
+
*/
|
|
88
|
+
getInlineStart(ele: HTMLElement): number;
|
|
41
89
|
setStyle(el: any, style: string, value: any): any;
|
|
42
90
|
applyStyle(ele: HTMLDivElement, style: HtmlStyle): HTMLDivElement;
|
|
43
91
|
applyDisplayNoneStyle(ele: HTMLDivElement): HTMLDivElement;
|
|
@@ -46,7 +94,7 @@ export declare class ConvenienceDomService {
|
|
|
46
94
|
applyStylePosistionRelative(ele: HTMLDivElement): HTMLDivElement;
|
|
47
95
|
applyStylePosistionAbsolute(ele: HTMLDivElement): HTMLDivElement;
|
|
48
96
|
applyStyleFullSize(ele: HTMLDivElement): HTMLDivElement;
|
|
49
|
-
applyStyleOverflowAuto(overflowX: "
|
|
97
|
+
applyStyleOverflowAuto(overflowX: "auto" | "scroll" | undefined, overflowY: "auto" | "scroll" | undefined, ele: HTMLDivElement): HTMLDivElement;
|
|
50
98
|
applyStyleNoPadding(ele: HTMLDivElement): HTMLDivElement;
|
|
51
99
|
appendRelativeChildDiv(parent: HTMLDivElement): DivScope;
|
|
52
100
|
appendText(parent: HTMLDivElement, text: string): HTMLElement;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Options of an Excel export ({@link ExcelService.downloadExcel}, {@link ExcelService.createExcelBlob}).
|
|
3
|
+
*
|
|
4
|
+
* @example
|
|
5
|
+
* // an Arabic sheet: column A on the right, like the table
|
|
6
|
+
* await new ExcelService().downloadExcel(matrix, "sales.xlsx", "", { rightToLeft: true });
|
|
7
|
+
*
|
|
8
|
+
* @since 1.1.98
|
|
9
|
+
* @category Export & clipboard
|
|
10
|
+
*/
|
|
11
|
+
export interface ExcelExportOptionsIf {
|
|
12
|
+
/**
|
|
13
|
+
* The worksheet runs from right to left (`<sheetView rightToLeft="1">`): column A on the right.
|
|
14
|
+
* {@link TableApi.downloadExcel} sets it for a right-to-left table ({@link TableOptionsIf.direction}).
|
|
15
|
+
*/
|
|
16
|
+
rightToLeft?: boolean;
|
|
17
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ExcelExportOptionsIf } from './excel-export-options.if.js';
|
|
1
2
|
import { ExcelServiceIf } from './excel-service.if.js';
|
|
2
3
|
|
|
3
4
|
/**
|
|
@@ -32,18 +33,23 @@ export declare class ExcelService implements ExcelServiceIf {
|
|
|
32
33
|
* @param {Array<Array<any>>} matrix - A 2D array representing the data to be included in the Excel file. Each inner array corresponds to a row in the sheet.
|
|
33
34
|
* @param {string} [filename='file.xlsx'] - The name of the Excel file to be downloaded. Defaults to 'file.xlsx'.
|
|
34
35
|
* @param {string} [author=''] - The author's name to include as metadata in the Excel file. Optional parameter.
|
|
36
|
+
* @param {ExcelExportOptionsIf} [options] - e.g. `{ rightToLeft: true }` for a sheet from right to left (since 1.1.98)
|
|
35
37
|
* @return {void} Does not return a value.
|
|
36
38
|
* @throws {Error} Throws an error if the input matrix is not a valid 2D array or if the filename is an empty string.
|
|
37
39
|
*/
|
|
38
|
-
downloadExcel(matrix: Array<Array<any>>, filename?: string, author?: string): Promise<void>;
|
|
40
|
+
downloadExcel(matrix: Array<Array<any>>, filename?: string, author?: string, options?: ExcelExportOptionsIf): Promise<void>;
|
|
39
41
|
/**
|
|
40
42
|
* Creates the .xlsx file as a Blob (compressed), e.g. to upload it instead of downloading it.
|
|
41
43
|
*
|
|
42
44
|
* @example
|
|
43
45
|
* const blob = await new ExcelService().createExcelBlob([["Name", "City"], ["Ann", "Berlin"]]);
|
|
44
46
|
* await fetch("/api/upload", { method: "POST", body: blob });
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* // a sheet from right to left (column A on the right), since 1.1.98
|
|
50
|
+
* const rtlBlob = await new ExcelService().createExcelBlob([["المدينة"], ["الرياض"]], "", { rightToLeft: true });
|
|
45
51
|
*/
|
|
46
|
-
createExcelBlob(matrix: Array<Array<any>>, author?: string): Promise<Blob>;
|
|
52
|
+
createExcelBlob(matrix: Array<Array<any>>, author?: string, options?: ExcelExportOptionsIf): Promise<Blob>;
|
|
47
53
|
private generateMap;
|
|
48
54
|
private getX1WorksheetsSheet1Xml;
|
|
49
55
|
/** Number format → cell style index (1-based; 0 = default), filled by withNumberFormats() before the sheet is written. */
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { ExcelExportOptionsIf } from './excel-export-options.if.js';
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* Writes an Excel file from a matrix of values. The default implementation is {@link ExcelService};
|
|
3
5
|
* pass your own as last argument of the `TableScope` constructor to change how {@link TableApi.downloadExcel} exports.
|
|
@@ -6,7 +8,7 @@
|
|
|
6
8
|
*/
|
|
7
9
|
export interface ExcelServiceIf {
|
|
8
10
|
/** Creates the file from `matrix` (rows of values) and hands it to the browser as download. */
|
|
9
|
-
downloadExcel(matrix: Array<Array<any>>, filename: string, author?: string): void | Promise<void>;
|
|
11
|
+
downloadExcel(matrix: Array<Array<any>>, filename: string, author?: string, options?: ExcelExportOptionsIf): void | Promise<void>;
|
|
10
12
|
/**
|
|
11
13
|
* True if the service understands cells of the form {@link ExcelFormattedValueIf} (`{ value, numberFormat }`).
|
|
12
14
|
* Only then {@link TableApi.downloadExcel} exports percentages of „Show values as“ columns with the format `0.0%`;
|
package/lib/table/table-api.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ResolvedTableDirection } from './rtl/table-direction.type.js';
|
|
1
2
|
import { GeOverlayKind } from './overlay/ge-overlay-kind.type.js';
|
|
2
3
|
import { TableStateIf, TableStatePart } from './state/table-state.if.js';
|
|
3
4
|
import { SortState } from './data/common/sort-state.type.js';
|
|
@@ -52,6 +53,7 @@ import { CellRange } from './data/common/cell-range.js';
|
|
|
52
53
|
* | columns | {@link autoResizeColumns}, {@link setColumnWidth}, {@link recalcColumnWidths}, {@link getColumnIndex} |
|
|
53
54
|
* | tree | {@link expandAll}, {@link collapseAll}, {@link setRowExpanded} |
|
|
54
55
|
* | state | {@link getState}, {@link applyState}, {@link resetState} (with {@link TableOptionsIf.autoRestoreOptions}) |
|
|
56
|
+
* | right-to-left | {@link getDirection} (with {@link TableOptionsIf.direction}) |
|
|
55
57
|
* | lifecycle | {@link destroy} |
|
|
56
58
|
*
|
|
57
59
|
* @example
|
|
@@ -218,7 +220,8 @@ export declare class TableApi {
|
|
|
218
220
|
* This method allows programmatic scrolling of the table viewport to exact pixel positions.
|
|
219
221
|
* It delegates the scrolling operation to the underlying TableScope instance.
|
|
220
222
|
*
|
|
221
|
-
* @param {number} px - The horizontal pixel coordinate to scroll to
|
|
223
|
+
* @param {number} px - The horizontal pixel coordinate to scroll to: px from the start of the row – 0 = the first
|
|
224
|
+
* column (leftmost position; right-to-left the rightmost, see {@link TableOptionsIf.direction}). Defaults to 0.
|
|
222
225
|
* @param {number} py - The vertical pixel coordinate to scroll to. Defaults to 0 (topmost position).
|
|
223
226
|
* @returns {void}
|
|
224
227
|
*
|
|
@@ -233,7 +236,7 @@ export declare class TableApi {
|
|
|
233
236
|
* @example
|
|
234
237
|
* // Scroll only vertically, keeping the current horizontal position
|
|
235
238
|
* // (an omitted or undefined px means 0; for rows use scrollToIndex(-1, rowIndex))
|
|
236
|
-
* tableApi.scrollToPixel(tableApi.getTableScope().
|
|
239
|
+
* tableApi.scrollToPixel(tableApi.getTableScope().getViewportScrollLeft(), 300);
|
|
237
240
|
*
|
|
238
241
|
* @example
|
|
239
242
|
* // Example in a component that needs precise scrolling control
|
|
@@ -263,6 +266,23 @@ export declare class TableApi {
|
|
|
263
266
|
* @see {@link ensureRowIsVisible} - For scrolling to make a specific row visible
|
|
264
267
|
*/
|
|
265
268
|
scrollToPixel(px?: number, py?: number): void;
|
|
269
|
+
/**
|
|
270
|
+
* The writing direction of the table – {@link TableOptionsIf.direction} with `"auto"` already decided (from the page
|
|
271
|
+
* when the table was built).
|
|
272
|
+
*
|
|
273
|
+
* In `"rtl"` the first column is on the right; positions of the API stay "from the start": {@link scrollToPixel},
|
|
274
|
+
* {@link GeScrollEvent.scrollLeft} and the scroll part of {@link getState} count from the right edge.
|
|
275
|
+
*
|
|
276
|
+
* @returns {ResolvedTableDirection} `"ltr"` or `"rtl"`
|
|
277
|
+
*
|
|
278
|
+
* @example
|
|
279
|
+
* if (tableApi.getDirection() === "rtl") {
|
|
280
|
+
* console.info("first column on the right");
|
|
281
|
+
* }
|
|
282
|
+
*
|
|
283
|
+
* @since 1.1.98
|
|
284
|
+
*/
|
|
285
|
+
getDirection(): ResolvedTableDirection;
|
|
266
286
|
/**
|
|
267
287
|
* Scrolls the table to display the specified row and column indices at the top-left corner of the viewport.
|
|
268
288
|
*
|
|
@@ -125,6 +125,11 @@ export declare class TableScope extends RenderScope implements OnActionTriggered
|
|
|
125
125
|
/** Last comparator passed to `sort()`; re-applied after filtering. Cleared by a header sort. */
|
|
126
126
|
private lastSortCompareFn?;
|
|
127
127
|
constructor(hostElement: HTMLDivElement, tableModel: TableModelIf, domService: DomServiceIf, tableOptions: TableOptionsIf, eventListener: EventListenerIf, copyService?: CopyServiceIf, excelService?: ExcelServiceIf);
|
|
128
|
+
/**
|
|
129
|
+
* The options of a nested table (master/detail `ctx.createTable()`): as given; without an own `direction` in a
|
|
130
|
+
* right-to-left table an object that reads everything else from the given options (prototype) and adds `"rtl"`.
|
|
131
|
+
*/
|
|
132
|
+
private nestedTableOptions;
|
|
128
133
|
/** Time of the last Tab key press on the page (the host is focused right after it). */
|
|
129
134
|
private lastTabKeyTime;
|
|
130
135
|
/**
|