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.
- package/bower.json +1 -1
- package/build/{Bundler.js → Bundler.mjs} +8 -6
- package/build/rollup.mjs +9 -0
- package/dist/css/tabulator.css +62 -0
- package/dist/css/tabulator.css.map +1 -1
- package/dist/css/tabulator.min.css +1 -1
- package/dist/css/tabulator.min.css.map +1 -1
- package/dist/css/tabulator_bootstrap3.css +72 -0
- package/dist/css/tabulator_bootstrap3.css.map +1 -1
- package/dist/css/tabulator_bootstrap3.min.css +1 -1
- package/dist/css/tabulator_bootstrap3.min.css.map +1 -1
- package/dist/css/tabulator_bootstrap4.css +78 -0
- package/dist/css/tabulator_bootstrap4.css.map +1 -1
- package/dist/css/tabulator_bootstrap4.min.css +1 -1
- package/dist/css/tabulator_bootstrap4.min.css.map +1 -1
- package/dist/css/tabulator_bootstrap5.css +78 -0
- package/dist/css/tabulator_bootstrap5.css.map +1 -1
- package/dist/css/tabulator_bootstrap5.min.css +1 -1
- package/dist/css/tabulator_bootstrap5.min.css.map +1 -1
- package/dist/css/tabulator_bulma.css +84 -0
- package/dist/css/tabulator_bulma.css.map +1 -1
- package/dist/css/tabulator_bulma.min.css +1 -1
- package/dist/css/tabulator_bulma.min.css.map +1 -1
- package/dist/css/tabulator_materialize.css +77 -0
- package/dist/css/tabulator_materialize.css.map +1 -1
- package/dist/css/tabulator_materialize.min.css +1 -1
- package/dist/css/tabulator_materialize.min.css.map +1 -1
- package/dist/css/tabulator_midnight.css +72 -0
- package/dist/css/tabulator_midnight.css.map +1 -1
- package/dist/css/tabulator_midnight.min.css +1 -1
- package/dist/css/tabulator_midnight.min.css.map +1 -1
- package/dist/css/tabulator_modern.css +82 -0
- package/dist/css/tabulator_modern.css.map +1 -1
- package/dist/css/tabulator_modern.min.css +1 -1
- package/dist/css/tabulator_modern.min.css.map +1 -1
- package/dist/css/tabulator_semanticui.css +74 -0
- package/dist/css/tabulator_semanticui.css.map +1 -1
- package/dist/css/tabulator_semanticui.min.css +1 -1
- package/dist/css/tabulator_semanticui.min.css.map +1 -1
- package/dist/css/tabulator_simple.css +75 -0
- package/dist/css/tabulator_simple.css.map +1 -1
- package/dist/css/tabulator_simple.min.css +1 -1
- package/dist/css/tabulator_simple.min.css.map +1 -1
- package/dist/css/tabulator_site.css +85 -0
- package/dist/css/tabulator_site.css.map +1 -1
- package/dist/css/tabulator_site.min.css +1 -1
- package/dist/css/tabulator_site.min.css.map +1 -1
- package/dist/js/tabulator.js +3882 -2809
- package/dist/js/tabulator.js.map +1 -1
- package/dist/js/tabulator.min.js +2 -2
- package/dist/js/tabulator.min.js.map +1 -1
- package/dist/js/tabulator_esm.js +3845 -2770
- package/dist/js/tabulator_esm.js.map +1 -1
- package/dist/js/tabulator_esm.min.js +2 -2
- package/dist/js/tabulator_esm.min.js.map +1 -1
- package/package.json +17 -17
- package/src/js/builds/esm.js +2 -0
- package/src/js/core/ColumnManager.js +15 -0
- package/src/js/core/Module.js +2 -4
- package/src/js/core/RowManager.js +1 -1
- package/src/js/core/Tabulator.js +35 -22
- package/src/js/core/TabulatorFull.js +15 -5
- package/src/js/core/cell/Cell.js +4 -0
- package/src/js/core/column/Column.js +228 -217
- package/src/js/core/column/ColumnComponent.js +1 -3
- package/src/js/core/defaults/options.js +1 -0
- package/src/js/core/modules/optional.js +2 -1
- package/src/js/core/row/Row.js +23 -11
- package/src/js/core/tools/DataLoader.js +1 -1
- package/src/js/core/tools/ModuleBinder.js +123 -75
- package/src/js/core/tools/TableRegistry.js +58 -55
- package/src/js/modules/Accessor/Accessor.js +7 -8
- package/src/js/modules/Accessor/defaults/accessors.js +5 -1
- package/src/js/modules/Ajax/Ajax.js +10 -12
- package/src/js/modules/Clipboard/Clipboard.js +10 -10
- package/src/js/modules/Clipboard/defaults/pasteActions.js +0 -43
- package/src/js/modules/Clipboard/defaults/pasteParsers.js +0 -55
- package/src/js/modules/Clipboard/extensions/extensions.js +9 -0
- package/src/js/modules/Clipboard/extensions/keybindings/actions.js +9 -0
- package/src/js/modules/Clipboard/extensions/keybindings/bindings.js +3 -0
- package/src/js/modules/ColumnCalcs/CalcComponent.js +2 -4
- package/src/js/modules/ColumnCalcs/ColumnCalcs.js +16 -18
- package/src/js/modules/Comms/Comms.js +5 -8
- package/src/js/modules/DataTree/DataTree.js +11 -11
- package/src/js/modules/Download/Download.js +9 -11
- package/src/js/modules/Edit/Edit.js +47 -15
- package/src/js/modules/Edit/List.js +12 -12
- package/src/js/modules/Edit/defaults/editors/time.js +0 -2
- package/src/js/modules/Edit/defaults/editors.js +0 -4
- package/src/js/modules/Export/Export.js +70 -62
- package/src/js/modules/Export/ExportColumn.js +2 -4
- package/src/js/modules/Export/ExportRow.js +2 -4
- package/src/js/modules/Export/defaults/columnLookups.js +3 -0
- package/src/js/modules/Export/defaults/rowLookups.js +18 -0
- package/src/js/modules/Filter/Filter.js +7 -9
- package/src/js/modules/Format/Format.js +7 -9
- package/src/js/modules/Format/defaults/formatters.js +0 -4
- package/src/js/modules/FrozenColumns/FrozenColumns.js +8 -6
- package/src/js/modules/FrozenRows/FrozenRows.js +4 -6
- package/src/js/modules/GroupRows/Group.js +2 -4
- package/src/js/modules/GroupRows/GroupComponent.js +2 -4
- package/src/js/modules/GroupRows/GroupRows.js +4 -6
- package/src/js/modules/History/History.js +10 -10
- package/src/js/modules/History/extensions/extensions.js +9 -0
- package/src/js/modules/History/extensions/keybindings/actions.js +27 -0
- package/src/js/modules/History/extensions/keybindings/bindings.js +4 -0
- package/src/js/modules/HtmlTableImport/HtmlTableImport.js +4 -6
- package/src/js/modules/Import/Import.js +7 -9
- package/src/js/modules/Import/defaults/importers/array.js +2 -4
- package/src/js/modules/Import/defaults/importers/csv.js +2 -4
- package/src/js/modules/Interaction/Interaction.js +4 -6
- package/src/js/modules/Keybindings/Keybindings.js +8 -10
- package/src/js/modules/Keybindings/defaults/actions.js +5 -71
- package/src/js/modules/Keybindings/defaults/bindings.js +0 -16
- package/src/js/modules/Layout/Layout.js +7 -9
- package/src/js/modules/Localize/Localize.js +7 -9
- package/src/js/modules/Menu/Menu.js +7 -9
- package/src/js/modules/MoveColumns/MoveColumns.js +6 -8
- package/src/js/modules/MoveRows/MoveRows.js +13 -45
- package/src/js/modules/MoveRows/defaults/receivers.js +30 -0
- package/src/js/modules/MoveRows/defaults/senders.js +5 -0
- package/src/js/modules/Mutator/Mutator.js +7 -9
- package/src/js/modules/Page/Page.js +7 -9
- package/src/js/modules/Persistence/Persistence.js +10 -12
- package/src/js/modules/Popup/Popup.js +4 -8
- package/src/js/modules/Print/Print.js +4 -6
- package/src/js/modules/ReactiveData/ReactiveData.js +4 -9
- package/src/js/modules/ResizeColumns/ResizeColumns.js +91 -53
- package/src/js/modules/ResizeRows/ResizeRows.js +41 -8
- package/src/js/modules/ResizeTable/ResizeTable.js +4 -6
- package/src/js/modules/ResponsiveLayout/ResponsiveLayout.js +15 -9
- package/src/js/modules/ResponsiveLayout/extensions/extensions.js +9 -0
- package/src/js/modules/SelectRange/Range.js +22 -10
- package/src/js/modules/SelectRange/RangeComponent.js +2 -4
- package/src/js/modules/SelectRange/SelectRange.js +58 -28
- package/src/js/modules/SelectRange/extensions/clipboard/pasteActions.js +45 -0
- package/src/js/modules/SelectRange/extensions/clipboard/pasteParsers.js +57 -0
- package/src/js/modules/SelectRange/extensions/export/columnLookups.js +11 -0
- package/src/js/modules/SelectRange/extensions/export/rowLookups.js +5 -0
- package/src/js/modules/SelectRange/extensions/extensions.js +21 -0
- package/src/js/modules/SelectRange/extensions/keybindings/actions.js +38 -0
- package/src/js/modules/SelectRange/extensions/keybindings/bindings.js +14 -0
- package/src/js/modules/SelectRow/SelectRow.js +12 -12
- package/src/js/modules/SelectRow/extensions/extensions.js +9 -0
- package/src/js/modules/Sort/Sort.js +16 -13
- package/src/js/modules/Spreadsheet/GridCalculator.js +64 -0
- package/src/js/modules/Spreadsheet/Sheet.js +243 -0
- package/src/js/modules/Spreadsheet/SheetComponent.js +59 -0
- package/src/js/modules/Spreadsheet/Spreadsheet.js +309 -0
- package/src/js/modules/Tooltip/Tooltip.js +6 -8
- package/src/js/modules/Validate/Validate.js +7 -9
- package/src/scss/tabulator.scss +79 -3
- package/src/scss/themes/bootstrap/tabulator_bootstrap3.scss +14 -0
- package/src/scss/themes/bootstrap/tabulator_bootstrap4.scss +18 -0
- package/src/scss/themes/bootstrap/tabulator_bootstrap5.scss +18 -0
- package/src/scss/themes/bulma/tabulator_bulma.scss +24 -0
- package/src/scss/themes/materialize/tabulator_materialize.scss +18 -0
- package/src/scss/themes/semanticui/tabulator_semanticui.scss +14 -0
- package/src/scss/themes/tabulator_midnight.scss +34 -21
- package/src/scss/themes/tabulator_modern.scss +23 -0
- package/src/scss/themes/tabulator_simple.scss +15 -0
- package/src/scss/themes/tabulator_site.scss +25 -0
- package/build/rollup.js +0 -6
- package/src/js/modules/Edit/defaults/editors/autocomplete.js +0 -12
- package/src/js/modules/Edit/defaults/editors/select.js +0 -10
- /package/src/js/modules/{Format/defaults → ResponsiveLayout/extensions}/formatters/responsiveCollapse.js +0 -0
- /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
|
-
|
|
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.
|
|
958
|
-
|
|
959
|
-
|
|
966
|
+
|
|
967
|
+
getParentComponent(){
|
|
968
|
+
return this.parent instanceof Column ? this.parent.getComponent() : false;
|
|
969
|
+
}
|
|
970
|
+
}
|