tabulator-tables 5.0.8 → 5.1.1

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 (112) hide show
  1. package/.editorconfig +6 -0
  2. package/LICENSE +1 -1
  3. package/bower.json +1 -1
  4. package/build/rollup.js +2 -1
  5. package/dist/css/tabulator.css +26 -6
  6. package/dist/css/tabulator.css.map +1 -1
  7. package/dist/css/tabulator.min.css +1 -1
  8. package/dist/css/tabulator.min.css.map +1 -1
  9. package/dist/css/tabulator_bootstrap3.css +26 -6
  10. package/dist/css/tabulator_bootstrap3.css.map +1 -1
  11. package/dist/css/tabulator_bootstrap3.min.css +1 -1
  12. package/dist/css/tabulator_bootstrap3.min.css.map +1 -1
  13. package/dist/css/tabulator_bootstrap4.css +26 -6
  14. package/dist/css/tabulator_bootstrap4.css.map +1 -1
  15. package/dist/css/tabulator_bootstrap4.min.css +1 -1
  16. package/dist/css/tabulator_bootstrap4.min.css.map +1 -1
  17. package/dist/css/tabulator_bulma.css +26 -6
  18. package/dist/css/tabulator_bulma.css.map +1 -1
  19. package/dist/css/tabulator_bulma.min.css +1 -1
  20. package/dist/css/tabulator_bulma.min.css.map +1 -1
  21. package/dist/css/tabulator_materialize.css +33 -10
  22. package/dist/css/tabulator_materialize.css.map +1 -1
  23. package/dist/css/tabulator_materialize.min.css +1 -1
  24. package/dist/css/tabulator_materialize.min.css.map +1 -1
  25. package/dist/css/tabulator_midnight.css +30 -6
  26. package/dist/css/tabulator_midnight.css.map +1 -1
  27. package/dist/css/tabulator_midnight.min.css +1 -1
  28. package/dist/css/tabulator_midnight.min.css.map +1 -1
  29. package/dist/css/tabulator_modern.css +26 -6
  30. package/dist/css/tabulator_modern.css.map +1 -1
  31. package/dist/css/tabulator_modern.min.css +1 -1
  32. package/dist/css/tabulator_modern.min.css.map +1 -1
  33. package/dist/css/tabulator_semanticui.css +26 -6
  34. package/dist/css/tabulator_semanticui.css.map +1 -1
  35. package/dist/css/tabulator_semanticui.min.css +1 -1
  36. package/dist/css/tabulator_semanticui.min.css.map +1 -1
  37. package/dist/css/tabulator_simple.css +26 -6
  38. package/dist/css/tabulator_simple.css.map +1 -1
  39. package/dist/css/tabulator_simple.min.css +1 -1
  40. package/dist/css/tabulator_simple.min.css.map +1 -1
  41. package/dist/css/tabulator_site.css +30 -6
  42. package/dist/css/tabulator_site.css.map +1 -1
  43. package/dist/css/tabulator_site.min.css +1 -1
  44. package/dist/css/tabulator_site.min.css.map +1 -1
  45. package/dist/js/tabulator.js +1182 -548
  46. package/dist/js/tabulator.js.map +1 -1
  47. package/dist/js/tabulator.min.js +2 -2
  48. package/dist/js/tabulator.min.js.map +1 -1
  49. package/dist/js/tabulator_esm.js +1797 -1184
  50. package/dist/js/tabulator_esm.js.map +1 -1
  51. package/dist/js/tabulator_esm.min.js +2 -2
  52. package/dist/js/tabulator_esm.min.js.map +1 -1
  53. package/package.json +1 -1
  54. package/src/js/core/ColumnManager.js +1 -1
  55. package/src/js/core/CoreFeature.js +1 -5
  56. package/src/js/core/FooterManager.js +14 -2
  57. package/src/js/core/RowManager.js +325 -286
  58. package/src/js/core/Tabulator.js +0 -43
  59. package/src/js/core/cell/Cell.js +5 -1
  60. package/src/js/core/column/Column.js +21 -6
  61. package/src/js/core/column/ColumnComponent.js +6 -0
  62. package/src/js/core/column/defaults/options.js +1 -0
  63. package/src/js/core/defaults/options.js +3 -3
  64. package/src/js/core/modules/optional.js +1 -0
  65. package/src/js/core/rendering/Renderer.js +3 -2
  66. package/src/js/core/rendering/renderers/BasicVertical.js +2 -1
  67. package/src/js/core/rendering/renderers/VirtualDomHorizontal.js +165 -151
  68. package/src/js/core/rendering/renderers/VirtualDomVertical.js +1 -1
  69. package/src/js/core/row/Row.js +2 -2
  70. package/src/js/core/tools/DataLoader.js +6 -6
  71. package/src/js/core/tools/InteractionMonitor.js +157 -52
  72. package/src/js/modules/Ajax/Ajax.js +62 -82
  73. package/src/js/modules/ColumnCalcs/ColumnCalcs.js +16 -3
  74. package/src/js/modules/DataTree/DataTree.js +22 -9
  75. package/src/js/modules/Download/defaults/downloaders/json.js +1 -1
  76. package/src/js/modules/Download/defaults/downloaders/jsonLines.js +32 -0
  77. package/src/js/modules/Download/defaults/downloaders/pdf.js +0 -2
  78. package/src/js/modules/Download/defaults/downloaders/xlsx.js +3 -2
  79. package/src/js/modules/Download/defaults/downloaders.js +2 -0
  80. package/src/js/modules/Edit/Edit.js +27 -39
  81. package/src/js/modules/Export/Export.js +1 -1
  82. package/src/js/modules/Filter/Filter.js +1 -1
  83. package/src/js/modules/Format/defaults/formatters/datetime.js +1 -1
  84. package/src/js/modules/Format/defaults/formatters/datetimediff.js +2 -1
  85. package/src/js/modules/FrozenColumns/FrozenColumns.js +1 -1
  86. package/src/js/modules/FrozenRows/FrozenRows.js +9 -0
  87. package/src/js/modules/GroupRows/Group.js +8 -63
  88. package/src/js/modules/GroupRows/GroupComponent.js +1 -1
  89. package/src/js/modules/GroupRows/GroupRows.js +2 -2
  90. package/src/js/modules/Import/Import.js +195 -0
  91. package/src/js/modules/Import/defaults/importers/csv.js +63 -0
  92. package/src/js/modules/Import/defaults/importers/json.js +8 -0
  93. package/src/js/modules/Import/defaults/importers.js +7 -0
  94. package/src/js/modules/Interaction/Interaction.js +5 -0
  95. package/src/js/modules/Keybindings/Keybindings.js +9 -14
  96. package/src/js/modules/Keybindings/defaults/bindings.js +3 -3
  97. package/src/js/modules/Localize/defaults/langs.js +6 -0
  98. package/src/js/modules/Menu/Menu.js +200 -155
  99. package/src/js/modules/MoveRows/MoveRows.js +4 -0
  100. package/src/js/modules/Page/Page.js +282 -185
  101. package/src/js/modules/Page/defaults/pageCounters/pages.js +33 -0
  102. package/src/js/modules/Page/defaults/pageCounters/rows.js +32 -0
  103. package/src/js/modules/Page/defaults/pageCounters.js +8 -0
  104. package/src/js/modules/ResizeRows/ResizeRows.js +1 -1
  105. package/src/js/modules/ResponsiveLayout/ResponsiveLayout.js +7 -9
  106. package/src/js/modules/SelectRow/SelectRow.js +4 -9
  107. package/src/js/modules/Sort/defaults/sorters/datetime.js +2 -2
  108. package/src/js/modules/Validate/Validate.js +7 -5
  109. package/src/scss/tabulator.scss +31 -8
  110. package/src/scss/themes/materialize/tabulator_materialize.scss +5 -4
  111. package/src/scss/themes/tabulator_midnight.scss +4 -0
  112. package/src/scss/themes/tabulator_site.scss +4 -0
