tabulator-tables 5.6.1 → 6.0.0

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 (167) hide show
  1. package/bower.json +1 -1
  2. package/build/{Bundler.js → Bundler.mjs} +8 -6
  3. package/build/rollup.mjs +9 -0
  4. package/dist/css/tabulator.css +62 -0
  5. package/dist/css/tabulator.css.map +1 -1
  6. package/dist/css/tabulator.min.css +1 -1
  7. package/dist/css/tabulator.min.css.map +1 -1
  8. package/dist/css/tabulator_bootstrap3.css +72 -0
  9. package/dist/css/tabulator_bootstrap3.css.map +1 -1
  10. package/dist/css/tabulator_bootstrap3.min.css +1 -1
  11. package/dist/css/tabulator_bootstrap3.min.css.map +1 -1
  12. package/dist/css/tabulator_bootstrap4.css +78 -0
  13. package/dist/css/tabulator_bootstrap4.css.map +1 -1
  14. package/dist/css/tabulator_bootstrap4.min.css +1 -1
  15. package/dist/css/tabulator_bootstrap4.min.css.map +1 -1
  16. package/dist/css/tabulator_bootstrap5.css +78 -0
  17. package/dist/css/tabulator_bootstrap5.css.map +1 -1
  18. package/dist/css/tabulator_bootstrap5.min.css +1 -1
  19. package/dist/css/tabulator_bootstrap5.min.css.map +1 -1
  20. package/dist/css/tabulator_bulma.css +84 -0
  21. package/dist/css/tabulator_bulma.css.map +1 -1
  22. package/dist/css/tabulator_bulma.min.css +1 -1
  23. package/dist/css/tabulator_bulma.min.css.map +1 -1
  24. package/dist/css/tabulator_materialize.css +77 -0
  25. package/dist/css/tabulator_materialize.css.map +1 -1
  26. package/dist/css/tabulator_materialize.min.css +1 -1
  27. package/dist/css/tabulator_materialize.min.css.map +1 -1
  28. package/dist/css/tabulator_midnight.css +72 -0
  29. package/dist/css/tabulator_midnight.css.map +1 -1
  30. package/dist/css/tabulator_midnight.min.css +1 -1
  31. package/dist/css/tabulator_midnight.min.css.map +1 -1
  32. package/dist/css/tabulator_modern.css +82 -0
  33. package/dist/css/tabulator_modern.css.map +1 -1
  34. package/dist/css/tabulator_modern.min.css +1 -1
  35. package/dist/css/tabulator_modern.min.css.map +1 -1
  36. package/dist/css/tabulator_semanticui.css +74 -0
  37. package/dist/css/tabulator_semanticui.css.map +1 -1
  38. package/dist/css/tabulator_semanticui.min.css +1 -1
  39. package/dist/css/tabulator_semanticui.min.css.map +1 -1
  40. package/dist/css/tabulator_simple.css +75 -0
  41. package/dist/css/tabulator_simple.css.map +1 -1
  42. package/dist/css/tabulator_simple.min.css +1 -1
  43. package/dist/css/tabulator_simple.min.css.map +1 -1
  44. package/dist/css/tabulator_site.css +85 -0
  45. package/dist/css/tabulator_site.css.map +1 -1
  46. package/dist/css/tabulator_site.min.css +1 -1
  47. package/dist/css/tabulator_site.min.css.map +1 -1
  48. package/dist/js/tabulator.js +3882 -2809
  49. package/dist/js/tabulator.js.map +1 -1
  50. package/dist/js/tabulator.min.js +2 -2
  51. package/dist/js/tabulator.min.js.map +1 -1
  52. package/dist/js/tabulator_esm.js +3845 -2770
  53. package/dist/js/tabulator_esm.js.map +1 -1
  54. package/dist/js/tabulator_esm.min.js +2 -2
  55. package/dist/js/tabulator_esm.min.js.map +1 -1
  56. package/package.json +17 -17
  57. package/src/js/builds/esm.js +2 -0
  58. package/src/js/core/ColumnManager.js +15 -0
  59. package/src/js/core/Module.js +2 -4
  60. package/src/js/core/RowManager.js +1 -1
  61. package/src/js/core/Tabulator.js +35 -22
  62. package/src/js/core/TabulatorFull.js +15 -5
  63. package/src/js/core/cell/Cell.js +4 -0
  64. package/src/js/core/column/Column.js +228 -217
  65. package/src/js/core/column/ColumnComponent.js +1 -3
  66. package/src/js/core/defaults/options.js +1 -0
  67. package/src/js/core/modules/optional.js +2 -1
  68. package/src/js/core/row/Row.js +23 -11
  69. package/src/js/core/tools/DataLoader.js +1 -1
  70. package/src/js/core/tools/ModuleBinder.js +123 -75
  71. package/src/js/core/tools/TableRegistry.js +58 -55
  72. package/src/js/modules/Accessor/Accessor.js +7 -8
  73. package/src/js/modules/Accessor/defaults/accessors.js +5 -1
  74. package/src/js/modules/Ajax/Ajax.js +10 -12
  75. package/src/js/modules/Clipboard/Clipboard.js +10 -10
  76. package/src/js/modules/Clipboard/defaults/pasteActions.js +0 -43
  77. package/src/js/modules/Clipboard/defaults/pasteParsers.js +0 -55
  78. package/src/js/modules/Clipboard/extensions/extensions.js +9 -0
  79. package/src/js/modules/Clipboard/extensions/keybindings/actions.js +9 -0
  80. package/src/js/modules/Clipboard/extensions/keybindings/bindings.js +3 -0
  81. package/src/js/modules/ColumnCalcs/CalcComponent.js +2 -4
  82. package/src/js/modules/ColumnCalcs/ColumnCalcs.js +16 -18
  83. package/src/js/modules/Comms/Comms.js +5 -8
  84. package/src/js/modules/DataTree/DataTree.js +11 -11
  85. package/src/js/modules/Download/Download.js +9 -11
  86. package/src/js/modules/Edit/Edit.js +47 -15
  87. package/src/js/modules/Edit/List.js +12 -12
  88. package/src/js/modules/Edit/defaults/editors/time.js +0 -2
  89. package/src/js/modules/Edit/defaults/editors.js +0 -4
  90. package/src/js/modules/Export/Export.js +70 -62
  91. package/src/js/modules/Export/ExportColumn.js +2 -4
  92. package/src/js/modules/Export/ExportRow.js +2 -4
  93. package/src/js/modules/Export/defaults/columnLookups.js +3 -0
  94. package/src/js/modules/Export/defaults/rowLookups.js +18 -0
  95. package/src/js/modules/Filter/Filter.js +7 -9
  96. package/src/js/modules/Format/Format.js +7 -9
  97. package/src/js/modules/Format/defaults/formatters.js +0 -4
  98. package/src/js/modules/FrozenColumns/FrozenColumns.js +8 -6
  99. package/src/js/modules/FrozenRows/FrozenRows.js +4 -6
  100. package/src/js/modules/GroupRows/Group.js +2 -4
  101. package/src/js/modules/GroupRows/GroupComponent.js +2 -4
  102. package/src/js/modules/GroupRows/GroupRows.js +4 -6
  103. package/src/js/modules/History/History.js +10 -10
  104. package/src/js/modules/History/extensions/extensions.js +9 -0
  105. package/src/js/modules/History/extensions/keybindings/actions.js +27 -0
  106. package/src/js/modules/History/extensions/keybindings/bindings.js +4 -0
  107. package/src/js/modules/HtmlTableImport/HtmlTableImport.js +4 -6
  108. package/src/js/modules/Import/Import.js +7 -9
  109. package/src/js/modules/Import/defaults/importers/array.js +2 -4
  110. package/src/js/modules/Import/defaults/importers/csv.js +2 -4
  111. package/src/js/modules/Interaction/Interaction.js +4 -6
  112. package/src/js/modules/Keybindings/Keybindings.js +8 -10
  113. package/src/js/modules/Keybindings/defaults/actions.js +5 -71
  114. package/src/js/modules/Keybindings/defaults/bindings.js +0 -16
  115. package/src/js/modules/Layout/Layout.js +7 -9
  116. package/src/js/modules/Localize/Localize.js +7 -9
  117. package/src/js/modules/Menu/Menu.js +7 -9
  118. package/src/js/modules/MoveColumns/MoveColumns.js +6 -8
  119. package/src/js/modules/MoveRows/MoveRows.js +13 -45
  120. package/src/js/modules/MoveRows/defaults/receivers.js +30 -0
  121. package/src/js/modules/MoveRows/defaults/senders.js +5 -0
  122. package/src/js/modules/Mutator/Mutator.js +7 -9
  123. package/src/js/modules/Page/Page.js +7 -9
  124. package/src/js/modules/Persistence/Persistence.js +10 -12
  125. package/src/js/modules/Popup/Popup.js +4 -8
  126. package/src/js/modules/Print/Print.js +4 -6
  127. package/src/js/modules/ReactiveData/ReactiveData.js +4 -9
  128. package/src/js/modules/ResizeColumns/ResizeColumns.js +91 -53
  129. package/src/js/modules/ResizeRows/ResizeRows.js +41 -8
  130. package/src/js/modules/ResizeTable/ResizeTable.js +4 -6
  131. package/src/js/modules/ResponsiveLayout/ResponsiveLayout.js +15 -9
  132. package/src/js/modules/ResponsiveLayout/extensions/extensions.js +9 -0
  133. package/src/js/modules/SelectRange/Range.js +22 -10
  134. package/src/js/modules/SelectRange/RangeComponent.js +2 -4
  135. package/src/js/modules/SelectRange/SelectRange.js +58 -28
  136. package/src/js/modules/SelectRange/extensions/clipboard/pasteActions.js +45 -0
  137. package/src/js/modules/SelectRange/extensions/clipboard/pasteParsers.js +57 -0
  138. package/src/js/modules/SelectRange/extensions/export/columnLookups.js +11 -0
  139. package/src/js/modules/SelectRange/extensions/export/rowLookups.js +5 -0
  140. package/src/js/modules/SelectRange/extensions/extensions.js +21 -0
  141. package/src/js/modules/SelectRange/extensions/keybindings/actions.js +38 -0
  142. package/src/js/modules/SelectRange/extensions/keybindings/bindings.js +14 -0
  143. package/src/js/modules/SelectRow/SelectRow.js +12 -12
  144. package/src/js/modules/SelectRow/extensions/extensions.js +9 -0
  145. package/src/js/modules/Sort/Sort.js +16 -13
  146. package/src/js/modules/Spreadsheet/GridCalculator.js +64 -0
  147. package/src/js/modules/Spreadsheet/Sheet.js +243 -0
  148. package/src/js/modules/Spreadsheet/SheetComponent.js +59 -0
  149. package/src/js/modules/Spreadsheet/Spreadsheet.js +309 -0
  150. package/src/js/modules/Tooltip/Tooltip.js +6 -8
  151. package/src/js/modules/Validate/Validate.js +7 -9
  152. package/src/scss/tabulator.scss +79 -3
  153. package/src/scss/themes/bootstrap/tabulator_bootstrap3.scss +14 -0
  154. package/src/scss/themes/bootstrap/tabulator_bootstrap4.scss +18 -0
  155. package/src/scss/themes/bootstrap/tabulator_bootstrap5.scss +18 -0
  156. package/src/scss/themes/bulma/tabulator_bulma.scss +24 -0
  157. package/src/scss/themes/materialize/tabulator_materialize.scss +18 -0
  158. package/src/scss/themes/semanticui/tabulator_semanticui.scss +14 -0
  159. package/src/scss/themes/tabulator_midnight.scss +34 -21
  160. package/src/scss/themes/tabulator_modern.scss +23 -0
  161. package/src/scss/themes/tabulator_simple.scss +15 -0
  162. package/src/scss/themes/tabulator_site.scss +25 -0
  163. package/build/rollup.js +0 -6
  164. package/src/js/modules/Edit/defaults/editors/autocomplete.js +0 -12
  165. package/src/js/modules/Edit/defaults/editors/select.js +0 -10
  166. /package/src/js/modules/{Format/defaults → ResponsiveLayout/extensions}/formatters/responsiveCollapse.js +0 -0
  167. /package/src/js/modules/{Format/defaults → SelectRow/extensions}/formatters/rowSelection.js +0 -0
