@cdmx/wappler_ag_grid 2.1.3 → 2.1.5

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.
Files changed (32) hide show
  1. package/.claude/settings.json +7 -0
  2. package/CHANGELOG.md +23 -1
  3. package/app_connect/components.hjson +6 -5
  4. package/dmx-ag-grid.js +37 -12
  5. package/package.json +5 -2
  6. package/tests/01-basic-render.html +106 -0
  7. package/tests/02-themes-locale.html +98 -0
  8. package/tests/03-editing.html +119 -0
  9. package/tests/04-selection.html +103 -0
  10. package/tests/05-action-buttons.html +97 -0
  11. package/tests/06-export.html +80 -0
  12. package/tests/07-import.html +80 -0
  13. package/tests/08-formatting.html +91 -0
  14. package/tests/09-grouping.html +74 -0
  15. package/tests/10-state-persistence.html +84 -0
  16. package/tests/11-layout.html +72 -0
  17. package/tests/12-methods.html +93 -0
  18. package/tests/13-flags-styles.html +374 -0
  19. package/tests/14-compact-view.html +112 -0
  20. package/tests/README.md +146 -0
  21. package/tests/data/sample-data.js +52 -0
  22. package/tests/dmxAppConnect/dmxAppConnect.js +10 -0
  23. package/tests/dmxAppConnect/dmxAppConnect.js.map +1 -0
  24. package/tests/index.html +107 -0
  25. package/tests/lib/common-head.html +30 -0
  26. package/tests/lib/page-template.js +54 -0
  27. package/tests/lib/run-collector.js +32 -0
  28. package/tests/lib/test-helpers.js +145 -0
  29. package/tests/lib/test-suite.css +178 -0
  30. package/tests/run-all-puppeteer.cjs +180 -0
  31. package/tests/run-all.cjs +144 -0
  32. package/tests/serve.cjs +66 -0