@@ -0,0 +1,33 @@
1
+ export default function(pageSize, currentRow, currentPage, totalRows, totalPages){
2
+
3
+ var el = document.createElement("span"),
4
+ showingEl = document.createElement("span"),
5
+ valueEl = document.createElement("span"),
6
+ ofEl = document.createElement("span"),
7
+ totalEl = document.createElement("span"),
8
+ rowsEl = document.createElement("span");
9
+
10
+ this.table.modules.localize.langBind("pagination|counter|showing", (value) => {
11
+ showingEl.innerHTML = value;
12
+ });
13
+
14
+ valueEl.innerHTML = " " + currentPage + " ";
15
+
16
+ this.table.modules.localize.langBind("pagination|counter|of", (value) => {
17
+ ofEl.innerHTML = value;
18
+ });
19
+
20
+ totalEl.innerHTML = " " + totalPages + " ";
21
+
22
+ this.table.modules.localize.langBind("pagination|counter|pages", (value) => {
23
+ rowsEl.innerHTML = value;
24
+ });
25
+
26
+ el.appendChild(showingEl);
27
+ el.appendChild(valueEl);
28
+ el.appendChild(ofEl);
29
+ el.appendChild(totalEl);
30
+ el.appendChild(rowsEl);
31
+
32
+ return el;
33
+ };
@@ -0,0 +1,32 @@
1
+ export default function(pageSize, currentRow, currentPage, totalRows, totalPages){
2
+ var el = document.createElement("span"),
3
+ showingEl = document.createElement("span"),
4
+ valueEl = document.createElement("span"),
5
+ ofEl = document.createElement("span"),
6
+ totalEl = document.createElement("span"),
7
+ rowsEl = document.createElement("span");
8
+
9
+ this.table.modules.localize.langBind("pagination|counter|showing", (value) => {
10
+ showingEl.innerHTML = value;
11
+ });
12
+
13
+ valueEl.innerHTML = " " + currentRow + "-" + Math.min((currentRow + pageSize - 1), totalRows) + " ";
14
+
15
+ this.table.modules.localize.langBind("pagination|counter|of", (value) => {
16
+ ofEl.innerHTML = value;
17
+ });
18
+
19
+ totalEl.innerHTML = " " + totalRows + " ";
20
+
21
+ this.table.modules.localize.langBind("pagination|counter|rows", (value) => {
22
+ rowsEl.innerHTML = value;
23
+ });
24
+
25
+ el.appendChild(showingEl);
26
+ el.appendChild(valueEl);
27
+ el.appendChild(ofEl);
28
+ el.appendChild(totalEl);
29
+ el.appendChild(rowsEl);
30
+
31
+ return el;
32
+ };
@@ -0,0 +1,8 @@
1
+ import rows from './pageCounters/rows.js';
2
+ import pages from './pageCounters/pages.js';
3
+
4
+
5
+ export default {
6
+ rows:rows,
7
+ pages:pages,
8
+ };
@@ -86,7 +86,7 @@ class ResizeRows extends Module{
86
86
 
87
87
  self.table.element.classList.remove("tabulator-block-select");
88
88
 
89
- this.dispatchExternal("rowResized", row.getComponent());
89
+ self.dispatchExternal("rowResized", row.getComponent());
90
90
  }
