tabulator-tables 5.1.3 → 5.1.6

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.
@@ -1,10 +1,10 @@
1
1
  import Module from '../../core/Module.js';
2
2
 
3
3
  class FrozenColumns extends Module{
4
-
4
+
5
5
  constructor(table){
6
6
  super(table);
7
-
7
+
8
8
  this.leftColumns = [];
9
9
  this.rightColumns = [];
10
10
  this.leftMargin = 0;
@@ -14,10 +14,10 @@ class FrozenColumns extends Module{
14
14
  this.active = false;
15
15
  this.scrollEndTimer = false;
16
16
  this.blocked = true;
17
-
17
+
18
18
  this.registerColumnOption("frozen");
19
19
  }
20
-
20
+
21
21
  //reset initial state
22
22
  reset(){
23
23
  this.initializationMode = "left";
@@ -27,11 +27,11 @@ class FrozenColumns extends Module{
27
27
  this.rightMargin = 0;
28
28
  this.rightMargin = 0;
29
29
  this.active = false;
30
-
30
+
31
31
  this.table.columnManager.headersElement.style.marginLeft = 0;
32
32
  this.table.columnManager.element.style.paddingRight = 0;
33
33
  }
34
-
34
+
35
35
  initialize(){
36
36
  this.subscribe("cell-layout", this.layoutCell.bind(this));
37
37
  this.subscribe("column-init", this.initializeColumn.bind(this));
@@ -44,186 +44,194 @@ class FrozenColumns extends Module{
44
44
  this.subscribe("layout-refreshing", this.blockLayout.bind(this));
45
45
  this.subscribe("layout-refreshed", this.unblockLayout.bind(this));
46
46
  }
47
-
47
+
48
48
  blockLayout(){
49
49
  this.blocked = true;
50
50
  }
51
-
51
+
52
52
  unblockLayout(){
53
53
  this.blocked = false;
54
54
  }
55
-
55
+
56
56
  layoutCell(cell){
57
57
  this.layoutElement(cell.element, cell.column)
58
58
  }
59
-
59
+
60
60
  //initialize specific column
61
61
  initializeColumn(column){
62
62
  var config = {margin:0, edge:false};
63
-
63
+
64
64
  if(!column.isGroup){
65
-
65
+
66
66
  if(this.frozenCheck(column)){
67
-
67
+
68
68
  config.position = this.initializationMode;
69
-
69
+
70
70
  if(this.initializationMode == "left"){
71
71
  this.leftColumns.push(column);
72
72
  }else{
73
73
  this.rightColumns.unshift(column);
74
74
  }
75
-
75
+
76
76
  this.active = true;
77
-
77
+
78
78
  column.modules.frozen = config;
79
79
  }else{
80
80
  this.initializationMode = "right";
81
81
  }
82
82
  }
83
83
  }
84
-
84
+
85
85
  frozenCheck(column){
86
86
  var frozen = false;
87
-
87
+
88
88
  if(column.parent.isGroup && column.definition.frozen){
89
89
  console.warn("Frozen Column Error - Parent column group must be frozen, not individual columns or sub column groups");
90
90
  }
91
-
91
+
92
92
  if(column.parent.isGroup){
93
93
  return this.frozenCheck(column.parent);
94
94
  }else{
95
95
  return column.definition.frozen;
96
96
  }
97
-
97
+
98
98
  return frozen;
99
99
  }
100
-
100
+
101
101
  //quick layout to smooth horizontal scrolling
102
102
  scrollHorizontal(){
103
103
  var rows;
104
-
104
+
105
105
  if(this.active){
106
106
  clearTimeout(this.scrollEndTimer);
107
107
 
108
- //layout all rows after scroll is complete
109
- this.scrollEndTimer = setTimeout(() => {
110
- this.layout();
111
- }, 100);
112
-
113
108
  rows = this.table.rowManager.getVisibleRows();
114
-
115
- this.calcMargins();
116
-
109
+
110
+ this.calcMargins(true);
111
+
117
112
  this.layoutColumnPosition();
118
-
113
+
119
114
  this.layoutCalcRows();
120
-
115
+
121
116
  rows.forEach((row) => {
122
117
  if(row.type === "row"){
123
118
  this.layoutRow(row);
124
119
  }
125
120
  });
126
-
127
- this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
128
121
  }
129
122
  }
130
-
123
+
131
124
  //calculate margins for rows
132
- calcMargins(){
133
- this.leftMargin = this._calcSpace(this.leftColumns, this.leftColumns.length) + "px";
134
- this.table.columnManager.headersElement.style.marginLeft = this.leftMargin;
135
-
136
- this.rightMargin = this._calcSpace(this.rightColumns, this.rightColumns.length) + "px";
137
- this.table.columnManager.element.style.paddingRight = this.rightMargin;
138
-
125
+ calcMargins(scroll){
126
+
127
+ if(!scroll){
128
+ this.leftMargin = this._calcSpace(this.leftColumns, this.leftColumns.length) + "px";
129
+ this.rightMargin = this._calcSpace(this.rightColumns, this.rightColumns.length) + "px";
130
+ this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
131
+ }
132
+
139
133
  //calculate right frozen columns
140
134
  this.rightPadding = this.table.rowManager.element.clientWidth + this.table.columnManager.scrollLeft;
141
135
  }
142
-
136
+
143
137
  //layout calculation rows
144
138
  layoutCalcRows(){
145
139
  if(this.table.modExists("columnCalcs")){
146
140
  if(this.table.modules.columnCalcs.topInitialized && this.table.modules.columnCalcs.topRow){
147
141
  this.layoutRow(this.table.modules.columnCalcs.topRow);
148
142
  }
149
-
143
+
150
144
  if(this.table.modules.columnCalcs.botInitialized && this.table.modules.columnCalcs.botRow){
151
145
  this.layoutRow(this.table.modules.columnCalcs.botRow);
152
146
  }
153
-
147
+
154
148
  if(this.table.modExists("groupRows")){
155
149
  this.layoutGroupCalcs(this.table.modules.groupRows.getGroups())
156
150
  }
157
151
  }
158
152
  }
159
-
153
+
160
154
  layoutGroupCalcs(groups){
161
155
  groups.forEach((group) => {
162
156
  if(group.calcs.top){
163
157
  this.layoutRow(group.calcs.top);
164
158
  }
165
-
159
+
166
160
  if(group.calcs.bottom){
167
161
  this.layoutRow(group.calcs.bottom);
168
162
  }
169
-
163
+
170
164
  if(group.groupList && group.groupList.length){
171
165
  this.layoutGroupCalcs(group.groupList && group.groupList);
172
166
  }
173
167
  });
174
168
  }
175
-
169
+
176
170
  //calculate column positions and layout headers
177
171
  layoutColumnPosition(allCells){
178
-
179
172
  var leftParents = [];
173
+
174
+ var leftMargin = 0;
175
+ var rightMargin = 0;
176
+
177
+ this.table.columnManager.headersElement.style.marginLeft = this.leftMargin;
178
+ this.table.columnManager.element.style.paddingRight = this.rightMargin;
180
179
 
181
- this.leftColumns.forEach((column, i) => {
182
- column.modules.frozen.margin = (this._calcSpace(this.leftColumns, i) + this.table.columnManager.scrollLeft) + "px";
180
+ this.leftColumns.forEach((column, i) => {
181
+ column.modules.frozen.margin = (leftMargin + this.table.columnManager.scrollLeft) + "px";
183
182
 
183
+ if(column.visible){
184
+ leftMargin += column.getWidth();
185
+ }
186
+
184
187
  if(i == this.leftColumns.length - 1){
185
188
  column.modules.frozen.edge = true;
186
189
  }else{
187
190
  column.modules.frozen.edge = false;
188
191
  }
189
-
192
+
190
193
  if(column.parent.isGroup){
191
194
  var parentEl = this.getColGroupParentElement(column);
192
195
  if(!leftParents.includes(parentEl)){
193
196
  this.layoutElement(parentEl, column);
194
197
  leftParents.push(parentEl);
195
198
  }
196
-
199
+
197
200
  if(column.modules.frozen.edge){
198
201
  parentEl.classList.add("tabulator-frozen-" + column.modules.frozen.position);
199
202
  }
200
203
  }else{
201
204
  this.layoutElement(column.getElement(), column);
202
205
  }
203
-
206
+
204
207
  if(allCells){
205
208
  column.cells.forEach((cell) => {
206
209
  this.layoutElement(cell.getElement(true), column);
207
210
  });
208
211
  }
209
212
  });
210
-
213
+
211
214
  this.rightColumns.forEach((column, i) => {
212
- column.modules.frozen.margin = (this.rightPadding - this._calcSpace(this.rightColumns, i + 1)) + "px";
213
215
 
216
+ if(column.visible){
217
+ rightMargin += column.getWidth();
218
+ }
219
+
220
+ column.modules.frozen.margin = (this.rightPadding - rightMargin) + "px";
221
+
214
222
  if(i == this.rightColumns.length - 1){
215
223
  column.modules.frozen.edge = true;
216
224
  }else{
217
225
  column.modules.frozen.edge = false;
218
226
  }
219
-
220
-
227
+
228
+
221
229
  if(column.parent.isGroup){
222
230
  this.layoutElement(this.getColGroupParentElement(column), column);
223
231
  }else{
224
232
  this.layoutElement(column.getElement(), column);
225
233
  }
226
-
234
+
227
235
  if(allCells){
228
236
  column.cells.forEach((cell) => {
229
237
  this.layoutElement(cell.getElement(true), column);
@@ -231,83 +239,79 @@ class FrozenColumns extends Module{
231
239
  }
232
240
  });
233
241
  }
234
-
242
+
235
243
  getColGroupParentElement(column){
236
244
  return column.parent.isGroup ? this.getColGroupParentElement(column.parent) : column.getElement();
237
245
  }
238
-
246
+
239
247
  //layout columns appropriately
240
248
  layout(){
241
- var rightMargin = 0;
242
-
243
249
  if(this.active && !this.blocked){
244
250
  //calculate row padding
245
251
  this.calcMargins();
246
-
252
+
247
253
  this.table.rowManager.getDisplayRows().forEach((row) =>{
248
254
  if(row.type === "row"){
249
255
  this.layoutRow(row);
250
256
  }
251
257
  });
252
-
258
+
253
259
  this.layoutCalcRows();
254
-
260
+
255
261
  //calculate left columns
256
262
  this.layoutColumnPosition(true);
257
-
258
- this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
259
263
  }
260
264
  }
261
-
265
+
262
266
  layoutRow(row){
263
267
  var rowEl = row.getElement();
264
-
268
+
265
269
  rowEl.style.paddingLeft = this.leftMargin;
266
-
270
+
267
271
  if(this.table.options.layout === "fitDataFill" && this.rightColumns.length){
268
272
  this.table.rowManager.getTableElement().style.minWidth = "calc(100% - " + this.rightMargin + ")";
269
273
  }
270
-
274
+
271
275
  this.leftColumns.forEach((column) => {
272
276
  var cell = row.getCell(column);
273
-
277
+
274
278
  if(cell){
275
279
  this.layoutElement(cell.getElement(true), column);
276
280
  }
277
281
  });
278
-
282
+
279
283
  this.rightColumns.forEach((column) => {
280
284
  var cell = row.getCell(column);
281
-
285
+
282
286
  if(cell){
283
287
  this.layoutElement(cell.getElement(true), column);
284
288
  }
285
289
  });
286
290
  }
287
-
291
+
288
292
  layoutElement(element, column){
289
-
293
+
290
294
  if(column.modules.frozen){
291
295
  element.style.position = "absolute";
292
296
  element.style.left = column.modules.frozen.margin;
293
-
297
+
294
298
  element.classList.add("tabulator-frozen");
295
-
299
+
296
300
  if(column.modules.frozen.edge){
297
301
  element.classList.add("tabulator-frozen-" + column.modules.frozen.position);
298
302
  }
299
303
  }
300
304
  }
301
-
305
+
302
306
  _calcSpace(columns, index){
303
307
  var width = 0;
304
-
308
+
305
309
  for (let i = 0; i < index; i++){
306
310
  if(columns[i].visible){
307
311
  width += columns[i].getWidth();
308
312
  }
309
313
  }
310
-
314
+
311
315
  return width;
312
316
  }
313
317
  }
@@ -335,13 +335,11 @@ class Menu extends Module{
335
335
  }
336
336
 
337
337
  //move menu to start on bottom edge if it is too close to the edge of the screen
338
- if((y + element.offsetHeight) >= this.menuContainer.offsetHeight){
339
- element.style.top = "";
340
-
338
+ if((y + element.offsetHeight) > this.menuContainer.offsetHeight) {
341
339
  if(parentEl){
342
- element.style.bottom = (this.menuContainer.offsetHeight - parentOffset.top - parentEl.offsetHeight - 1) + "px";
340
+ element.style.top = (parseInt(element.style.top) - element.offsetHeight + parentEl.offsetHeight + 1) + "px";
343
341
  }else{
344
- element.style.bottom = (this.menuContainer.offsetHeight - y) + "px";
342
+ element.style.top = (parseInt(element.style.top) - element.offsetHeight) + "px";
345
343
  }
346
344
  }
347
345
  }
@@ -575,17 +575,18 @@ class Page extends Module{
575
575
  this.trackChanges();
576
576
  }
577
577
 
578
- _setPageCounter(totalRows){
579
- var content, currentRow;
578
+ _setPageCounter(totalRows, size, currentRow){
579
+ var content;
580
580
 
581
581
  if(this.pageCounter){
582
- currentRow = ((this.page - 1) * this.size) + 1;
583
582
 
584
583
  if(this.mode === "remote"){
584
+ size = this.size;
585
+ currentRow = ((this.page - 1) * this.size) + 1;
585
586
  totalRows = this.remoteRowCountEstimate;
586
587
  }
587
588
 
588
- content = this.pageCounter.call(this, this.size, currentRow, this.page, totalRows, this.max);
589
+ content = this.pageCounter.call(this, size, currentRow, this.page, totalRows, this.max);
589
590
 
590
591
  switch(typeof content){
591
592
  case "object":
@@ -725,7 +726,12 @@ class Page extends Module{
725
726
 
726
727
  //return appropriate rows for current page
727
728
  getRows(data){
728
- var output, start, end;
729
+ var actualRowPageSize = 0,
730
+ output, start, end, actualStartRow;
731
+
732
+ var actualRows = data.filter((row) => {
733
+ return row.type === "row";
734
+ });
729
735
 
730
736
  if(this.mode == "local"){
731
737
  output = [];
@@ -740,21 +746,30 @@ class Page extends Module{
740
746
  end = start + parseInt(this.size);
741
747
  }
742
748
 
743
-
744
749
  this._setPageButtons();
745
750
 
746
751
  for(let i = start; i < end; i++){
747
- if(data[i]){
748
- output.push(data[i]);
752
+ let row = data[i];
753
+
754
+ if(row){
755
+ output.push(row);
756
+
757
+ if(row.type === "row"){
758
+ if(!actualStartRow){
759
+ actualStartRow = row;
760
+ }
761
+
762
+ actualRowPageSize++;
763
+ }
749
764
  }
750
765
  }
751
-
752
- this._setPageCounter(data.length);
766
+
767
+ this._setPageCounter(actualRows.length, actualRowPageSize, actualStartRow ? (actualRows.indexOf(actualStartRow) + 1) : 0);
753
768
 
754
769
  return output;
755
770
  }else{
756
771
  this._setPageButtons();
757
- this._setPageCounter(data.length);
772
+ this._setPageCounter(actualRows.length);
758
773
 
759
774
  return data.slice(0);
760
775
  }
@@ -857,8 +872,8 @@ class Page extends Module{
857
872
 
858
873
  //handle the footer element being redrawn
859
874
  footerRedraw(){
860
- var footer = this.table.footerManager.element;
861
-
875
+ var footer = this.table.footerManager.containerElement;
876
+
862
877
  if((Math.ceil(footer.clientWidth) - footer.scrollWidth) < 0){
863
878
  this.pagesElement.style.display = 'none';
864
879
  }else{
@@ -5,28 +5,36 @@ export default function(pageSize, currentRow, currentPage, totalRows, totalPages
5
5
  ofEl = document.createElement("span"),
6
6
  totalEl = document.createElement("span"),
7
7
  rowsEl = document.createElement("span");
8
-
8
+
9
9
  this.table.modules.localize.langBind("pagination|counter|showing", (value) => {
10
10
  showingEl.innerHTML = value;
11
11
  });
12
-
13
- valueEl.innerHTML = " " + currentRow + "-" + Math.min((currentRow + pageSize - 1), totalRows) + " ";
14
-
12
+
15
13
  this.table.modules.localize.langBind("pagination|counter|of", (value) => {
16
14
  ofEl.innerHTML = value;
17
15
  });
18
-
19
- totalEl.innerHTML = " " + totalRows + " ";
20
-
16
+
21
17
  this.table.modules.localize.langBind("pagination|counter|rows", (value) => {
22
18
  rowsEl.innerHTML = value;
23
19
  });
24
-
25
- el.appendChild(showingEl);
26
- el.appendChild(valueEl);
27
- el.appendChild(ofEl);
28
- el.appendChild(totalEl);
29
- el.appendChild(rowsEl);
20
+
21
+ if(totalRows){
22
+ valueEl.innerHTML = " " + currentRow + "-" + Math.min((currentRow + pageSize - 1), totalRows) + " ";
23
+
24
+ totalEl.innerHTML = " " + totalRows + " ";
25
+
26
+ el.appendChild(showingEl);
27
+ el.appendChild(valueEl);
28
+ el.appendChild(ofEl);
29
+ el.appendChild(totalEl);
30
+ el.appendChild(rowsEl);
31
+ }else{
32
+ valueEl.innerHTML = " 0 ";
33
+
34
+ el.appendChild(showingEl);
35
+ el.appendChild(valueEl);
36
+ el.appendChild(rowsEl);
37
+ }
30
38
 
31
39
  return el;
32
40
  };
@@ -307,7 +307,9 @@ class SelectRow extends Module{
307
307
  self._deselectRow(self.selectedRows[0], true);
308
308
  }
309
309
 
310
- self._rowSelectionChanged(silent);
310
+ if(rowCount){
311
+ self._rowSelectionChanged(silent);
312
+ }
311
313
 
312
314
  }else{
313
315
  if(Array.isArray(rows)){