@ninebone/datagrid 0.1.2 → 0.1.3
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 +16 -158
- package/dist/nine-table.js +2 -2
- package/dist/nine-table.umd.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,166 +33,29 @@ Tired of heavy, overly complex JavaScript data grids? **Ninelab HTML Table** pre
|
|
|
33
33
|
|
|
34
34
|
```bash
|
|
35
35
|
npm install @ninebone/datagrid
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
### 2. HTML example
|
|
39
|
-
|
|
40
|
-
```html
|
|
41
|
-
<html>
|
|
42
|
-
<head>
|
|
43
|
-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@ninebone/util@latest/dist/nine-util.umd.js"></script>
|
|
44
|
-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@ninebone/datagrid@latest/dist/nine-table.umd.js"></script>
|
|
45
|
-
</head>
|
|
46
|
-
<body>
|
|
47
|
-
|
|
48
|
-
<div style="height: 600px;">
|
|
49
|
-
<ninelab-table show-footer="true">
|
|
50
|
-
<table row-indicator="true">
|
|
51
|
-
<colgroup>
|
|
52
|
-
<col width="50" fixed="left"/>
|
|
53
|
-
<col width="130"/>
|
|
54
|
-
<col width="100"/>
|
|
55
|
-
<col width="110"/>
|
|
56
|
-
</colgroup>
|
|
57
|
-
<thead>
|
|
58
|
-
<tr>
|
|
59
|
-
<th cell-type="checkbox"></th>
|
|
60
|
-
<th>Avatar & Name</th>
|
|
61
|
-
<th>Status Badge</th>
|
|
62
|
-
<th>Input Editor</th>
|
|
63
|
-
</tr>
|
|
64
|
-
</thead>
|
|
65
|
-
<tbody>
|
|
66
|
-
<tr>
|
|
67
|
-
<!-- Checkbox Cell -->
|
|
68
|
-
<td data-bind="sel" cell-type="checkbox"></td>
|
|
69
|
-
|
|
70
|
-
<!-- Custom Image Renderer -->
|
|
71
|
-
<td data-bind="NAME" data-expr="host.renderImage(data.PIC)" html="true"></td>
|
|
72
|
-
|
|
73
|
-
<!-- Custom Badge / Chart Renderer -->
|
|
74
|
-
<td data-expr="host.renderBadge(data.REC1, data.REC2)" html="true"></td>
|
|
75
|
-
|
|
76
|
-
<!-- Inline Input Binding -->
|
|
77
|
-
<td data-bind="NAME" cell-type="input" enable="data.REC1 > 30"></td>
|
|
78
|
-
</tr>
|
|
79
|
-
</tbody>
|
|
80
|
-
</table>
|
|
81
|
-
</ninelab-table>
|
|
82
|
-
</div>
|
|
83
|
-
|
|
84
|
-
<script>
|
|
85
|
-
const grd = document.querySelector("nine-table");
|
|
86
|
-
|
|
87
|
-
// Define custom provider helper functions used in data-expr
|
|
88
|
-
grd.provider.add({
|
|
89
|
-
getCommonCode: (group) => exampleData.generateCommonCode(group),
|
|
90
|
-
renderImage: (v) => `<img src="${v}" style="vertical-align:middle; width:58px; height:58px; border-radius:50%;" />`,
|
|
91
|
-
renderBadge: (v1, v2) => `<span>Score: ${Number(v1) + Number(v2)}</span>`,
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
grd.addEventListener("load", () => {
|
|
95
|
-
// Binding Data
|
|
96
|
-
grd.data.set([
|
|
97
|
-
{
|
|
98
|
-
A: "a",
|
|
99
|
-
...
|
|
100
|
-
},
|
|
101
|
-
...
|
|
102
|
-
]);
|
|
103
|
-
});
|
|
104
|
-
</script>
|
|
105
|
-
</body>
|
|
106
|
-
</html>
|
|
107
|
-
|
|
108
36
|
```
|
|
109
|
-
# Ninelab HTML Table (`@ninebone/datagrid`)
|
|
110
|
-
|
|
111
|
-
> **Blazing-fast performance powered by native HTML tags** — A next-generation table extension supporting 1,000,000+ rows virtual rendering and seamless inline editing out of the box.
|
|
112
|
-
|
|
113
|
-
[](https://opensource.org/licenses/MIT)
|
|
114
|
-
[](https://www.npmjs.com/)
|
|
115
|
-
|
|
116
|
-
Tired of heavy, overly complex JavaScript data grids? **Ninelab HTML Table** preserves the familiar structure of native HTML tags while leveraging advanced DOM virtualization to handle massive datasets effortlessly and provide a frictionless inline editing experience.
|
|
117
|
-
|
|
118
|
-
---
|
|
119
|
-
|
|
120
|
-
## Key Features
|
|
121
|
-
|
|
122
|
-
- **1M+ DOM Virtualized Rendering:** Scroll and render over a million rows in a fraction of a second without dropping frames.
|
|
123
|
-
- **Seamless Inline Editing & Form Binding:** Native support for Text, Number, Date, Color, Checkbox, Radio, and Combo (Autocomplete) input types.
|
|
124
|
-
- **HTML Tag-Based (Zero Learning Curve):** No complicated JS configuration objects required—build tables using familiar tag structures.
|
|
125
|
-
- **Shadow DOM & CSS Variables:** Perfect style encapsulation with zero CSS pollution, easily customizable via CSS variables.
|
|
126
|
-
- **Framework Agnostic:** Drops seamlessly into React, Vue, Svelte, or Vanilla JS.
|
|
127
|
-
|
|
128
|
-
---
|
|
129
|
-
|
|
130
|
-
## Live Demo & Previews
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
- [Live Demo](https://ninebone.github.io/datagrid/)
|
|
135
|
-
|
|
136
|
-
---
|
|
137
|
-
|
|
138
|
-
## Quick Start
|
|
139
|
-
|
|
140
|
-
### 1. Installation
|
|
141
|
-
|
|
142
|
-
```bash
|
|
143
|
-
npm install @ninebone/datagrid
|
|
144
37
|
|
|
145
38
|
|
|
146
39
|
### 2. HTML example
|
|
147
40
|
|
|
148
41
|
```html
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
</colgroup>
|
|
165
|
-
<thead>
|
|
166
|
-
<tr>
|
|
167
|
-
<th cell-type="checkbox"></th>
|
|
168
|
-
<th>Avatar & Name</th>
|
|
169
|
-
<th>Status Badge</th>
|
|
170
|
-
<th>Input Editor</th>
|
|
171
|
-
</tr>
|
|
172
|
-
</thead>
|
|
173
|
-
<tbody>
|
|
174
|
-
<tr>
|
|
175
|
-
<!-- Checkbox Cell -->
|
|
176
|
-
<td data-bind="sel" cell-type="checkbox"></td>
|
|
177
|
-
|
|
178
|
-
<!-- Custom Image Renderer -->
|
|
179
|
-
<td data-bind="NAME" data-expr="host.renderImage(data.PIC)" html="true"></td>
|
|
180
|
-
|
|
181
|
-
<!-- Custom Badge / Chart Renderer -->
|
|
182
|
-
<td data-expr="host.renderBadge(data.REC1, data.REC2)" html="true"></td>
|
|
183
|
-
|
|
184
|
-
<!-- Inline Input Binding -->
|
|
185
|
-
<td data-bind="NAME" cell-type="input" enable="data.REC1 > 30"></td>
|
|
186
|
-
</tr>
|
|
187
|
-
</tbody>
|
|
188
|
-
</table>
|
|
189
|
-
</ninelab-table>
|
|
190
|
-
</div>
|
|
191
|
-
|
|
192
|
-
<script>
|
|
42
|
+
<ninelab-table show-footer="true">
|
|
43
|
+
<table row-indicator="true">
|
|
44
|
+
<tbody>
|
|
45
|
+
<tr>
|
|
46
|
+
<td data-bind="sel" cell-type="checkbox"></td>
|
|
47
|
+
<td data-bind="NAME" data-expr="host.renderImage(data.PIC)" html="true"></td>
|
|
48
|
+
<td data-expr="host.renderBadge(data.REC1, data.REC2)" html="true"></td>
|
|
49
|
+
<td data-bind="NAME" cell-type="input" enable="data.REC1 > 30"></td>
|
|
50
|
+
</tr>
|
|
51
|
+
</tbody>
|
|
52
|
+
</table>
|
|
53
|
+
</ninelab-table>
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
<script>
|
|
193
57
|
const grd = document.querySelector("nine-table");
|
|
194
58
|
|
|
195
|
-
// Define custom provider helper functions used in data-expr
|
|
196
59
|
grd.provider.add({
|
|
197
60
|
getCommonCode: (group) => exampleData.generateCommonCode(group),
|
|
198
61
|
renderImage: (v) => `<img src="${v}" style="vertical-align:middle; width:58px; height:58px; border-radius:50%;" />`,
|
|
@@ -203,16 +66,11 @@ npm install @ninebone/datagrid
|
|
|
203
66
|
// Binding Data
|
|
204
67
|
grd.data.set([
|
|
205
68
|
{
|
|
206
|
-
A: "a",
|
|
207
|
-
...
|
|
208
69
|
},
|
|
209
70
|
...
|
|
210
71
|
]);
|
|
211
72
|
});
|
|
212
|
-
|
|
213
|
-
</body>
|
|
214
|
-
</html>
|
|
215
|
-
|
|
73
|
+
</script>
|
|
216
74
|
```
|
|
217
75
|
|
|
218
76
|
|
package/dist/nine-table.js
CHANGED
|
@@ -2993,7 +2993,7 @@ var P = class {
|
|
|
2993
2993
|
let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE"), t = e.length, n = e.map((e, n) => {
|
|
2994
2994
|
let r = n === 0 ? "active" : "", i = e.id || `sheet${n + 1}`;
|
|
2995
2995
|
return `<nine-table-sheet class="${r}" data-index="${n}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>` + (n < t - 1 ? `<nine-splitter class="h" data-split-index="${n}"></nine-splitter>` : "");
|
|
2996
|
-
}).join(""), r = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.1.
|
|
2996
|
+
}).join(""), r = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.1.3/dist/css/nine-table.css\";"];
|
|
2997
2997
|
nine["nine-table"] && nine["nine-table"].cssFile && r.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
|
|
2998
2998
|
<style>
|
|
2999
2999
|
${r.join("\n")}
|
|
@@ -3130,7 +3130,7 @@ var P = class {
|
|
|
3130
3130
|
#i;
|
|
3131
3131
|
#a = 0;
|
|
3132
3132
|
constructor() {
|
|
3133
|
-
super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.1.
|
|
3133
|
+
super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.1.3"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this), this.#r = new I(this), this.#i = new L(this), this.#c();
|
|
3134
3134
|
}
|
|
3135
3135
|
connectedCallback() {
|
|
3136
3136
|
setTimeout(() => {
|
package/dist/nine-table.umd.js
CHANGED
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
|
|
79
79
|
<div class="ng-col-mover-grip"></div>
|
|
80
80
|
<div class="ng-col-mover-indi"></div>
|
|
81
|
-
`,this.#m={mainBody:this.querySelector(`.ng-sheet-body .ng-container-body`),hscrollbar:this.querySelector(`nine-table-hscrollbar`),vscrollbar:this.querySelector(`nine-table-vscrollbar`),content:this.querySelector(`.ng-sheet-body .ng-sheet-body-content`),scrollHolder:this.querySelector(`.ng-sheet-body .ng-virtual-height-holder`)}};#w=()=>{let e=this.querySelector(`.ng-container-left table`),t=this.querySelector(`.ng-container-body table`),n=this.querySelector(`.ng-container-right table`),r=Array.from(e.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`)),i=Array.from(t.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`)),a=Array.from(n.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`));this.#T(r,i,a);let o=Array.from(e.querySelectorAll(`tfoot tr`)),s=Array.from(t.querySelectorAll(`tfoot tr`)),c=Array.from(n.querySelectorAll(`tfoot tr`));this.#T(o,s,c)};#T=(e,t,n)=>{setTimeout(()=>{let r=Math.max(e.length,t.length,n.length);for(let i=0;i<r;i++){let r=[e[i]?.getBoundingClientRect().height||0,t[i]?.getBoundingClientRect().height||0,n[i]?.getBoundingClientRect().height||0],a=Math.max(...r);a>0&&(e[i]&&(e[i].style.height=`${a}px`),t[i]&&(t[i].style.height=`${a}px`),n[i]&&(n[i].style.height=`${a}px`))}})};#E=()=>{let e=this.querySelector(`.ng-sheet-body`);if(!e)return;let t=null;e.addEventListener(`mouseover`,n=>{let r=n.target.closest(`tr`);if(!r||!r.dataset.row&&r.dataset.row!==`0`)return;let i=r.dataset.row;t!==i&&(t=i,e.querySelectorAll(`tr[data-row="${i}"]`).forEach(e=>{e.classList.add(`hover`)}))}),e.addEventListener(`mouseout`,n=>{let r=n.target.closest(`tr`);if(!r)return;let i=n.relatedTarget;r.contains(i)||(e.querySelectorAll(`tr.hover`).forEach(e=>{e.classList.remove(`hover`)}),t=null)})};#D=()=>{[this.#d].forEach(e=>{new Set([...Reflect.ownKeys(e),...Reflect.ownKeys(Object.getPrototypeOf(e))]).forEach(t=>{if(t===`constructor`||String(t).startsWith(`#`))return;let n=e[t];typeof n==`function`?this[t]||(this[t]=(...t)=>n.apply(e,t)):typeof n==`object`&&n&&(this[t]||(this[t]=n))})})};disconnectedCallback(){this.#a?.destroy(),this.#o?.destroy(),this.innerHTML=``}};customElements.get(`nine-table-sheet`)||customElements.define(`nine-table-sheet`,P);var F=class{#e;constructor(e){this.#e=e,this.#t()}#t=()=>{this.#n(),this.#r()};set loading(e){e?this.#e.classList.add(`loading`):this.#e.classList.remove(`loading`)}#n=()=>{let e=Array.from(this.#e.children).filter(e=>e.tagName.toUpperCase()===`TABLE`),t=e.length,n=e.map((e,n)=>{let r=n===0?`active`:``,i=e.id||`sheet${n+1}`;return`<nine-table-sheet class="${r}" data-index="${n}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>`+(n<t-1?`<nine-splitter class="h" data-split-index="${n}"></nine-splitter>`:``)}).join(``),r=[`@import "https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.1.
|
|
81
|
+
`,this.#m={mainBody:this.querySelector(`.ng-sheet-body .ng-container-body`),hscrollbar:this.querySelector(`nine-table-hscrollbar`),vscrollbar:this.querySelector(`nine-table-vscrollbar`),content:this.querySelector(`.ng-sheet-body .ng-sheet-body-content`),scrollHolder:this.querySelector(`.ng-sheet-body .ng-virtual-height-holder`)}};#w=()=>{let e=this.querySelector(`.ng-container-left table`),t=this.querySelector(`.ng-container-body table`),n=this.querySelector(`.ng-container-right table`),r=Array.from(e.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`)),i=Array.from(t.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`)),a=Array.from(n.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`));this.#T(r,i,a);let o=Array.from(e.querySelectorAll(`tfoot tr`)),s=Array.from(t.querySelectorAll(`tfoot tr`)),c=Array.from(n.querySelectorAll(`tfoot tr`));this.#T(o,s,c)};#T=(e,t,n)=>{setTimeout(()=>{let r=Math.max(e.length,t.length,n.length);for(let i=0;i<r;i++){let r=[e[i]?.getBoundingClientRect().height||0,t[i]?.getBoundingClientRect().height||0,n[i]?.getBoundingClientRect().height||0],a=Math.max(...r);a>0&&(e[i]&&(e[i].style.height=`${a}px`),t[i]&&(t[i].style.height=`${a}px`),n[i]&&(n[i].style.height=`${a}px`))}})};#E=()=>{let e=this.querySelector(`.ng-sheet-body`);if(!e)return;let t=null;e.addEventListener(`mouseover`,n=>{let r=n.target.closest(`tr`);if(!r||!r.dataset.row&&r.dataset.row!==`0`)return;let i=r.dataset.row;t!==i&&(t=i,e.querySelectorAll(`tr[data-row="${i}"]`).forEach(e=>{e.classList.add(`hover`)}))}),e.addEventListener(`mouseout`,n=>{let r=n.target.closest(`tr`);if(!r)return;let i=n.relatedTarget;r.contains(i)||(e.querySelectorAll(`tr.hover`).forEach(e=>{e.classList.remove(`hover`)}),t=null)})};#D=()=>{[this.#d].forEach(e=>{new Set([...Reflect.ownKeys(e),...Reflect.ownKeys(Object.getPrototypeOf(e))]).forEach(t=>{if(t===`constructor`||String(t).startsWith(`#`))return;let n=e[t];typeof n==`function`?this[t]||(this[t]=(...t)=>n.apply(e,t)):typeof n==`object`&&n&&(this[t]||(this[t]=n))})})};disconnectedCallback(){this.#a?.destroy(),this.#o?.destroy(),this.innerHTML=``}};customElements.get(`nine-table-sheet`)||customElements.define(`nine-table-sheet`,P);var F=class{#e;constructor(e){this.#e=e,this.#t()}#t=()=>{this.#n(),this.#r()};set loading(e){e?this.#e.classList.add(`loading`):this.#e.classList.remove(`loading`)}#n=()=>{let e=Array.from(this.#e.children).filter(e=>e.tagName.toUpperCase()===`TABLE`),t=e.length,n=e.map((e,n)=>{let r=n===0?`active`:``,i=e.id||`sheet${n+1}`;return`<nine-table-sheet class="${r}" data-index="${n}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>`+(n<t-1?`<nine-splitter class="h" data-split-index="${n}"></nine-splitter>`:``)}).join(``),r=[`@import "https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.1.3/dist/css/nine-table.css";`];nine[`nine-table`]&&nine[`nine-table`].cssFile&&r.push(`@import "${nine[`nine-table`].cssFile}";`),this.#e.shadowRoot.innerHTML=`
|
|
82
82
|
<style>
|
|
83
83
|
${r.join(`
|
|
84
84
|
`)}
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
|
|
106
106
|
if (!data && !host) return "";
|
|
107
107
|
return ${i};
|
|
108
|
-
`),this.#n.set(i,e)),e(t,n,this.#e)}return i}catch{return e}}},L=class{#e;constructor(e){this.#e=e}provider={style:{value:``},add:e=>{if(!e||typeof e!=`object`)return;let{style:t,...n}=e;t&&typeof t==`string`&&(this.provider.style.value=t),Object.keys(n).length>0&&setTimeout(()=>{Object.entries(n).forEach(([e,t])=>{typeof t==`function`&&(this.#e[e]=t)}),this.#e.rerenderer()})}}},R=class{#e;constructor(e){this.#e=e,[`col`,`row`].forEach(e=>{this[e]=new Proxy({},{get:(t,n)=>{let r=this.#t();if(!r||!r[e])return;let i=r[e][n];return typeof i==`function`?(...t)=>i.apply(r[e],t):i}})})}getActiveSheets(){return this.#e.shadow.querySelectorAll(`nine-table-sheet.active`)}#t(){let e=this.getActiveSheets();return e.length>0?e[0]:null}},z=class extends HTMLElement{#e;#t;#n;#r;#i;#a=0;constructor(){super(),[`NINE-TABLE`].includes(this.tagName)&&r.log(`Welcome nine-table`,`0.1.
|
|
108
|
+
`),this.#n.set(i,e)),e(t,n,this.#e)}return i}catch{return e}}},L=class{#e;constructor(e){this.#e=e}provider={style:{value:``},add:e=>{if(!e||typeof e!=`object`)return;let{style:t,...n}=e;t&&typeof t==`string`&&(this.provider.style.value=t),Object.keys(n).length>0&&setTimeout(()=>{Object.entries(n).forEach(([e,t])=>{typeof t==`function`&&(this.#e[e]=t)}),this.#e.rerenderer()})}}},R=class{#e;constructor(e){this.#e=e,[`col`,`row`].forEach(e=>{this[e]=new Proxy({},{get:(t,n)=>{let r=this.#t();if(!r||!r[e])return;let i=r[e][n];return typeof i==`function`?(...t)=>i.apply(r[e],t):i}})})}getActiveSheets(){return this.#e.shadow.querySelectorAll(`nine-table-sheet.active`)}#t(){let e=this.getActiveSheets();return e.length>0?e[0]:null}},z=class extends HTMLElement{#e;#t;#n;#r;#i;#a=0;constructor(){super(),[`NINE-TABLE`].includes(this.tagName)&&r.log(`Welcome nine-table`,`0.1.3`),this.#e=this.attachShadow({mode:`open`}),this.#t=new s(this),this.#r=new L(this),this.#i=new R(this),this.#c()}connectedCallback(){setTimeout(()=>{this.#a=this.querySelectorAll(`table`)?.length,this.fields=new c(this),this.exprEngine=new I(this),this.#s(),this.#n=new F(this),this.#o()})}disconnectedCallback(){}#o=()=>{let e=0,t=setInterval(()=>{e++;let n=this.shadow.querySelectorAll(`nine-table-sheet`);if(e>=50&&clearInterval(t),n.length>=this.#a){let e=0;n.forEach(t=>{t.loaded&&e++}),e>=this.#a&&(clearInterval(t),this.loaded=!0,this.dispatchEvent(new CustomEvent(i.EVENT.LOAD,{bubbles:!0,detail:{target:this}})))}},100)};get shadow(){return this.#e}get dataManager(){return this.#t}get data(){return this.#t.data}setData(e){this.#t.data.set(e),this.refresh()}refresh(){this.activeSheet?.invalidate()}set loading(e){this.#n&&(this.#n.loading=e)}rerenderer(){this.activeSheet?.querySelectorAll(`tbody.body th,tbody.body td`).forEach(e=>{Array.from(e.children).find(e=>e.tagName.toLowerCase().startsWith(`cell-`)&&typeof e.rerenderer==`function`)?.rerenderer()})}sheet=e=>{if(e===null||e<0)return this.activeSheet;let t=Array.from(this.shadow.querySelectorAll(`nine-table-sheet`));return typeof e==`number`?t[e]||null:typeof e==`string`?this.shadow.querySelector(`nine-table-sheet#${e}, nine-table-sheet[data-sheet-id="${e}"]`)||null:t[0]||null};get sheets(){return Array.from(this.shadow.querySelectorAll(`nine-table-sheet`))}get activeSheet(){return this.shadow.querySelector(`nine-table-sheet.active`)||null}#s(){let e=new Set;this.querySelectorAll(`[data-source]`).forEach(t=>{let n=t.getAttribute(`data-source`);if(!n)return;let r=n.matchAll(/(?:host\.)?([a-zA-Z0-9_$]+)\s*\(/g);for(let t of r){let n=t[1];n&&n!==`host`&&e.add(n)}}),e.forEach(e=>{let t=null;Object.defineProperty(this,e,{set:e=>{t=e,this.rerenderer()},get:()=>t,configurable:!0,enumerable:!0})})}execute=e=>{setTimeout(()=>{this.loading=!0,setTimeout(()=>{try{e.call(this)}finally{this.loading=!1}})})};#c(){[this.#r,this.#i].forEach(e=>{new Set([...Reflect.ownKeys(e),...Reflect.ownKeys(Object.getPrototypeOf(e))]).forEach(t=>{if(t===`constructor`||String(t).startsWith(`#`))return;let n=e[t];typeof n==`function`?this[t]||(this[t]=(...t)=>n.apply(e,t)):typeof n==`object`&&n&&(this[t]||(this[t]=n))})})}};customElements.get(`nine-table`)||customElements.define(`nine-table`,z),customElements.get(`nine-table-simple`)||customElements.define(`nine-table-simple`,class extends z{connectedCallback(){this.setAttribute(`theme`,`simple`),super.connectedCallback()}});var B=class extends HTMLElement{constructor(){super()}applyBaseStyle(){}connectedCallback(){}},V=new Map,H=class extends B{#e;#t;#n;#r;#i;constructor(){super()}get#a(){return this.#r.getAttribute(`update-row-state`)===`false`}get host(){return this.#e}get sheet(){return this.#t}get cell(){return this.#r}get tr(){return this.#n}get attr(){return this.#i}connectedCallback(){super.connectedCallback(),this.#e=this.getRootNode().host,this.#r=this.closest(`th,td`),this.#n=this.#r.closest(`tr`),this.#t=this.#n.closest(`nine-table-sheet`),this.#r.classList.add(this.tagName),this.#i={};for(let e=0;e<this.#r.attributes.length;e++){let t=this.#r.attributes[e].name;[`text-align`,`class`,`cell-type`,`data-bind`,`data-expr`,`data-col`,`tabindex`].includes(t)||(this.#i[t]=this.#r.attributes[e].value)}if(!this.#r)return;let e=this.shadowRoot||this;e.querySelectorAll(`button, ng-expand-button`).forEach(e=>{e.addEventListener(`click`,()=>{let e=this.getAttribute(`onbuttonclick`)||this.getAttribute(`onButtonClick`)||this.#r?.getAttribute(`onbuttonclick`)||this.#r?.getAttribute(`onButtonClick`),t=this.data,n=parseInt(this.#r.dataset.row,10);if(e&&this.#e){e=e.replace(`()`,``);let r=e.match(/^(\w+)\s*\(/)?.[1]||e;typeof this.#e[r]==`function`?this.#e[r].call(this.#e,t,n,this.#r):typeof this.#e.exprFunction==`function`&&this.#e.exprFunction(e).call(this,t,n)}})});let t=e.querySelector(`.renderer`);t&&this.getAttribute(`link`)===`true`&&(t.classList.add(`link`),t.addEventListener(`click`,()=>{let e=this.getAttribute(`onlinkclick`)||this.getAttribute(`onLinkClick`),t=this.data,n=parseInt(this.#r.dataset.row,10);if(e&&this.#e){e=e.replace(`()`,``);let r=e.match(/^(\w+)\s*\(/)?.[1]||e;typeof this.#e[r]==`function`?this.#e[r].call(this.#e,t,n,this.#r):typeof this.#e.exprFunction==`function`&&this.#e.exprFunction(e).call(this,t,n)}this.#e?.dispatchEvent(new CustomEvent(ninegrid.EVENT.LINK_CLICK,{detail:{target:this.#r,data:t,currow:n},bubbles:!0,composed:!0}))}))}get data(){let e=this.#n?.data;if(!e)return null;if(!e.v)return e;let t=this.#e;return new Proxy(e,{get(e,n){if(n===`__ng`)return e.__ng;if(n===`v`)return e.v;let r=t?.fields?.indexOf?.(n)??-1;return r>=0?e.v[r]:e[n]}})}get value(){if(!this.#r||!this.#n?.data)return``;let e=this.#r.dataset?.bind;if(!e)return``;let t=this.#n.data;if(t.v&&Array.isArray(t.v)){let n=this.#e.fields.get().indexOf(e)??-1;return n>=0?t.v[n]??``:``}return t[e]??``}set value(e){if(!this.#r||!this.#e?.data)return;let t=parseInt(this.#n.dataset.row,10),n=this.#r.dataset.bind;!isNaN(t)&&n&&this.#e.data.setValue(t,n,e,this.#a)}get row(){return parseInt(this.#r?.dataset?.row,10)}get index(){return parseInt(this.#r?.dataset?.index,10)}isValid(){return!this.#r.classList.contains(`invalid`)}isInvalid(){return!this.isValid()}getDisplayText=(e=``)=>{if(!this.#r||!this.#r.closest(`tbody`)||!this.#n.data)return e;let t=this.#r.dataset.expr,n=this.#r.dataset.bind,r=parseInt(this.#r.dataset.row,10);if(t)try{return this.#n.getAttribute(`grouping`)===`true`?this.getGroupExprValue(t,this.#n.data,r,this.#r):this.#e.exprEngine.evaluate(t,this.#n.data,r)}catch{return e}return n?this.value??e:e};refresh(){if(!this.#r||!this.#n)return;let e=this.value;return this.#r.classList.remove(`invalid`),[`color`,`background`,`background-color`,`visible`,`enable`,`validator`].forEach(e=>{let t=this.#i[e];if(t){let n=this.#e.exprEngine.evaluate(t,this.#n.data,parseInt(this.#r.dataset.row,10));e===`validator`?n||this.#r.classList.add(`invalid`):e===`visible`?this.style.display=n?``:`none`:e===`enable`?(this.querySelectorAll(`input, button, textarea, select`).forEach(e=>{e.disabled=!n}),n?this.#r.removeAttribute(`disabled`):this.#r.setAttribute(`disabled`,`true`)):this.#r.style[e]=n}}),e}getExprValue(e,t,n){return!this.#e||!this.#e.exprEngine||e==null||e===``?e:this.#e.exprEngine.evaluate(e,t,n)}getGroupExprValue=(e,t,n,r)=>{if(!e)return``;try{n=parseInt(n,10);let i=e.replace(`()`,``).trim();if(this.#e&&typeof this.#e[i]==`function`)return this.#e[i].call(this,t,n,r);let a=i.match(/^(\w+)\s*\(\s*([\w\-]*)\s*\)/);if(a){let e=t[GROUP_IDX.CHILDREN],n=this.#e?.data?.getArray?this.#e.data.getArray():[],r=e?e.map(e=>n[e]).filter(Boolean):[],[,i,o]=a,s=this.#e;switch(i.toLowerCase()){case`count`:return r.length;case`sum`:{let e=s?.fields?.indexOf?.(o)??-1;return r.reduce((t,n)=>{let r=e>=0?n.v?.[e]:n[o];return t+(Number(r)||0)},0)}case`avg`:{if(r.length===0)return 0;let e=s?.fields?.indexOf?.(o)??-1;return r.reduce((t,n)=>{let r=e>=0?n.v?.[e]:n[o];return t+(Number(r)||0)},0)/r.length}}}if(this.#e&&typeof this.#e.exprFunction==`function`)return this.#e.exprFunction(e).call(this,t,n,this.#e.data);if(e.includes(`data.`)||e.includes(`childRecords`)||e.includes(`groupRecord`)){let i=V.get(`grp_`+e);return i||(i=Function(`groupRecord`,`row`,`cell`,`host`,`
|
|
109
109
|
const indices = groupRecord[3]; // GROUP_IDX.CHILDREN = 3
|
|
110
110
|
const allRecords = host?.data?.getArray ? host.data.getArray() : [];
|
|
111
111
|
|