@@ -4,40 +4,43 @@ import defaultOptions from './defaults/options.js';
4
4
 
5
5
  import Cell from '../cell/Cell.js';
6
6
 
7
- class Column extends CoreFeature{
8
-
9
- constructor(def, parent){
7
+ export default class Column extends CoreFeature{
8
+
9
+ static defaultOptionList = defaultOptions;
10
+
11
+ constructor(def, parent, rowHeader){
10
12
  super(parent.table);
11
-
13
+
12
14
  this.definition = def; //column definition
13
15
  this.parent = parent; //hold parent object
14
16
  this.type = "column"; //type of element
15
17
  this.columns = []; //child columns
16
18
  this.cells = []; //cells bound to this column
19
+ this.isGroup = false;
20
+ this.isRowHeader = rowHeader;
17
21
  this.element = this.createElement(); //column header element
18
22
  this.contentElement = false;
19
23
  this.titleHolderElement = false;
20
24
  this.titleElement = false;
21
25
  this.groupElement = this.createGroupElement(); //column group holder element
22
- this.isGroup = false;
23
26
  this.hozAlign = ""; //horizontal text alignment
24
27
  this.vertAlign = ""; //vert text alignment
25
-
28
+
26
29
  //multi dimensional filed handling
27
30
  this.field ="";
28
31
  this.fieldStructure = "";
29
32
  this.getFieldValue = "";
30
33
  this.setFieldValue = "";
31
-
34
+
32
35
  this.titleDownload = null;
33
36
  this.titleFormatterRendered = false;
34
-
37
+
35
38
  this.mapDefinitions();
36
-
39
+
37
40
  this.setField(this.definition.field);
38
-
41
+
39
42
  this.modules = {}; //hold module variables;
40
-
43
+
41
44
  this.width = null; //column width
42
45
  this.widthStyled = ""; //column width pre-styled to improve render efficiency
43
46
  this.maxWidth = null; //column maximum width
@@ -46,36 +49,40 @@ class Column extends CoreFeature{
46
49
  this.minWidth = null; //column minimum width
47
50
  this.minWidthStyled = ""; //column minimum pre-styled to improve render efficiency
48
51
  this.widthFixed = false; //user has specified a width for this column
49
-
52
+
50
53
  this.visible = true; //default visible state
51
-
54
+
52
55
  this.component = null;
53
-
56
+
54
57
  //initialize column
55
58
  if(this.definition.columns){
56
-
59
+
57
60
  this.isGroup = true;
58
-
61
+
59
62
  this.definition.columns.forEach((def, i) => {
60
63
  var newCol = new Column(def, this);
61
64
  this.attachColumn(newCol);
62
65
  });
63
-
66
+
64
67
  this.checkColumnVisibility();
65
68
  }else{
66
69
  parent.registerColumnField(this);
67
70
  }
68
-
71
+
69
72
  this._initialize();
70
73
  }
71
-
74
+
72
75
  createElement (){
73
76
  var el = document.createElement("div");
74
-
77
+
75
78
  el.classList.add("tabulator-col");
76
79
  el.setAttribute("role", "columnheader");
77
80
  el.setAttribute("aria-sort", "none");
78
81
 
82
+ if(this.isRowHeader){
83
+ el.classList.add("tabulator-row-header");
84
+ }
85
+
79
86
  switch(this.table.options.columnHeaderVertAlign){
80
87
  case "middle":
81
88
  el.style.justifyContent = "center";
@@ -84,21 +91,21 @@ class Column extends CoreFeature{
84
91
  el.style.justifyContent = "flex-end";
85
92
  break;
86
93
  }
87
-
94
+
88
95
  return el;
89
96
  }
90
-
97
+
91
98
  createGroupElement (){
92
99
  var el = document.createElement("div");
93
-
100
+
94
101
  el.classList.add("tabulator-col-group-cols");
95
-
102
+
96
103
  return el;
97
104
  }
98
-
105
+
99
106
  mapDefinitions(){
100
107
  var defaults = this.table.options.columnDefaults;
101
-
108
+
102
109
  //map columnDefaults onto column definitions
103
110
  if(defaults){
104
111
  for(let key in defaults){
@@ -107,10 +114,10 @@ class Column extends CoreFeature{
107
114
  }
108
115
  }
109
116
  }
110
-
117
+
111
118
  this.definition = this.table.columnManager.optionsList.generate(Column.defaultOptionList, this.definition);
112
119
  }
113
-
120
+
114
121
  checkDefinition(){
115
122
  Object.keys(this.definition).forEach((key) => {
116
123
  if(Column.defaultOptionList.indexOf(key) === -1){
@@ -125,17 +132,17 @@ class Column extends CoreFeature{
125
132
  this.getFieldValue = this.fieldStructure.length > 1 ? this._getNestedData : this._getFlatData;
126
133
  this.setFieldValue = this.fieldStructure.length > 1 ? this._setNestedData : this._setFlatData;
127
134
  }
128
-
135
+
129
136
  //register column position with column manager
130
137
  registerColumnPosition(column){
131
138
  this.parent.registerColumnPosition(column);
132
139
  }
133
-
140
+
134
141
  //register column position with column manager
135
142
  registerColumnField(column){
136
143
  this.parent.registerColumnField(column);
137
144
  }
138
-
145
+
139
146
  //trigger position registration
140
147
  reRegisterPosition(){
141
148
  if(this.isGroup){
@@ -146,40 +153,40 @@ class Column extends CoreFeature{
146
153
  this.registerColumnPosition(this);
147
154
  }
148
155
  }
149
-
156
+
150
157
  //build header element
151
158
  _initialize(){
152
159
  var def = this.definition;
153
-
160
+
154
161
  while(this.element.firstChild) this.element.removeChild(this.element.firstChild);
155
-
162
+
156
163
  if(def.headerVertical){
157
164
  this.element.classList.add("tabulator-col-vertical");
158
-
165
+
159
166
  if(def.headerVertical === "flip"){
160
167
  this.element.classList.add("tabulator-col-vertical-flip");
161
168
  }
162
169
  }
163
-
170
+
164
171
  this.contentElement = this._buildColumnHeaderContent();
165
-
172
+
166
173
  this.element.appendChild(this.contentElement);
167
-
174
+
168
175
  if(this.isGroup){
169
176
  this._buildGroupHeader();
170
177
  }else{
171
178
  this._buildColumnHeader();
172
179
  }
173
-
180
+
174
181
  this.dispatch("column-init", this);
175
182
  }
176
-
183
+
177
184
  //build header element for header
178
185
  _buildColumnHeader(){
179
186
  var def = this.definition;
180
-
187
+
181
188
  this.dispatch("column-layout", this);
182
-
189
+
183
190
  //set column visibility
184
191
  if(typeof def.visible != "undefined"){
185
192
  if(def.visible){
@@ -188,7 +195,7 @@ class Column extends CoreFeature{
188
195
  this.hide(true);
189
196
  }
190
197
  }
191
-
198
+
192
199
  //assign additional css classes to column header
193
200
  if(def.cssClass){
194
201
  var classNames = def.cssClass.split(" ");
@@ -196,14 +203,14 @@ class Column extends CoreFeature{
196
203
  this.element.classList.add(className);
197
204
  });
198
205
  }
199
-
206
+
200
207
  if(def.field){
201
208
  this.element.setAttribute("tabulator-field", def.field);
202
209
  }
203
-
210
+
204
211
  //set min width if present
205
212
  this.setMinWidth(parseInt(def.minWidth));
206
-
213
+
207
214
  if (def.maxInitialWidth) {
208
215
  this.maxInitialWidth = parseInt(def.maxInitialWidth);
209
216
  }
@@ -211,63 +218,63 @@ class Column extends CoreFeature{
211
218
  if(def.maxWidth){
212
219
  this.setMaxWidth(parseInt(def.maxWidth));
213
220
  }
214
-
221
+
215
222
  this.reinitializeWidth();
216
-
223
+
217
224
  //set horizontal text alignment
218
225
  this.hozAlign = this.definition.hozAlign;
219
226
  this.vertAlign = this.definition.vertAlign;
220
-
227
+
221
228
  this.titleElement.style.textAlign = this.definition.headerHozAlign;
222
229
  }
223
-
230
+
224
231
  _buildColumnHeaderContent(){
225
232
  var contentElement = document.createElement("div");
226
233
  contentElement.classList.add("tabulator-col-content");
227
-
234
+
228
235
  this.titleHolderElement = document.createElement("div");
229
236
  this.titleHolderElement.classList.add("tabulator-col-title-holder");
230
-
237
+
231
238
  contentElement.appendChild(this.titleHolderElement);
232
-
239
+
233
240
  this.titleElement = this._buildColumnHeaderTitle();
234
-
241
+
235
242
  this.titleHolderElement.appendChild(this.titleElement);
236
-
243
+
237
244
  return contentElement;
238
245
  }
239
-
246
+
240
247
  //build title element of column
241
248
  _buildColumnHeaderTitle(){
242
249
  var def = this.definition;
243
-
250
+
244
251
  var titleHolderElement = document.createElement("div");
245
252
  titleHolderElement.classList.add("tabulator-col-title");
246
253
 
247
254
  if(def.headerWordWrap){
248
255
  titleHolderElement.classList.add("tabulator-col-title-wrap");
249
256
  }
250
-
257
+
251
258
  if(def.editableTitle){
252
259
  var titleElement = document.createElement("input");
253
260
  titleElement.classList.add("tabulator-title-editor");
254
-
261
+
255
262
  titleElement.addEventListener("click", (e) => {
256
263
  e.stopPropagation();
257
264
  titleElement.focus();
258
265
  });
259
-
266
+
260
267
  titleElement.addEventListener("mousedown", (e) => {
261
268
  e.stopPropagation();
262
269
  });
263
-
270
+
264
271
  titleElement.addEventListener("change", () => {
265
272
  def.title = titleElement.value;
266
273
  this.dispatchExternal("columnTitleChanged", this.getComponent());
267
274
  });
268
-
275
+
269
276
  titleHolderElement.appendChild(titleElement);
270
-
277
+
271
278
  if(def.field){
272
279
  this.langBind("columns|" + def.field, (text) => {
273
280
  titleElement.value = text || (def.title || " ");
@@ -275,7 +282,7 @@ class Column extends CoreFeature{
275
282
  }else{
276
283
  titleElement.value = def.title || " ";
277
284
  }
278
-
285
+
279
286
  }else{
280
287
  if(def.field){
281
288
  this.langBind("columns|" + def.field, (text) => {
@@ -285,15 +292,15 @@ class Column extends CoreFeature{
285
292
  this._formatColumnHeaderTitle(titleHolderElement, def.title || " ");
286
293
  }
287
294
  }
288
-
295
+
289
296
  return titleHolderElement;
290
297
  }
291
-
298
+
292
299
  _formatColumnHeaderTitle(el, title){
293
300
  var contents = this.chain("column-format", [this, title, el], null, () => {
294
301
  return title;
295
302
  });
296
-
303
+
297
304
  switch(typeof contents){
298
305
  case "object":
299
306
  if(contents instanceof Node){
@@ -310,13 +317,13 @@ class Column extends CoreFeature{
310
317
  el.innerHTML = contents;
311
318
  }
312
319
  }
313
-
320
+
314
321
  //build header element for column group
315
322
  _buildGroupHeader(){
316
323
  this.element.classList.add("tabulator-col-group");
317
324
  this.element.setAttribute("role", "columngroup");
318
325
  this.element.setAttribute("aria-title", this.definition.title);
319
-
326
+
320
327
  //asign additional css classes to column header
321
328
  if(this.definition.cssClass){
322
329
  var classNames = this.definition.cssClass.split(" ");
@@ -324,53 +331,53 @@ class Column extends CoreFeature{
324
331
  this.element.classList.add(className);
325
332
  });
326
333
  }
327
-
334
+
328
335
  this.titleElement.style.textAlign = this.definition.headerHozAlign;
329
-
336
+
330
337
  this.element.appendChild(this.groupElement);
331
338
  }
332
-
339
+
333
340
  //flat field lookup
334
341
  _getFlatData(data){
335
342
  return data[this.field];
336
343
  }
337
-
344
+
338
345
  //nested field lookup
339
346
  _getNestedData(data){
340
347
  var dataObj = data,
341
348
  structure = this.fieldStructure,
342
349
  length = structure.length,
343
350
  output;
344
-
351
+
345
352
  for(let i = 0; i < length; i++){
346
-
353
+
347
354
  dataObj = dataObj[structure[i]];
348
-
355
+
349
356
  output = dataObj;
350
-
357
+
351
358
  if(!dataObj){
352
359
  break;
353
360
  }
354
361
  }
355
-
362
+
356
363
  return output;
357
364
  }
358
-
365
+
359
366
  //flat field set
360
367
  _setFlatData(data, value){
361
368
  if(this.field){
362
369
  data[this.field] = value;
363
370
  }
364
371
  }
365
-
372
+
366
373
  //nested field set
367
374
  _setNestedData(data, value){
368
375
  var dataObj = data,
369
376
  structure = this.fieldStructure,
370
377
  length = structure.length;
371
-
378
+
372
379
  for(let i = 0; i < length; i++){
373
-
380
+
374
381
  if(i == length -1){
375
382
  dataObj[structure[i]] = value;
376
383
  }else{
@@ -381,39 +388,39 @@ class Column extends CoreFeature{
381
388
  break;
382
389
  }
383
390
  }
384
-
391
+
385
392
  dataObj = dataObj[structure[i]];
386
393
  }
387
394
  }
388
395
  }
389
-
396
+
390
397
  //attach column to this group
391
398
  attachColumn(column){
392
399
  if(this.groupElement){
393
400
  this.columns.push(column);
394
401
  this.groupElement.appendChild(column.getElement());
395
-
402
+
396
403
  column.columnRendered();
397
404
  }else{
398
405
  console.warn("Column Warning - Column being attached to another column instead of column group");
399
406
  }
400
407
  }
401
-
408
+
402
409
  //vertically align header in column
403
410
  verticalAlign(alignment, height){
404
-
411
+
405
412
  //calculate height of column header and group holder element
406
413
  var parentHeight = this.parent.isGroup ? this.parent.getGroupElement().clientHeight : (height || this.parent.getHeadersElement().clientHeight);
407
414
  // var parentHeight = this.parent.isGroup ? this.parent.getGroupElement().clientHeight : this.parent.getHeadersElement().clientHeight;
408
-
415
+
409
416
  this.element.style.height = parentHeight + "px";
410
-
417
+
411
418
  this.dispatch("column-height", this, this.element.style.height);
412
-
419
+
413
420
  if(this.isGroup){
414
421
  this.groupElement.style.minHeight = (parentHeight - this.contentElement.offsetHeight) + "px";
415
422
  }
416
-
423
+
417
424
  //vertically align cell contents
418
425
  // if(!this.isGroup && alignment !== "top"){
419
426
  // if(alignment === "bottom"){
@@ -422,46 +429,46 @@ class Column extends CoreFeature{
422
429
  // this.element.style.paddingTop = ((this.element.clientHeight - this.contentElement.offsetHeight) / 2) + "px";
423
430
  // }
424
431
  // }
425
-
432
+
426
433
  this.columns.forEach(function(column){
427
434
  column.verticalAlign(alignment);
428
435
  });
429
436
  }
430
-
437
+
431
438
  //clear vertical alignment
432
439
  clearVerticalAlign(){
433
440
  this.element.style.paddingTop = "";
434
441
  this.element.style.height = "";
435
442
  this.element.style.minHeight = "";
436
443
  this.groupElement.style.minHeight = "";
437
-
444
+
438
445
  this.columns.forEach(function(column){
439
446
  column.clearVerticalAlign();
440
447
  });
441
-
448
+
442
449
  this.dispatch("column-height", this, "");
443
450
  }
444
-
451
+
445
452
  //// Retrieve Column Information ////
446
453
  //return column header element
447
454
  getElement(){
448
455
  return this.element;
449
456
  }
450
-
457
+
451
458
  //return column group element
452
459
  getGroupElement(){
453
460
  return this.groupElement;
454
461
  }
455
-
462
+
456
463
  //return field name
457
464
  getField(){
458
465
  return this.field;
459
466
  }
460
-
467
+
461
468
  getTitleDownload() {
462
469
  return this.titleDownload;
463
470
  }
464
-
471
+
465
472
  //return the first column in a group
466
473
  getFirstColumn(){
467
474
  if(!this.isGroup){
@@ -474,7 +481,7 @@ class Column extends CoreFeature{
474
481
  }
475
482
  }
476
483
  }
477
-
484
+
478
485
  //return the last column in a group
479
486
  getLastColumn(){
480
487
  if(!this.isGroup){
@@ -487,15 +494,15 @@ class Column extends CoreFeature{
487
494
  }
488
495
  }
489
496
  }
490
-
497
+
491
498
  //return all columns in a group
492
499
  getColumns(traverse){
493
500
  var columns = [];
494
-
501
+
495
502
  if(traverse){
496
503
  this.columns.forEach((column) => {
497
504
  columns.push(column);
498
-
505
+
499
506
  columns = columns.concat(column.getColumns(true));
500
507
  });
501
508
  }else{
@@ -504,12 +511,12 @@ class Column extends CoreFeature{
504
511
 
505
512
  return columns;
506
513
  }
507
-
514
+
508
515
  //return all columns in a group
509
516
  getCells(){
510
517
  return this.cells;
511
518
  }
512
-
519
+
513
520
  //retrieve the top column in a group of columns
514
521
  getTopColumn(){
515
522
  if(this.parent.isGroup){
@@ -518,32 +525,32 @@ class Column extends CoreFeature{
518
525
  return this;
519
526
  }
520
527
  }
521
-
528
+
522
529
  //return column definition object
523
530
  getDefinition(updateBranches){
524
531
  var colDefs = [];
525
-
532
+
526
533
  if(this.isGroup && updateBranches){
527
534
  this.columns.forEach(function(column){
528
535
  colDefs.push(column.getDefinition(true));
529
536
  });
530
-
537
+
531
538
  this.definition.columns = colDefs;
532
539
  }
533
-
540
+
534
541
  return this.definition;
535
542
  }
536
-
543
+
537
544
  //////////////////// Actions ////////////////////
538
545
  checkColumnVisibility(){
539
546
  var visible = false;
540
-
547
+
541
548
  this.columns.forEach(function(column){
542
549
  if(column.visible){
543
550
  visible = true;
544
551
  }
545
552
  });
546
-
553
+
547
554
  if(visible){
548
555
  this.show();
549
556
  this.dispatchExternal("columnVisibilityChanged", this.getComponent(), false);
@@ -551,144 +558,148 @@ class Column extends CoreFeature{
551
558
  this.hide();
552
559
  }
553
560
  }
554
-
561
+
555
562
  //show column
556
563
  show(silent, responsiveToggle){
557
564
  if(!this.visible){
558
565
  this.visible = true;
559
-
566
+
560
567
  this.element.style.display = "";
561
-
568
+
562
569
  if(this.parent.isGroup){
563
570
  this.parent.checkColumnVisibility();
564
571
  }
565
-
572
+
566
573
  this.cells.forEach(function(cell){
567
574
  cell.show();
568
575
  });
569
-
576
+
570
577
  if(!this.isGroup && this.width === null){
571
578
  this.reinitializeWidth();
572
579
  }
573
-
580
+
574
581
  this.table.columnManager.verticalAlignHeaders();
575
-
582
+
576
583
  this.dispatch("column-show", this, responsiveToggle);
577
-
584
+
578
585
  if(!silent){
579
586
  this.dispatchExternal("columnVisibilityChanged", this.getComponent(), true);
580
587
  }
581
-
588
+
582
589
  if(this.parent.isGroup){
583
590
  this.parent.matchChildWidths();
584
591
  }
585
-
592
+
586
593
  if(!this.silent){
587
594
  this.table.columnManager.rerenderColumns();
588
595
  }
589
596
  }
590
597
  }
591
-
598
+
592
599
  //hide column
593
600
  hide(silent, responsiveToggle){
594
601
  if(this.visible){
595
602
  this.visible = false;
596
-
603
+
597
604
  this.element.style.display = "none";
598
-
605
+
599
606
  this.table.columnManager.verticalAlignHeaders();
600
-
607
+
601
608
  if(this.parent.isGroup){
602
609
  this.parent.checkColumnVisibility();
603
610
  }
604
-
611
+
605
612
  this.cells.forEach(function(cell){
606
613
  cell.hide();
607
614
  });
608
-
615
+
609
616
  this.dispatch("column-hide", this, responsiveToggle);
610
-
617
+
611
618
  if(!silent){
612
619
  this.dispatchExternal("columnVisibilityChanged", this.getComponent(), false);
613
620
  }
614
-
621
+
615
622
  if(this.parent.isGroup){
616
623
  this.parent.matchChildWidths();
617
624
  }
618
-
625
+
619
626
  if(!this.silent){
620
627
  this.table.columnManager.rerenderColumns();
621
628
  }
622
629
  }
623
630
  }
624
-
631
+
625
632
  matchChildWidths(){
626
633
  var childWidth = 0;
627
-
634
+
628
635
  if(this.contentElement && this.columns.length){
629
636
  this.columns.forEach(function(column){
630
637
  if(column.visible){
631
638
  childWidth += column.getWidth();
632
639
  }
633
640
  });
634
-
641
+
635
642
  this.contentElement.style.maxWidth = (childWidth - 1) + "px";
636
-
643
+
637
644
  if(this.parent.isGroup){
638
645
  this.parent.matchChildWidths();
639
646
  }
640
647
  }
641
648
  }
642
-
649
+
643
650
  removeChild(child){
644
651
  var index = this.columns.indexOf(child);
645
-
652
+
646
653
  if(index > -1){
647
654
  this.columns.splice(index, 1);
648
655
  }
649
-
656
+
650
657
  if(!this.columns.length){
651
658
  this.delete();
652
659
  }
653
660
  }
654
-
661
+
655
662
  setWidth(width){
656
663
  this.widthFixed = true;
657
664
  this.setWidthActual(width);
658
665
  }
659
-
666
+
660
667
  setWidthActual(width){
661
668
  if(isNaN(width)){
662
669
  width = Math.floor((this.table.element.clientWidth/100) * parseInt(width));
663
670
  }
664
-
671
+
665
672
  width = Math.max(this.minWidth, width);
666
-
673
+
667
674
  if(this.maxWidth){
668
675
  width = Math.min(this.maxWidth, width);
669
676
  }
670
-
677
+
671
678
  this.width = width;
672
679
  this.widthStyled = width ? width + "px" : "";
673
-
680
+
674
681
  this.element.style.width = this.widthStyled;
675
-
682
+
676
683
  if(!this.isGroup){
677
684
  this.cells.forEach(function(cell){
678
685
  cell.setWidth();
679
686
  });
680
687
  }
681
-
688
+
682
689
  if(this.parent.isGroup){
683
690
  this.parent.matchChildWidths();
684
691
  }
685
-
692
+
686
693
  this.dispatch("column-width", this);
694
+
695
+ if(this.subscribedExternal("columnWidth")){
696
+ this.dispatchExternal("columnWidth", this.getComponent());
697
+ }
687
698
  }
688
-
699
+
689
700
  checkCellHeights(){
690
701
  var rows = [];
691
-
702
+
692
703
  this.cells.forEach(function(cell){
693
704
  if(cell.row.heightInitialized){
694
705
  if(cell.row.getElement().offsetParent !== null){
@@ -699,19 +710,19 @@ class Column extends CoreFeature{
699
710
  }
700
711
  }
701
712
  });
702
-
713
+
703
714
  rows.forEach(function(row){
704
715
  row.calcHeight();
705
716
  });
706
-
717
+
707
718
  rows.forEach(function(row){
708
719
  row.setCellHeight();
709
720
  });
710
721
  }
711
-
722
+
712
723
  getWidth(){
713
724
  var width = 0;
714
-
725
+
715
726
  if(this.isGroup){
716
727
  this.columns.forEach(function(column){
717
728
  if(column.visible){
@@ -721,58 +732,58 @@ class Column extends CoreFeature{
721
732
  }else{
722
733
  width = this.width;
723
734
  }
724
-
735
+
725
736
  return width;
726
737
  }
727
-
738
+
728
739
  getLeftOffset(){
729
740
  var offset = this.element.offsetLeft;
730
-
741
+
731
742
  if(this.parent.isGroup){
732
743
  offset += this.parent.getLeftOffset();
733
744
  }
734
-
745
+
735
746
  return offset;
736
747
  }
737
-
748
+
738
749
  getHeight(){
739
750
  return Math.ceil(this.element.getBoundingClientRect().height);
740
751
  }
741
-
752
+
742
753
  setMinWidth(minWidth){
743
754
  if(this.maxWidth && minWidth > this.maxWidth){
744
755
  minWidth = this.maxWidth;
745
-
756
+
746
757
  console.warn("the minWidth ("+ minWidth + "px) for column '" + this.field + "' cannot be bigger that its maxWidth ("+ this.maxWidthStyled + ")");
747
758
  }
748
-
759
+
749
760
  this.minWidth = minWidth;
750
761
  this.minWidthStyled = minWidth ? minWidth + "px" : "";
751
-
762
+
752
763
  this.element.style.minWidth = this.minWidthStyled;
753
-
764
+
754
765
  this.cells.forEach(function(cell){
755
766
  cell.setMinWidth();
756
767
  });
757
768
  }
758
-
769
+
759
770
  setMaxWidth(maxWidth){
760
771
  if(this.minWidth && maxWidth < this.minWidth){
761
772
  maxWidth = this.minWidth;
762
-
773
+
763
774
  console.warn("the maxWidth ("+ maxWidth + "px) for column '" + this.field + "' cannot be smaller that its minWidth ("+ this.minWidthStyled + ")");
764
775
  }
765
-
776
+
766
777
  this.maxWidth = maxWidth;
767
778
  this.maxWidthStyled = maxWidth ? maxWidth + "px" : "";
768
-
779
+
769
780
  this.element.style.maxWidth = this.maxWidthStyled;
770
-
781
+
771
782
  this.cells.forEach(function(cell){
772
783
  cell.setMaxWidth();
773
784
  });
774
785
  }
775
-
786
+
776
787
  delete(){
777
788
  return new Promise((resolve, reject) => {
778
789
  if(this.isGroup){
@@ -780,117 +791,117 @@ class Column extends CoreFeature{
780
791
  column.delete();
781
792
  });
782
793
  }
783
-
794
+
784
795
  this.dispatch("column-delete", this);
785
-
796
+
786
797
  var cellCount = this.cells.length;
787
-
798
+
788
799
  for(let i = 0; i < cellCount; i++){
789
800
  this.cells[0].delete();
790
801
  }
791
-
802
+
792
803
  if(this.element.parentNode){
793
804
  this.element.parentNode.removeChild(this.element);
794
805
  }
795
-
806
+
796
807
  this.element = false;
797
808
  this.contentElement = false;
798
809
  this.titleElement = false;
799
810
  this.groupElement = false;
800
-
811
+
801
812
  if(this.parent.isGroup){
802
813
  this.parent.removeChild(this);
803
814
  }
804
-
815
+
805
816
  this.table.columnManager.deregisterColumn(this);
806
-
817
+
807
818
  this.table.columnManager.rerenderColumns(true);
808
-
819
+
809
820
  this.dispatch("column-deleted", this);
810
-
821
+
811
822
  resolve();
812
823
  });
813
824
  }
814
-
825
+
815
826
  columnRendered(){
816
827
  if(this.titleFormatterRendered){
817
828
  this.titleFormatterRendered();
818
829
  }
819
-
830
+
820
831
  this.dispatch("column-rendered", this);
821
832
  }
822
-
833
+
823
834
  //////////////// Cell Management /////////////////
824
835
  //generate cell for this column
825
836
  generateCell(row){
826
837
  var cell = new Cell(this, row);
827
-
838
+
828
839
  this.cells.push(cell);
829
-
840
+
830
841
  return cell;
831
842
  }
832
-
843
+
833
844
  nextColumn(){
834
845
  var index = this.table.columnManager.findColumnIndex(this);
835
846
  return index > -1 ? this._nextVisibleColumn(index + 1) : false;
836
847
  }
837
-
848
+
838
849
  _nextVisibleColumn(index){
839
850
  var column = this.table.columnManager.getColumnByIndex(index);
840
851
  return !column || column.visible ? column : this._nextVisibleColumn(index + 1);
841
852
  }
842
-
853
+
843
854
  prevColumn(){
844
855
  var index = this.table.columnManager.findColumnIndex(this);
845
856
  return index > -1 ? this._prevVisibleColumn(index - 1) : false;
846
857
  }
847
-
858
+
848
859
  _prevVisibleColumn(index){
849
860
  var column = this.table.columnManager.getColumnByIndex(index);
850
861
  return !column || column.visible ? column : this._prevVisibleColumn(index - 1);
851
862
  }
852
-
863
+
853
864
  reinitializeWidth(force){
854
865
  this.widthFixed = false;
855
-
866
+
856
867
  //set width if present
857
868
  if(typeof this.definition.width !== "undefined" && !force){
858
869
  // maxInitialWidth ignored here as width specified
859
870
  this.setWidth(this.definition.width);
860
871
  }
861
-
872
+
862
873
  this.dispatch("column-width-fit-before", this);
863
-
874
+
864
875
  this.fitToData(force);
865
-
876
+
866
877
  this.dispatch("column-width-fit-after", this);
867
878
  }
868
-
879
+
869
880
  //set column width to maximum cell width for non group columns
870
881
  fitToData(force){
871
882
  if(this.isGroup){
872
883
  return;
873
884
  }
874
-
885
+
875
886
  if(!this.widthFixed){
876
887
  this.element.style.width = "";
877
-
888
+
878
889
  this.cells.forEach((cell) => {
879
890
  cell.clearWidth();
880
891
  });
881
892
  }
882
-
893
+
883
894
  var maxWidth = this.element.offsetWidth;
884
-
895
+
885
896
  if(!this.width || !this.widthFixed){
886
897
  this.cells.forEach((cell) => {
887
898
  var width = cell.getWidth();
888
-
899
+
889
900
  if(width > maxWidth){
890
901
  maxWidth = width;
891
902
  }
892
903
  });
893
-
904
+
894
905
  if(maxWidth){
895
906
  var setTo = maxWidth + 1;
896
907
  if (this.maxInitialWidth && !force) {
@@ -900,27 +911,27 @@ class Column extends CoreFeature{
900
911
  }
901
912
  }
902
913
  }
903
-
914
+
904
915
  updateDefinition(updates){
905
916
  var definition;
906
-
917
+
907
918
  if(!this.isGroup){
908
919
  if(!this.parent.isGroup){
909
920
  definition = Object.assign({}, this.getDefinition());
910
921
  definition = Object.assign(definition, updates);
911
-
922
+
912
923
  return this.table.columnManager.addColumn(definition, false, this)
913
924
  .then((column) => {
914
-
925
+
915
926
  if(definition.field == this.field){
916
927
  this.field = false; //clear field name to prevent deletion of duplicate column from arrays
917
928
  }
918
-
929
+
919
930
  return this.delete()
920
931
  .then(() => {
921
932
  return column.getComponent();
922
933
  });
923
-
934
+
924
935
  });
925
936
  }else{
926
937
  console.error("Column Update Error - The updateDefinition function is only available on ungrouped columns");
@@ -931,29 +942,29 @@ class Column extends CoreFeature{
931
942
  return Promise.reject("Column Update Error - The updateDefinition function is only available on columns, not column groups");
932
943
  }
933
944
  }
934
-
945
+
935
946
  deleteCell(cell){
936
947
  var index = this.cells.indexOf(cell);
937
-
948
+
938
949
  if(index > -1){
939
950
  this.cells.splice(index, 1);
940
951
  }
941
952
  }
942
-
953
+
943
954
  //////////////// Object Generation /////////////////
944
955
  getComponent(){
945
956
  if(!this.component){
946
957
  this.component = new ColumnComponent(this);
947
958
  }
948
-
959
+
949
960
  return this.component;
950
961
  }
951
-
962
+
952
963
  getPosition(){
953
964
  return this.table.columnManager.getVisibleColumnsByIndex().indexOf(this) + 1;
954
965
  }
955
- }
956
-
957
- Column.defaultOptionList = defaultOptions;
958
-
959
- export default Column;
966
+
967
+ getParentComponent(){
968
+ return this.parent instanceof Column ? this.parent.getComponent() : false;
969
+ }
970
+ }