91
91
 
92
92
  e.stopPropagation(); //prevent resize from interfereing with movable columns
@@ -21,7 +21,7 @@ class ResponsiveLayout extends Module{
21
21
  this.registerColumnOption("responsive");
22
22
  }
23
23
 
24
- //generate resposive columns list
24
+ //generate responsive columns list
25
25
  initialize(){
26
26
  var self = this,
27
27
  columns = [];
@@ -60,15 +60,15 @@ class ResponsiveLayout extends Module{
60
60
  this.collapseStartOpen = this.table.options.responsiveLayoutCollapseStartOpen;
61
61
  this.hiddenColumns = [];
62
62
 
63
- //detemine level of responsivity for each column
64
- this.table.columnManager.columnsByIndex.forEach(function(column, i){
63
+ //determine level of responsivity for each column
64
+ this.table.columnManager.columnsByIndex.forEach((column, i) => {
65
65
  if(column.modules.responsive){
66
66
  if(column.modules.responsive.order && column.modules.responsive.visible){
67
67
  column.modules.responsive.index = i;
68
68
  columns.push(column);
69
69
 
70
- if(!column.visible && self.mode === "collapse"){
71
- self.hiddenColumns.push(column);
70
+ if(!column.visible && this.mode === "collapse"){
71
+ this.hiddenColumns.push(column);
72
72
  }
73
73
  }
74
74
  }
@@ -76,7 +76,7 @@ class ResponsiveLayout extends Module{
76
76
 
77
77
  //sort list by responsivity
78
78
  columns = columns.reverse();
79
- columns = columns.sort(function(a, b){
79
+ columns = columns.sort((a, b) => {
80
80
  var diff = b.modules.responsive.order - a.modules.responsive.order;
81
81
  return diff || (b.modules.responsive.index - a.modules.responsive.index);
82
82
  });
@@ -142,10 +142,8 @@ class ResponsiveLayout extends Module{
142
142
  updateColumnVisibility(column, responsiveToggle){
143
143
  if(!responsiveToggle && column.modules.responsive){
144
144
  column.modules.responsive.visible = column.visible;
145
- this.initialize();
145
+ this.initializeResponsivity();
146
146
  }
147
-
148
- //this.update();
149
147
  }
150
148
 
151
149
  hideColumn(column){
@@ -38,7 +38,7 @@ class SelectRow extends Module{
38
38
  this.subscribe("rows-retrieve", this.rowRetrieve.bind(this));
39
39
 
40
40
  if(this.table.options.selectable && !this.table.options.selectablePersistence){
41
- this.subscribe("data-refeshing", this.deselectRows.bind(this));
41
+ this.subscribe("data-refreshing", this.deselectRows.bind(this));
42
42
  }
43
43
  }
44
44
  }
@@ -277,9 +277,7 @@ class SelectRow extends Module{
277
277
  this.childRowSelection(row, true);
278
278
  }
279
279
 
280
- if(!silent){
281
- this.dispatchExternal("rowSelected", row.getComponent());
282
- }
280
+ this.dispatchExternal("rowSelected", row.getComponent());
283
281
 
284
282
  this._rowSelectionChanged(silent);
285
283
  }
@@ -298,8 +296,7 @@ class SelectRow extends Module{
298
296
  deselectRows(rows, silent){
299
297
  var self = this,
300
298
  rowCount;
301
-
302
- console.trace("deselect")
299
+
303
300
  if(typeof rows == "undefined"){
304
301
 
305
302
  rowCount = self.selectedRows.length;
@@ -351,9 +348,7 @@ class SelectRow extends Module{
351
348
  this.childRowSelection(row, false);
352
349
  }
353
350
 
354
- if(!silent){
355
- this.dispatchExternal("rowDeselected", row.getComponent());
356
- }
351
+ this.dispatchExternal("rowDeselected", row.getComponent());
357
352
 
358
353
  self._rowSelectionChanged(silent);
359
354
  }
@@ -6,8 +6,8 @@ export default function(a, b, aRow, bRow, column, dir, params){
6
6
  emptyAlign = 0;
7
7
 
8
8
  if(typeof DT != "undefined"){
9
- a = DT.fromFormat(String(a), format);
10
- b = DT.fromFormat(String(b), format);
9
+ a = format === "iso" ? DT.fromISO(String(a)) : DT.fromFormat(String(a), format);
10
+ b = format === "iso" ? DT.fromISO(String(b)) : DT.fromFormat(String(b), format);
11
11
 
12
12
  if(!a.isValid){
13
13
  emptyAlign = !b.isValid ? 0 : -1;
@@ -50,7 +50,7 @@ class Validate extends Module{
50
50
  columnValidate(column){
51
51
  var invalid = [];
52
52
 
53
- column.cells.forEach(function(cell){
53
+ column.cells.forEach((cell) => {
54
54
  if(!this.cellValidate(cell)){
55
55
  invalid.push(cell.getComponent());
56
56
  }
@@ -66,7 +66,7 @@ class Validate extends Module{
66
66
  rowValidate(row){
67
67
  var invalid = [];
68
68
 
69
- row.cells.forEach(function(cell){
69
+ row.cells.forEach((cell) => {
70
70
  if(!this.cellValidate(cell)){
71
71
  invalid.push(cell.getComponent());
72
72
  }
@@ -98,7 +98,9 @@ class Validate extends Module{
98
98
  var output = [];
99
99
 
100
100
  //clear row data
101
- this.table.rowManager.rows.forEach(function(row){
101
+ this.table.rowManager.rows.forEach((row) => {
102
+ row = row.getComponent();
103
+
102
104
  var valid = row.validate();
103
105
 
104
106
  if(valid !== true){
@@ -128,7 +130,7 @@ class Validate extends Module{
128
130
  if(column.definition.validator){
129
131
 
130
132
  if(Array.isArray(column.definition.validator)){
131
- column.definition.validator.forEach(function(item){
133
+ column.definition.validator.forEach((item) => {
132
134
  validator = self._extractValidator(item);
133
135
 
134
136
  if(validator){
@@ -197,7 +199,7 @@ class Validate extends Module{
197
199
  invalidIndex = this.invalidCells.indexOf(cell);
198
200
 
199
201
  if(validators){
200
- validators.forEach(function(item){
202
+ validators.forEach((item) => {
201
203
  if(!item.func.call(self, cell.getComponent(), value, item.params)){
202
204
  valid.push({
203
205
  type:item.type,
@@ -392,15 +392,17 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
392
392
 
393
393
  width:100%;
394
394
 
395
- span{
395
+ .tabulator-placeholder-contents {
396
396
  display: inline-block;
397
+ text-align: center;
397
398
 
398
- margin:0 auto;
399
399
  padding:10px;
400
400
 
401
401
  color:#ccc;
402
402
  font-weight: bold;
403
403
  font-size: 20px;
404
+
405
+ white-space: normal;
404
406
  }
405
407
  }
406
408
 
@@ -432,14 +434,11 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
432
434
  }
433
435
  }
434
436
 
435
-
436
-
437
437
  //footer element
438
438
  .tabulator-footer{
439
- padding:5px 10px;
440
439
  border-top:1px solid $footerSeperatorColor;
441
440
  background-color: $footerBackgroundColor;
442
- text-align: right;
441
+
443
442
  color: $footerTextColor;
444
443
  font-weight:bold;
445
444
  white-space:nowrap;
@@ -450,10 +449,22 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
450
449
  -webkit-user-select: none;
451
450
  -o-user-select: none;
452
451
 
452
+ .tabulator-footer-contents {
453
+ display: flex;
454
+ flex-direction: row;
455
+ align-items: center;
456
+ justify-content: space-between;
457
+
458
+ padding:5px 10px;
459
+
460
+ &:empty{
461
+ display: none;
462
+ }
463
+ }
464
+
453
465
  .tabulator-calcs-holder{
454
466
  box-sizing:border-box;
455
467
  width:calc(100% + 20px);
456
- margin:-5px -10px 5px -10px;
457
468
 
458
469
  text-align: left;
459
470
 
@@ -478,7 +489,19 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
478
489
  }
479
490
  }
480
491
 
492
+ &>*+.tabulator-page-counter{
493
+ margin-left:10px;
494
+ }
495
+
496
+ .tabulator-page-counter {
497
+ font-weight: normal;
498
+ }
499
+
481
500
  .tabulator-paginator{
501
+ flex:1;
502
+
503
+ text-align: right;
504
+
482
505
  color: $footerTextColor;
483
506
  font-family:inherit;
484
507
  font-weight:inherit;
@@ -1125,7 +1148,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
1125
1148
  }
1126
1149
 
1127
1150
  .tabulator-col-content{
1128
- .tabulator-arrow{
1151
+ .tabulator-col-sorter{
1129
1152
  left:8px;
1130
1153
  right:initial;
1131
1154
  }
@@ -105,16 +105,17 @@ $footerActiveColor:$primary-color !default; //footer bottom active text color
105
105
  margin-top:5px;
106
106
  padding:8px 12px;
107
107
 
108
+ border-radius:0;
108
109
  border-right:none;
109
110
 
110
111
  background:rgba(255,255,255,.2);
111
112
 
112
- &[data-page="first"]{
113
+ &[data-page="next"], &:first-of-type {
113
114
  border-top-left-radius:4px;
114
115
  border-bottom-left-radius:4px;
115
116
  }
116
117
 
117
- &[data-page="last"]{
118
+ &[data-page="prev"], &:last-of-type {
118
119
  border:1px solid $footerBorderColor;
119
120
  border-top-right-radius:4px;
120
121
  border-bottom-right-radius:4px;
@@ -133,7 +134,7 @@ $footerActiveColor:$primary-color !default; //footer bottom active text color
133
134
  background-color: $rowAltBackgroundColor;
134
135
 
135
136
  &.tabulator-selected{
136
- background-color:$rowSelectedBackground;
137
+ background-color:$rowSelectedBackground !important;
137
138
  }
138
139
 
139
140
  &.tabulator-selectable:hover{
@@ -142,7 +143,7 @@ $footerActiveColor:$primary-color !default; //footer bottom active text color
142
143
  }
143
144
 
144
145
  &.tabulator-selected:hover{
145
- background-color:$rowSelectedBackgroundHover;
146
+ background-color:$rowSelectedBackgroundHover !important;
146
147
  cursor: pointer;
147
148
  }
148
149
  }
@@ -90,6 +90,10 @@ $footerActiveColor:#fff !default; //footer bottom active text color
90
90
  }
91
91
  }
92
92
 
93
+ .tabulator-page-counter {
94
+ color: #fff;
95
+ }
96
+
93
97
  //pagination button
94
98
  .tabulator-page{
95
99
  color: $footerTextColor;
@@ -124,6 +124,10 @@ $footerActiveColor:$footerSeperatorColor !default; //footer bottom active text c
124
124
  }
125
125
  }
126
126
 
127
+ .tabulator-page-counter{
128
+ color:#fff;
129
+ }
130
+
127
131
  .tabulator-page{
128
132
  background-color:#fff;
129
133