package/tests/05-action-buttons.html ADDED
@@ -0,0 +1,97 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>05 · Action Buttons</title>
6
+ <link rel="stylesheet" href="./lib/test-suite.css">
7
+ <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
8
+ <link rel="stylesheet" href="../ag-theme-custom.css">
9
+ <link rel="stylesheet" href="../switch-toggle-slider.css">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
12
+ <script src="./lib/version-banner.js" defer></script>
13
+ <script src="./lib/test-helpers.js" defer></script>
14
+ <script src="./lib/page-template.js" defer></script>
15
+ <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
16
+ <script src="../dmx-ag-grid.js" defer></script>
17
+ <script src="./data/sample-data.js" defer></script>
18
+ </head>
19
+ <body is="dmx-app" id="page05">
20
+
21
+ <script>
22
+ window.addEventListener('DOMContentLoaded', () => {
23
+ TestPage.header({
24
+ title: '05 · Action Buttons',
25
+ summary: 'Built-in edit/view/delete actions plus 5 custom buttons with conditions.'
26
+ });
27
+ });
28
+ </script>
29
+
30
+ <main class="test-main">
31
+ <dmx-test-data id="rows" source="employees"></dmx-test-data>
32
+ <dmx-event-log id="actLog"></dmx-event-log>
33
+
34
+ <section class="feature">
35
+ <h2>Standard actions + 5 custom buttons</h2>
36
+ <p class="desc">
37
+ Pinned right. Built-in edit/view/delete + custom button1..button5. <code>button2_action_btn_condition</code>
38
+ restricts button 2 to active employees only.
39
+ </p>
40
+
41
+ <div class="grid-wrap">
42
+ <dmx-ag-grid
43
+ id="actGrid"
44
+ dmx-bind:data="rows.value"
45
+ grid_theme="ag-theme-alpine"
46
+ dmx-bind:enable_actions="true"
47
+ actions_column_position="right"
48
+ dmx-bind:pin_actions="true"
49
+ dmx-bind:edit_action_btn="true" edit_action_tooltip="Edit row"
50
+ dmx-bind:view_action_btn="true" view_action_tooltip="View row"
51
+ dmx-bind:delete_action_btn="true" delete_action_tooltip="Delete row"
52
+
53
+ dmx-bind:enable_custom_action_btns="true"
54
+ dmx-bind:button1_action_btn="true" button1_action_tooltip="Promote" button1_action_icon_class="fas fa-star"
55
+ dmx-bind:button2_action_btn="true" button2_action_tooltip="Email" button2_action_icon_class="fas fa-envelope" button2_action_btn_condition="active"
56
+ dmx-bind:button3_action_btn="true" button3_action_tooltip="Archive" button3_action_icon_class="fas fa-box-archive"
57
+ dmx-bind:button4_action_btn="true" button4_action_tooltip="Flag" button4_action_icon_class="fas fa-flag"
58
+ dmx-bind:button5_action_btn="true" button5_action_tooltip="Print" button5_action_icon_class="fas fa-print"
59
+
60
+ dmx-bind:pagination="false"
61
+
62
+ dmx-on:row_action_edit="actLog.add('row_action_edit')"
63
+ dmx-on:row_action_view="actLog.add('row_action_view')"
64
+ dmx-on:row_action_delete="actLog.add('row_action_delete')"
65
+ dmx-on:row_action_button1="actLog.add('row_action_button1')"
66
+ dmx-on:row_action_button2="actLog.add('row_action_button2')"
67
+ dmx-on:row_action_button3="actLog.add('row_action_button3')"
68
+ dmx-on:row_action_button4="actLog.add('row_action_button4')"
69
+ dmx-on:row_action_button5="actLog.add('row_action_button5')">
70
+ </dmx-ag-grid>
71
+ </div>
72
+
73
+ <div class="kv">
74
+ <div class="k">last action</div><div class="v" dmx-text="actLog.last.name">—</div>
75
+ <div class="k">action count</div><div class="v" dmx-text="actLog.count">0</div>
76
+ <div class="k">field captured</div><div class="v" dmx-text="actGrid.fields">{}</div>
77
+ <div class="k">id captured</div><div class="v" dmx-text="actGrid.id">—</div>
78
+ </div>
79
+
80
+ <div class="log" id="log-out"></div>
81
+ </section>
82
+ </main>
83
+
84
+ <script>
85
+ (function pollLog() {
86
+ if (!window.dmx || !dmx.app) return setTimeout(pollLog, 100);
87
+ const log = dmx.app.get('actLog');
88
+ if (!log) return setTimeout(pollLog, 100);
89
+ setInterval(() => {
90
+ const evs = log.events || [];
91
+ document.getElementById('log-out').innerHTML =
92
+ evs.slice(0, 30).map(e => '<div class="log-entry">' + e.at + ' — ' + e.name + '</div>').join('');
93
+ }, 400);
94
+ })();
95
+ </script>
96
+ </body>
97
+ </html>
package/tests/06-export.html ADDED
@@ -0,0 +1,80 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>06 · Export · AG Grid Test Suite</title>
6
+ <link rel="stylesheet" href="./lib/test-suite.css">
7
+ <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
8
+ <link rel="stylesheet" href="../ag-theme-custom.css">
9
+ <link rel="stylesheet" href="../switch-toggle-slider.css">
10
+ <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
11
+ <script src="./lib/version-banner.js" defer></script>
12
+ <script src="./lib/test-helpers.js" defer></script>
13
+ <script src="./lib/page-template.js" defer></script>
14
+ <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
15
+ <script src="../node_modules/pdfmake/build/pdfmake.min.js" defer></script>
16
+ <script src="../node_modules/pdfmake/build/vfs_fonts.js" defer></script>
17
+ <script src="../node_modules/exceljs/dist/exceljs.min.js" defer></script>
18
+ <script src="../dmx-ag-grid.js" defer></script>
19
+ <script src="./data/sample-data.js" defer></script>
20
+ </head>
21
+ <body is="dmx-app" id="page06">
22
+
23
+ <script>
24
+ window.addEventListener('DOMContentLoaded', () => {
25
+ TestPage.header({
26
+ title: '06 · Export',
27
+ summary: 'CSV / XLSX / PDF export with trim, hidden-field handling, HTML stripping, custom filename.'
28
+ });
29
+ });
30
+ </script>
31
+
32
+ <main class="test-main">
33
+ <dmx-test-data id="rows" source="employees"></dmx-test-data>
34
+
35
+ <section class="feature">
36
+ <h2>Multi-format export</h2>
37
+ <p class="desc">
38
+ All three exporters enabled. Buttons call <code>exportGrid('csv'|'xls'|'pdf')</code>.
39
+ Use the file save dialog to confirm filenames.
40
+ </p>
41
+
42
+ <div class="grid-wrap">
43
+ <dmx-ag-grid
44
+ id="expGrid"
45
+ dmx-bind:data="rows.value"
46
+ grid_theme="ag-theme-alpine"
47
+ dmx-bind:export_to_csv="true" export_csv_filename="employees-export.csv"
48
+ dmx-bind:export_to_xls="true" export_xls_filename="employees-export.xlsx"
49
+ dmx-bind:export_to_pdf="true" export_pdf_filename="employees-export.pdf"
50
+ dmx-bind:export_trim_data="true"
51
+ dmx-bind:export_remove_html="true"
52
+ dmx-bind:export_exclude_hidden_fields="true"
53
+ export_exclude_fields="email"
54
+ dmx-bind:hide_fields="rating"
55
+ dmx-bind:pagination="false">
56
+ </dmx-ag-grid>
57
+ </div>
58
+
59
+ <div class="controls" style="margin-top: 12px;">
60
+ <button class="primary" onclick="TestKit.callMethod('expGrid','exportGrid','csv')">Export CSV</button>
61
+ <button onclick="TestKit.callMethod('expGrid','exportGrid','xls')">Export XLSX</button>
62
+ <button onclick="TestKit.callMethod('expGrid','exportGrid','pdf')">Export PDF</button>
63
+ </div>
64
+ </section>
65
+
66
+ <section class="feature">
67
+ <h2>Export with no options</h2>
68
+ <p class="desc">Disable all exporters. Calling <code>exportGrid()</code> should log an error (still callable but harmless).</p>
69
+ <div class="grid-wrap">
70
+ <dmx-ag-grid id="noExp" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine"
71
+ dmx-bind:export_to_csv="false" dmx-bind:export_to_xls="false" dmx-bind:export_to_pdf="false"
72
+ dmx-bind:pagination="false"></dmx-ag-grid>
73
+ </div>
74
+ <div class="controls">
75
+ <button onclick="TestKit.callMethod('noExp','exportGrid','csv')">exportGrid('csv') — should warn</button>
76
+ </div>
77
+ </section>
78
+ </main>
79
+ </body>
80
+ </html>
package/tests/07-import.html ADDED
@@ -0,0 +1,80 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>07 · Import · AG Grid Test Suite</title>
6
+ <link rel="stylesheet" href="./lib/test-suite.css">
7
+ <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
8
+ <link rel="stylesheet" href="../ag-theme-custom.css">
9
+ <link rel="stylesheet" href="../switch-toggle-slider.css">
10
+ <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
11
+ <script src="./lib/version-banner.js" defer></script>
12
+ <script src="./lib/test-helpers.js" defer></script>
13
+ <script src="./lib/page-template.js" defer></script>
14
+ <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
15
+ <script src="../node_modules/papaparse/papaparse.min.js" defer></script>
16
+ <script src="../node_modules/read-excel-file/bundle/read-excel-file.min.js" defer></script>
17
+ <script src="../dmx-ag-grid.js" defer></script>
18
+ <script src="./data/sample-data.js" defer></script>
19
+ </head>
20
+ <body is="dmx-app" id="page07">
21
+
22
+ <script>
23
+ window.addEventListener('DOMContentLoaded', () => {
24
+ TestPage.header({
25
+ title: '07 · Import',
26
+ summary: 'Parse uploaded CSV/XLSX into fileData via importFileData(fileInputId).'
27
+ });
28
+ });
29
+ </script>
30
+
31
+ <main class="test-main">
32
+
33
+ <section class="feature">
34
+ <h2>Import CSV / Excel</h2>
35
+ <p class="desc">
36
+ Pick a file (CSV via Papa, XLSX via read-excel-file) — its parsed rows land in
37
+ <code>importGrid.fileData</code>. The "load into grid" button below mirrors that array into the grid's data binding.
38
+ </p>
39
+
40
+ <dmx-test-data id="rows" dmx-bind:data="[]"></dmx-test-data>
41
+
42
+ <div class="controls">
43
+ <input type="file" id="csvFile" accept=".csv,.xlsx,.xls">
44
+ <button class="primary" onclick="TestKit.callMethod('importGrid','importFileData','csvFile')">importFileData('csvFile')</button>
45
+ <button onclick="copyFileDataToGrid()">load parsed rows into grid</button>
46
+ </div>
47
+
48
+ <div class="grid-wrap">
49
+ <dmx-ag-grid id="importGrid" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine" dmx-bind:pagination="true" dmx-bind:pagination_page_size="10"></dmx-ag-grid>
50
+ </div>
51
+
52
+ <div class="kv">
53
+ <div class="k">parsed fileData length</div>
54
+ <div class="v" dmx-text="importGrid.fileData.length">0</div>
55
+ </div>
56
+
57
+ <details style="margin-top: 12px;">
58
+ <summary>Sample CSV (copy/paste into a .csv file to test)</summary>
59
+ <pre class="log" id="sample-csv"></pre>
60
+ </details>
61
+ </section>
62
+ </main>
63
+
64
+ <script>
65
+ document.getElementById('sample-csv').textContent =
66
+ 'id,first_name,last_name,department,salary,active\n' +
67
+ '1,Imported,One,Engineering,50000,true\n' +
68
+ '2,Imported,Two,Sales,60000,false\n' +
69
+ '3,Imported,Three,Marketing,55000,true\n';
70
+
71
+ function copyFileDataToGrid() {
72
+ const c = TestKit.grid('importGrid');
73
+ const rowsHost = TestKit.grid('rows');
74
+ if (!c || !rowsHost) return;
75
+ const fd = c.get('fileData') || [];
76
+ rowsHost.set('value', fd);
77
+ }
78
+ </script>
79
+ </body>
80
+ </html>
package/tests/08-formatting.html ADDED
@@ -0,0 +1,91 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>08 · Formatting &amp; Types · AG Grid Test Suite</title>
6
+ <link rel="stylesheet" href="./lib/test-suite.css">
7
+ <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
8
+ <link rel="stylesheet" href="../ag-theme-custom.css">
9
+ <link rel="stylesheet" href="../switch-toggle-slider.css">
10
+ <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
11
+ <script src="./lib/version-banner.js" defer></script>
12
+ <script src="./lib/test-helpers.js" defer></script>
13
+ <script src="./lib/page-template.js" defer></script>
14
+ <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
15
+ <script src="../dmx-ag-grid.js" defer></script>
16
+ <script src="./data/sample-data.js" defer></script>
17
+ </head>
18
+ <body is="dmx-app" id="page08">
19
+
20
+ <script>
21
+ window.addEventListener('DOMContentLoaded', () => {
22
+ TestPage.header({
23
+ title: '08 · Formatting & Types',
24
+ summary: 'amount_fields with precision, date_format + timezone, numeric column align, custom column types.'
25
+ });
26
+ });
27
+ </script>
28
+
29
+ <main class="test-main">
30
+ <dmx-test-data id="rows" source="employees"></dmx-test-data>
31
+
32
+ <section class="feature">
33
+ <h2>Amount + date formatting</h2>
34
+ <p class="desc">
35
+ <code>amount_fields="salary,rating"</code> with precision <code>2</code>, <code>date_format="dd/MM/yyyy"</code>
36
+ applied to <code>hire_date</code>. Numeric columns right-aligned.
37
+ </p>
38
+
39
+ <div class="grid-wrap">
40
+ <dmx-ag-grid
41
+ id="fmtGrid"
42
+ dmx-bind:data="rows.value"
43
+ grid_theme="ag-theme-alpine"
44
+ amount_fields="salary,rating"
45
+ dmx-bind:amount_field_precision="2"
46
+ date_format="dd/MM/yyyy"
47
+ date_locale="en-GB"
48
+ dmx-bind:numeric_column_align="true"
49
+ dmx-bind:pagination="false">
50
+ </dmx-ag-grid>
51
+ </div>
52
+ </section>
53
+
54
+ <section class="feature">
55
+ <h2>Custom column types (ctypes)</h2>
56
+ <p class="desc">Force <code>active</code> to render as boolean badge and <code>rating</code> as currency.</p>
57
+
58
+ <div class="grid-wrap">
59
+ <dmx-ag-grid
60
+ id="ctypeGrid"
61
+ dmx-bind:data="rows.value"
62
+ grid_theme="ag-theme-alpine"
63
+ dmx-bind:ctypes="[{field:'active', type:'boolean'},{field:'rating', type:'number'}]"
64
+ dmx-bind:cnames="{first_name:'First', last_name:'Last', hire_date:'Joined'}"
65
+ dmx-bind:cwidths='{"first_name":{"min_width":120,"max_width":160},"last_name":{"min_width":120,"max_width":160},"department":{"min_width":140,"max_width":200}}'
66
+ dmx-bind:pagination="false">
67
+ </dmx-ag-grid>
68
+ </div>
69
+ </section>
70
+
71
+ <section class="feature">
72
+ <h2>Header behaviour</h2>
73
+ <p class="desc">Wrap header text, auto header height, suppress movable columns, wrap cell text.</p>
74
+ <div class="grid-wrap">
75
+ <dmx-ag-grid
76
+ id="hdrGrid"
77
+ dmx-bind:data="rows.value"
78
+ grid_theme="ag-theme-alpine"
79
+ dmx-bind:wrap_header_text="true"
80
+ dmx-bind:auto_header_height="true"
81
+ dmx-bind:wrap_text="true"
82
+ dmx-bind:auto_height="true"
83
+ dmx-bind:suppress_movable_columns="true"
84
+ dmx-bind:header_height="60"
85
+ dmx-bind:pagination="false">
86
+ </dmx-ag-grid>
87
+ </div>
88
+ </section>
89
+ </main>
90
+ </body>
91
+ </html>
package/tests/09-grouping.html ADDED
@@ -0,0 +1,74 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>09 · Grouping &amp; Aggregation</title>
6
+ <link rel="stylesheet" href="./lib/test-suite.css">
7
+ <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
8
+ <link rel="stylesheet" href="../ag-theme-custom.css">
9
+ <link rel="stylesheet" href="../switch-toggle-slider.css">
10
+ <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
11
+ <script src="./lib/version-banner.js" defer></script>
12
+ <script src="./lib/test-helpers.js" defer></script>
13
+ <script src="./lib/page-template.js" defer></script>
14
+ <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
15
+ <script src="../dmx-ag-grid.js" defer></script>
16
+ <script src="./data/sample-data.js" defer></script>
17
+ </head>
18
+ <body is="dmx-app" id="page09">
19
+
20
+ <script>
21
+ window.addEventListener('DOMContentLoaded', () => {
22
+ TestPage.header({
23
+ title: '09 · Grouping & Aggregation',
24
+ summary: 'group_config groups columns; columns_to_sum / columns_to_count drive footer aggregates.'
25
+ });
26
+ });
27
+ </script>
28
+
29
+ <main class="test-main">
30
+ <dmx-test-data id="emp" source="employees"></dmx-test-data>
31
+ <dmx-test-data id="ord" source="orders"></dmx-test-data>
32
+
33
+ <section class="feature">
34
+ <h2>Grouped column headers</h2>
35
+ <p class="desc">
36
+ <code>group_config</code> bundles <code>first_name</code>+<code>last_name</code> under "Name" and
37
+ <code>salary</code>+<code>rating</code> under "Compensation".
38
+ </p>
39
+ <div class="grid-wrap">
40
+ <dmx-ag-grid
41
+ id="grpGrid"
42
+ dmx-bind:data="emp.value"
43
+ grid_theme="ag-theme-alpine"
44
+ dmx-bind:group_config="[{headerName:'Name', children:['first_name','last_name']}, {headerName:'Compensation', children:['salary','rating']}]"
45
+ dmx-bind:pagination="false">
46
+ </dmx-ag-grid>
47
+ </div>
48
+ </section>
49
+
50
+ <section class="feature">
51
+ <h2>Footer sum + count (orders)</h2>
52
+ <p class="desc">
53
+ <code>columns_to_sum="qty,total"</code> with precision 2; <code>columns_to_count=["customer"]</code>.
54
+ The grid shows a footer-row aggregation.
55
+ </p>
56
+ <div class="grid-wrap">
57
+ <dmx-ag-grid
58
+ id="aggGrid"
59
+ dmx-bind:data="ord.value"
60
+ grid_theme="ag-theme-alpine"
61
+ amount_fields="unit_price,total"
62
+ dmx-bind:amount_field_precision="2"
63
+ columns_to_sum="qty,total"
64
+ dmx-bind:footer_sum_precision="2"
65
+ dmx-bind:columns_to_count='[{"field":"customer","unique_values":"Acme Corp,Globex,Initech,Umbrella,Stark Ind.,Wayne Ent."}]'
66
+ dmx-bind:columns_to_count_nonunique="false"
67
+ dmx-bind:numeric_column_align="true"
68
+ dmx-bind:pagination="false">
69
+ </dmx-ag-grid>
70
+ </div>
71
+ </section>
72
+ </main>
73
+ </body>
74
+ </html>
package/tests/10-state-persistence.html ADDED
@@ -0,0 +1,84 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>10 · State Persistence</title>
6
+ <link rel="stylesheet" href="./lib/test-suite.css">
7
+ <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
8
+ <link rel="stylesheet" href="../ag-theme-custom.css">
9
+ <link rel="stylesheet" href="../switch-toggle-slider.css">
10
+ <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
11
+ <script src="./lib/version-banner.js" defer></script>
12
+ <script src="./lib/test-helpers.js" defer></script>
13
+ <script src="./lib/page-template.js" defer></script>
14
+ <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
15
+ <script src="../dmx-ag-grid.js" defer></script>
16
+ <script src="./data/sample-data.js" defer></script>
17
+ </head>
18
+ <body is="dmx-app" id="page10">
19
+
20
+ <script>
21
+ window.addEventListener('DOMContentLoaded', () => {
22
+ TestPage.header({
23
+ title: '10 · State Persistence',
24
+ summary: 'Save/reset column state in localStorage, applied filter introspection, programmatic filters.'
25
+ });
26
+ });
27
+ </script>
28
+
29
+ <main class="test-main">
30
+ <dmx-test-data id="rows" source="employees"></dmx-test-data>
31
+
32
+ <section class="feature">
33
+ <h2>Column + filter state</h2>
34
+ <p class="desc">
35
+ Reorder/hide a column, then click "saveColumnState" — the state lands in <code>localStorage</code>
36
+ under <code>dmxState-&lt;column_state_storage_key&gt;</code>. Reload the page and the state restores.
37
+ </p>
38
+
39
+ <div class="grid-wrap">
40
+ <dmx-ag-grid
41
+ id="stateGrid"
42
+ dmx-bind:data="rows.value"
43
+ grid_theme="ag-theme-alpine"
44
+ column_state_storage_key="ag-grid-test-state"
45
+ dmx-bind:pagination="true"
46
+ dmx-bind:pagination_page_size="10">
47
+ </dmx-ag-grid>
48
+ </div>
49
+
50
+ <div class="controls" style="margin-top: 12px;">
51
+ <button class="primary" onclick="TestKit.callMethod('stateGrid','saveColumnState')">saveColumnState()</button>
52
+ <button onclick="TestKit.callMethod('stateGrid','resetColumnState')">resetColumnState()</button>
53
+ <button onclick="TestKit.callMethod('stateGrid','getAppliedFilters')">getAppliedFilters()</button>
54
+ <button onclick="applyDeptFilter()">apply Engineering filter</button>
55
+ <button onclick="TestKit.callMethod('stateGrid','clearFilters')">clearFilters()</button>
56
+ <button onclick="dumpLocalStorage()">log localStorage key</button>
57
+ </div>
58
+
59
+ <div class="kv">
60
+ <div class="k">filterState</div>
61
+ <div class="v" dmx-text="stateGrid.filterState">{}</div>
62
+ <div class="k">columnState (length)</div>
63
+ <div class="v" dmx-text="stateGrid.columnState.length">0</div>
64
+ </div>
65
+
66
+ <div class="log" id="ls-log"></div>
67
+ </section>
68
+ </main>
69
+
70
+ <script>
71
+ function applyDeptFilter() {
72
+ TestKit.callMethod('stateGrid', 'applyFilters', {
73
+ department: { type: 'equals', filter: 'Engineering' }
74
+ });
75
+ }
76
+ function dumpLocalStorage() {
77
+ const key = 'dmxState-ag-grid-test-state';
78
+ const v = localStorage.getItem(key);
79
+ const box = document.getElementById('ls-log');
80
+ box.textContent = key + ' = ' + (v || '(empty)');
81
+ }
82
+ </script>
83
+ </body>
84
+ </html>
package/tests/11-layout.html ADDED
@@ -0,0 +1,72 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>11 · Layout &amp; Scroll</title>
6
+ <link rel="stylesheet" href="./lib/test-suite.css">
7
+ <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
8
+ <link rel="stylesheet" href="../ag-theme-custom.css">
9
+ <link rel="stylesheet" href="../switch-toggle-slider.css">
10
+ <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
11
+ <script src="./lib/version-banner.js" defer></script>
12
+ <script src="./lib/test-helpers.js" defer></script>
13
+ <script src="./lib/page-template.js" defer></script>
14
+ <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
15
+ <script src="../dmx-ag-grid.js" defer></script>
16
+ <script src="./data/sample-data.js" defer></script>
17
+ <style>
18
+ .topbar { background: #1f2937; color: #fff; padding: 8px 16px; }
19
+ .footer { background: #1f2937; color: #fff; padding: 8px 16px; text-align: center; }
20
+ </style>
21
+ </head>
22
+ <body is="dmx-app" id="page11">
23
+ <div class="topbar">simulated fixed topbar (height ~36px)</div>
24
+
25
+ <script>
26
+ window.addEventListener('DOMContentLoaded', () => {
27
+ TestPage.header({
28
+ title: '11 · Layout & Scroll',
29
+ summary: 'autoHeight vs normal, fixed_header offset, fixed_footer, horizontal scroll, hide_id_field.'
30
+ });
31
+ });
32
+ </script>
33
+
34
+ <main class="test-main">
35
+ <dmx-test-data id="rows" source="employees"></dmx-test-data>
36
+
37
+ <section class="feature">
38
+ <h2>autoHeight + hide id</h2>
39
+ <div class="grid-wrap">
40
+ <dmx-ag-grid id="autoH" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine"
41
+ dom_layout="autoHeight" dmx-bind:hide_id_field="true" dmx-bind:pagination="false"></dmx-ag-grid>
42
+ </div>
43
+ </section>
44
+
45
+ <section class="feature">
46
+ <h2>Normal layout + fixed_header offset</h2>
47
+ <div class="grid-wrap" style="height: 360px;">
48
+ <dmx-ag-grid id="fixedH" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine"
49
+ dom_layout="normal"
50
+ dmx-bind:fixed_header="true"
51
+ topbar_class="topbar"
52
+ dmx-bind:fixed_header_offset="36"
53
+ dmx-bind:fixed_top_offset="0"
54
+ dmx-bind:pagination="false"></dmx-ag-grid>
55
+ </div>
56
+ </section>
57
+
58
+ <section class="feature">
59
+ <h2>Horizontal scroll forced</h2>
60
+ <div class="grid-wrap">
61
+ <dmx-ag-grid id="scrollH" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine"
62
+ dmx-bind:fixed_horizontal_scroll="true"
63
+ dmx-bind:always_show_horizontal_scroll="true"
64
+ dmx-bind:min_width="220"
65
+ dmx-bind:pagination="false"></dmx-ag-grid>
66
+ </div>
67
+ </section>
68
+ </main>
69
+
70
+ <div class="footer">simulated fixed footer</div>
71
+ </body>
72
+ </html>