@swimlane/ngx-datatable 20.1.0 → 21.0.0-alpha.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 (139) hide show
  1. package/CHANGELOG.md +720 -0
  2. package/README.md +25 -4
  3. package/assets/app.css +4 -3
  4. package/assets/icons-reference.html +5 -1
  5. package/assets/icons.css +3 -2
  6. package/{fesm2020 → fesm2022}/swimlane-ngx-datatable.mjs +3404 -2536
  7. package/fesm2022/swimlane-ngx-datatable.mjs.map +1 -0
  8. package/index.css +224 -169
  9. package/index.scss +13 -3
  10. package/lib/components/body/body-cell.component.d.ts +28 -23
  11. package/lib/components/body/body-group-header-template.directive.d.ts +3 -4
  12. package/lib/components/body/body-group-header.directive.d.ts +14 -9
  13. package/lib/components/body/body-row-def.component.d.ts +34 -0
  14. package/lib/components/body/body-row-wrapper.component.d.ts +34 -22
  15. package/lib/components/body/body-row.component.d.ts +28 -34
  16. package/lib/components/body/body.component.d.ts +88 -69
  17. package/lib/components/body/ghost-loader/ghost-loader.component.d.ts +12 -0
  18. package/lib/components/body/progress-bar.component.d.ts +1 -1
  19. package/lib/components/body/scroller.component.d.ts +4 -7
  20. package/lib/components/body/selection.component.d.ts +21 -25
  21. package/lib/components/body/summary/summary-row.component.d.ts +4 -3
  22. package/lib/components/columns/column-cell.directive.d.ts +4 -3
  23. package/lib/components/columns/column-ghost-cell.directive.d.ts +6 -0
  24. package/lib/components/columns/column-header.directive.d.ts +3 -4
  25. package/lib/components/columns/column.directive.d.ts +43 -18
  26. package/lib/components/columns/tree.directive.d.ts +1 -2
  27. package/lib/components/datatable.component.d.ts +142 -76
  28. package/lib/components/footer/footer-template.directive.d.ts +3 -4
  29. package/lib/components/footer/footer.component.d.ts +3 -2
  30. package/lib/components/footer/footer.directive.d.ts +6 -4
  31. package/lib/components/footer/pager.component.d.ts +6 -4
  32. package/lib/components/header/header-cell.component.d.ts +18 -18
  33. package/lib/components/header/header.component.d.ts +41 -36
  34. package/lib/components/row-detail/row-detail-template.directive.d.ts +3 -4
  35. package/lib/components/row-detail/row-detail.directive.d.ts +9 -8
  36. package/lib/directives/disable-row.directive.d.ts +22 -0
  37. package/lib/directives/draggable.directive.d.ts +11 -8
  38. package/lib/directives/long-press.directive.d.ts +16 -5
  39. package/lib/directives/orderable.directive.d.ts +21 -10
  40. package/lib/directives/resizeable.directive.d.ts +7 -5
  41. package/lib/directives/visibility.directive.d.ts +2 -3
  42. package/lib/ngx-datatable.module.d.ts +29 -30
  43. package/lib/services/scrollbar-helper.service.d.ts +0 -1
  44. package/lib/types/internal.types.d.ts +31 -0
  45. package/lib/types/public.types.d.ts +142 -0
  46. package/lib/types/table-column.type.d.ts +39 -66
  47. package/lib/utils/column-helper.d.ts +2 -2
  48. package/lib/utils/column-prop-getters.d.ts +1 -1
  49. package/lib/utils/column.d.ts +7 -14
  50. package/lib/utils/keys.d.ts +6 -6
  51. package/lib/utils/math.d.ts +4 -3
  52. package/lib/utils/selection.d.ts +2 -2
  53. package/lib/utils/sort.d.ts +5 -5
  54. package/lib/utils/table-token.d.ts +7 -0
  55. package/lib/utils/tree.d.ts +2 -2
  56. package/package.json +9 -17
  57. package/public-api.d.ts +4 -11
  58. package/themes/_ghost.scss +22 -0
  59. package/themes/_rows.scss +22 -0
  60. package/themes/bootstrap.css +117 -65
  61. package/themes/bootstrap.scss +27 -3
  62. package/themes/dark.css +101 -70
  63. package/themes/dark.scss +12 -0
  64. package/themes/material.css +344 -260
  65. package/themes/material.scss +52 -11
  66. package/esm2020/lib/components/body/body-cell.component.mjs +0 -432
  67. package/esm2020/lib/components/body/body-group-header-template.directive.mjs +0 -16
  68. package/esm2020/lib/components/body/body-group-header.directive.mjs +0 -62
  69. package/esm2020/lib/components/body/body-row-wrapper.component.mjs +0 -140
  70. package/esm2020/lib/components/body/body-row.component.mjs +0 -262
  71. package/esm2020/lib/components/body/body.component.mjs +0 -863
  72. package/esm2020/lib/components/body/progress-bar.component.mjs +0 -27
  73. package/esm2020/lib/components/body/scroller.component.mjs +0 -91
  74. package/esm2020/lib/components/body/selection.component.mjs +0 -150
  75. package/esm2020/lib/components/body/summary/summary-row.component.mjs +0 -105
  76. package/esm2020/lib/components/columns/column-cell.directive.mjs +0 -14
  77. package/esm2020/lib/components/columns/column-header.directive.mjs +0 -14
  78. package/esm2020/lib/components/columns/column.directive.mjs +0 -98
  79. package/esm2020/lib/components/columns/tree.directive.mjs +0 -14
  80. package/esm2020/lib/components/datatable.component.mjs +0 -1008
  81. package/esm2020/lib/components/footer/footer-template.directive.mjs +0 -14
  82. package/esm2020/lib/components/footer/footer.component.mjs +0 -128
  83. package/esm2020/lib/components/footer/footer.directive.mjs +0 -35
  84. package/esm2020/lib/components/footer/pager.component.mjs +0 -181
  85. package/esm2020/lib/components/header/header-cell.component.mjs +0 -243
  86. package/esm2020/lib/components/header/header.component.mjs +0 -376
  87. package/esm2020/lib/components/row-detail/row-detail-template.directive.mjs +0 -16
  88. package/esm2020/lib/components/row-detail/row-detail.directive.mjs +0 -63
  89. package/esm2020/lib/directives/draggable.directive.mjs +0 -108
  90. package/esm2020/lib/directives/long-press.directive.mjs +0 -117
  91. package/esm2020/lib/directives/orderable.directive.mjs +0 -136
  92. package/esm2020/lib/directives/resizeable.directive.mjs +0 -93
  93. package/esm2020/lib/directives/visibility.directive.mjs +0 -63
  94. package/esm2020/lib/events.mjs +0 -7
  95. package/esm2020/lib/ngx-datatable.module.mjs +0 -139
  96. package/esm2020/lib/services/column-changes.service.mjs +0 -24
  97. package/esm2020/lib/services/dimensions-helper.service.mjs +0 -17
  98. package/esm2020/lib/services/scrollbar-helper.service.mjs +0 -37
  99. package/esm2020/lib/types/click.type.mjs +0 -6
  100. package/esm2020/lib/types/column-mode.type.mjs +0 -7
  101. package/esm2020/lib/types/contextmenu.type.mjs +0 -6
  102. package/esm2020/lib/types/selection.type.mjs +0 -9
  103. package/esm2020/lib/types/sort-direction.type.mjs +0 -6
  104. package/esm2020/lib/types/sort-prop-dir.type.mjs +0 -2
  105. package/esm2020/lib/types/sort.type.mjs +0 -6
  106. package/esm2020/lib/types/table-column.type.mjs +0 -2
  107. package/esm2020/lib/utils/camel-case.mjs +0 -28
  108. package/esm2020/lib/utils/column-helper.mjs +0 -95
  109. package/esm2020/lib/utils/column-prop-getters.mjs +0 -96
  110. package/esm2020/lib/utils/column.mjs +0 -69
  111. package/esm2020/lib/utils/elm-from-point.mjs +0 -38
  112. package/esm2020/lib/utils/id.mjs +0 -8
  113. package/esm2020/lib/utils/keys.mjs +0 -10
  114. package/esm2020/lib/utils/math.mjs +0 -146
  115. package/esm2020/lib/utils/prefixes.mjs +0 -38
  116. package/esm2020/lib/utils/row-height-cache.mjs +0 -138
  117. package/esm2020/lib/utils/selection.mjs +0 -40
  118. package/esm2020/lib/utils/sort.mjs +0 -127
  119. package/esm2020/lib/utils/throttle.mjs +0 -60
  120. package/esm2020/lib/utils/translate.mjs +0 -25
  121. package/esm2020/lib/utils/tree.mjs +0 -103
  122. package/esm2020/public-api.mjs +0 -64
  123. package/esm2020/swimlane-ngx-datatable.mjs +0 -5
  124. package/fesm2015/swimlane-ngx-datatable.mjs +0 -5979
  125. package/fesm2015/swimlane-ngx-datatable.mjs.map +0 -1
  126. package/fesm2020/swimlane-ngx-datatable.mjs.map +0 -1
  127. package/lib/events.d.ts +0 -3
  128. package/lib/services/dimensions-helper.service.d.ts +0 -10
  129. package/lib/types/click.type.d.ts +0 -4
  130. package/lib/types/column-mode.type.d.ts +0 -5
  131. package/lib/types/contextmenu.type.d.ts +0 -4
  132. package/lib/types/selection.type.d.ts +0 -7
  133. package/lib/types/sort-direction.type.d.ts +0 -4
  134. package/lib/types/sort-prop-dir.type.d.ts +0 -6
  135. package/lib/types/sort.type.d.ts +0 -4
  136. package/lib/utils/elm-from-point.d.ts +0 -8
  137. package/lib/utils/prefixes.d.ts +0 -1
  138. package/lib/utils/translate.d.ts +0 -1
  139. /package/{swimlane-ngx-datatable.d.ts → index.d.ts} +0 -0
package/themes/bootstrap.css CHANGED
@@ -1,67 +1,119 @@
1
- /*
2
- bootstrap table theme
3
- */
1
+ .ghost-cell-container {
2
+ background: #fff;
3
+ }
4
+
5
+ .ghost-cell-strip {
6
+ background: #dee2e5;
7
+ background-image: linear-gradient(to right, #dee2e5 0%, #dee2e5 10%, #fff, transparent);
8
+ border-radius: 0;
9
+ animation-duration: 10s;
10
+ }
11
+
12
+ .ngx-datatable .row-disabled {
13
+ color: #83888e;
14
+ }
15
+ .ngx-datatable .row-disabled .datatable-body-cell-label {
16
+ color: #83888e;
17
+ }
18
+ .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover {
19
+ background-color: inherit;
20
+ transition: none;
21
+ }
22
+ .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover .datatable-row-group {
23
+ background-color: inherit;
24
+ transition: none;
25
+ }
26
+
4
27
  .ngx-datatable.bootstrap {
5
28
  box-shadow: none;
6
- font-size: 13px; }
7
- .ngx-datatable.bootstrap .datatable-header {
8
- height: unset !important; }
9
- .ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
10
- vertical-align: bottom;
11
- padding: 0.75rem;
12
- border-bottom: 1px solid #d1d4d7; }
13
- .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
14
- line-height: 24px; }
15
- .ngx-datatable.bootstrap .datatable-body .datatable-body-row {
16
- vertical-align: top;
17
- border-top: 1px solid #d1d4d7; }
18
- .ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
19
- background-color: rgba(0, 0, 0, 0.05); }
20
- .ngx-datatable.bootstrap .datatable-body .datatable-body-row.active {
21
- background-color: #1483ff;
22
- color: #fff; }
23
- .ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
24
- padding: 0.75rem;
25
- text-align: left;
26
- vertical-align: top; }
27
- .ngx-datatable.bootstrap .datatable-body .empty-row {
28
- position: relative;
29
- padding: 0.75rem 1.25rem;
30
- margin-bottom: 0; }
31
- .ngx-datatable.bootstrap .datatable-footer {
32
- background: #424242;
33
- color: #ededed;
34
- margin-top: -1px; }
35
- .ngx-datatable.bootstrap .datatable-footer .page-count {
36
- line-height: 50px;
37
- height: 50px;
38
- padding: 0 1.2rem; }
39
- .ngx-datatable.bootstrap .datatable-footer .datatable-pager {
40
- margin: 0 10px;
41
- vertical-align: top; }
42
- .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li {
43
- margin: 10px 0px; }
44
- .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a, .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
45
- background-color: #545454;
46
- font-weight: bold; }
47
- .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
48
- height: 22px;
49
- min-width: 24px;
50
- line-height: 22px;
51
- padding: 0;
52
- border-radius: 3px;
53
- margin: 0 3px;
54
- text-align: center;
55
- vertical-align: top;
56
- text-decoration: none;
57
- vertical-align: bottom;
58
- color: #ededed; }
59
- .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
60
- .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
61
- .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
62
- .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
63
- font-size: 18px;
64
- line-height: 27px;
65
- padding: 0 3px; }
66
- .ngx-datatable.bootstrap .datatable-summary-row .datatable-body-row .datatable-body-cell {
67
- font-weight: bold; }
29
+ font-size: 13px;
30
+ }
31
+ .ngx-datatable.bootstrap .datatable-header {
32
+ height: unset !important;
33
+ }
34
+ .ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
35
+ flex-shrink: 0;
36
+ vertical-align: bottom;
37
+ padding: 0.75rem;
38
+ border-bottom: 1px solid #d1d4d7;
39
+ }
40
+ .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
41
+ line-height: 24px;
42
+ }
43
+ .ngx-datatable.bootstrap .datatable-body .datatable-body-row {
44
+ vertical-align: top;
45
+ border-top: 1px solid #d1d4d7;
46
+ }
47
+ .ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
48
+ background-color: rgba(0, 0, 0, 0.05);
49
+ }
50
+ .ngx-datatable.bootstrap .datatable-body .datatable-body-row.active {
51
+ background-color: #1483ff;
52
+ color: #fff;
53
+ }
54
+ .ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
55
+ flex-shrink: 0;
56
+ padding: 0.75rem;
57
+ text-align: left;
58
+ vertical-align: top;
59
+ }
60
+ .ngx-datatable.bootstrap .datatable-body .empty-row {
61
+ position: relative;
62
+ padding: 0.75rem 1.25rem;
63
+ margin-bottom: 0;
64
+ }
65
+ .ngx-datatable.bootstrap .datatable-body .custom-loading-indicator-wrapper {
66
+ position: sticky;
67
+ top: 0;
68
+ height: 0;
69
+ z-index: 999;
70
+ }
71
+ .ngx-datatable.bootstrap .datatable-body .custom-loading-indicator-wrapper .custom-loading-content {
72
+ width: 100%;
73
+ background-color: #fff;
74
+ }
75
+ .ngx-datatable.bootstrap .datatable-footer {
76
+ background: #424242;
77
+ color: #ededed;
78
+ margin-top: -1px;
79
+ }
80
+ .ngx-datatable.bootstrap .datatable-footer .page-count {
81
+ line-height: 50px;
82
+ height: 50px;
83
+ padding: 0 1.2rem;
84
+ }
85
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager {
86
+ margin: 0 10px;
87
+ vertical-align: top;
88
+ }
89
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li {
90
+ margin: 10px 0px;
91
+ }
92
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a, .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
93
+ background-color: #545454;
94
+ font-weight: bold;
95
+ }
96
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
97
+ height: 22px;
98
+ min-width: 24px;
99
+ line-height: 22px;
100
+ padding: 0;
101
+ border-radius: 3px;
102
+ margin: 0 3px;
103
+ text-align: center;
104
+ vertical-align: top;
105
+ text-decoration: none;
106
+ vertical-align: bottom;
107
+ color: #ededed;
108
+ }
109
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
110
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
111
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
112
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
113
+ font-size: 18px;
114
+ line-height: 27px;
115
+ padding: 0 3px;
116
+ }
117
+ .ngx-datatable.bootstrap .datatable-summary-row .datatable-body-row .datatable-body-cell {
118
+ font-weight: bold;
119
+ }
package/themes/bootstrap.scss CHANGED
@@ -1,6 +1,18 @@
1
- /*
2
- bootstrap table theme
3
- */
1
+ $datatable-ghost-cell-container-background: #fff !default;
2
+
3
+ $datatable-ghost-cell-strip-background: #dee2e5 !default;
4
+ $datatable-ghost-cell-strip-background-image: linear-gradient(
5
+ to right,
6
+ $datatable-ghost-cell-strip-background 0%,
7
+ $datatable-ghost-cell-strip-background 10%,
8
+ #fff,
9
+ transparent
10
+ ) !default;
11
+ $datatable-ghost-cell-strip-radius: 0 !default;
12
+ $datatble-ghost-cell-animation-duration: 10s;
13
+
14
+ @import './ghost';
15
+ @import './rows';
4
16
 
5
17
  .ngx-datatable.bootstrap {
6
18
  box-shadow: none;
@@ -8,6 +20,7 @@ bootstrap table theme
8
20
  .datatable-header {
9
21
  height: unset !important;
10
22
  .datatable-header-cell {
23
+ flex-shrink: 0;
11
24
  vertical-align: bottom;
12
25
  padding: 0.75rem;
13
26
  border-bottom: 1px solid #d1d4d7;
@@ -28,6 +41,7 @@ bootstrap table theme
28
41
  color: #fff;
29
42
  }
30
43
  .datatable-body-cell {
44
+ flex-shrink: 0;
31
45
  padding: 0.75rem;
32
46
  text-align: left;
33
47
  vertical-align: top;
@@ -40,6 +54,16 @@ bootstrap table theme
40
54
  padding: $alert-padding-y $alert-padding-x;
41
55
  margin-bottom: 0;
42
56
  }
57
+ .custom-loading-indicator-wrapper {
58
+ position: sticky;
59
+ top: 0;
60
+ height: 0;
61
+ z-index: 999;
62
+ .custom-loading-content {
63
+ width: 100%;
64
+ background-color: #fff;
65
+ }
66
+ }
43
67
  }
44
68
  .datatable-footer {
45
69
  background: #424242;
package/themes/dark.css CHANGED
@@ -3,73 +3,104 @@
3
3
  background: #1b1e27;
4
4
  border: 1px solid #2f3646;
5
5
  color: #fff;
6
- font-size: 13px; }
7
- .ngx-datatable.dark .datatable-header {
8
- background: #181b24;
9
- color: #72809b; }
10
- .ngx-datatable.dark .datatable-header .datatable-header-cell {
11
- text-align: left;
12
- padding: 0.5rem 1.2rem;
13
- font-weight: bold; }
14
- .ngx-datatable.dark .datatable-header .datatable-header-cell .datatable-header-cell-label {
15
- line-height: 24px; }
16
- .ngx-datatable.dark .datatable-body {
17
- background: #1a1e28; }
18
- .ngx-datatable.dark .datatable-body .datatable-body-row {
19
- border-top: 1px solid #2f3646; }
20
- .ngx-datatable.dark .datatable-body .datatable-body-row .datatable-body-cell {
21
- text-align: left;
22
- padding: 0.5rem 1.2rem;
23
- vertical-align: top; }
24
- .ngx-datatable.dark .datatable-body .datatable-body-row:hover {
25
- background: #171b24;
26
- transition-property: background;
27
- transition-duration: 0.3s;
28
- transition-timing-function: linear; }
29
- .ngx-datatable.dark .datatable-body .datatable-body-row:focus {
30
- background-color: #232837; }
31
- .ngx-datatable.dark .datatable-body .datatable-body-row.active {
32
- background-color: #1483ff;
33
- color: #fff; }
34
- .ngx-datatable.dark .datatable-footer {
35
- background: #232837;
36
- color: #72809b;
37
- margin-top: -1px; }
38
- .ngx-datatable.dark .datatable-footer .page-count {
39
- line-height: 50px;
40
- height: 50px;
41
- padding: 0 1.2rem; }
42
- .ngx-datatable.dark .datatable-footer .datatable-pager {
43
- margin: 0 10px;
44
- vertical-align: top; }
45
- .ngx-datatable.dark .datatable-footer .datatable-pager ul li {
46
- margin: 10px 0px; }
47
- .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled).active a,
48
- .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
49
- background-color: #455066;
50
- font-weight: bold; }
51
- .ngx-datatable.dark .datatable-footer .datatable-pager a {
52
- height: 22px;
53
- min-width: 24px;
54
- line-height: 22px;
55
- padding: 0;
56
- border-radius: 3px;
57
- margin: 0 3px;
58
- text-align: center;
59
- vertical-align: top;
60
- text-decoration: none;
61
- vertical-align: bottom;
62
- color: #72809b; }
63
- .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-left,
64
- .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-skip,
65
- .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-right,
66
- .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-prev {
67
- font-size: 18px;
68
- line-height: 27px;
69
- padding: 0 3px; }
70
- .ngx-datatable.dark .datatable-summary-row .datatable-body-row {
71
- background-color: #14171f; }
72
- .ngx-datatable.dark .datatable-summary-row .datatable-body-row:hover {
73
- background-color: #14171f; }
74
- .ngx-datatable.dark .datatable-summary-row .datatable-body-row .datatable-body-cell {
75
- font-weight: bold; }
6
+ font-size: 13px;
7
+ }
8
+ .ngx-datatable.dark .datatable-header {
9
+ background: #181b24;
10
+ color: #72809b;
11
+ }
12
+ .ngx-datatable.dark .datatable-header .datatable-header-cell {
13
+ flex-shrink: 0;
14
+ text-align: left;
15
+ padding: 0.5rem 1.2rem;
16
+ font-weight: bold;
17
+ }
18
+ .ngx-datatable.dark .datatable-header .datatable-header-cell .datatable-header-cell-label {
19
+ line-height: 24px;
20
+ }
21
+ .ngx-datatable.dark .datatable-body {
22
+ background: #1a1e28;
23
+ }
24
+ .ngx-datatable.dark .datatable-body .datatable-body-row {
25
+ border-top: 1px solid #2f3646;
26
+ }
27
+ .ngx-datatable.dark .datatable-body .datatable-body-row .datatable-body-cell {
28
+ flex-shrink: 0;
29
+ text-align: left;
30
+ padding: 0.5rem 1.2rem;
31
+ vertical-align: top;
32
+ }
33
+ .ngx-datatable.dark .datatable-body .datatable-body-row:hover {
34
+ background: #171b24;
35
+ transition-property: background;
36
+ transition-duration: 0.3s;
37
+ transition-timing-function: linear;
38
+ }
39
+ .ngx-datatable.dark .datatable-body .datatable-body-row:focus {
40
+ background-color: #232837;
41
+ }
42
+ .ngx-datatable.dark .datatable-body .datatable-body-row.active {
43
+ background-color: #1483ff;
44
+ color: #fff;
45
+ }
46
+ .ngx-datatable.dark .datatable-body .custom-loading-indicator-wrapper {
47
+ position: sticky;
48
+ top: 0;
49
+ height: 0;
50
+ z-index: 999;
51
+ }
52
+ .ngx-datatable.dark .datatable-body .custom-loading-indicator-wrapper .custom-loading-content {
53
+ width: 100%;
54
+ background-color: #1a1e28;
55
+ }
56
+ .ngx-datatable.dark .datatable-footer {
57
+ background: #232837;
58
+ color: #72809b;
59
+ margin-top: -1px;
60
+ }
61
+ .ngx-datatable.dark .datatable-footer .page-count {
62
+ line-height: 50px;
63
+ height: 50px;
64
+ padding: 0 1.2rem;
65
+ }
66
+ .ngx-datatable.dark .datatable-footer .datatable-pager {
67
+ margin: 0 10px;
68
+ vertical-align: top;
69
+ }
70
+ .ngx-datatable.dark .datatable-footer .datatable-pager ul li {
71
+ margin: 10px 0px;
72
+ }
73
+ .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled).active a, .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
74
+ background-color: #455066;
75
+ font-weight: bold;
76
+ }
77
+ .ngx-datatable.dark .datatable-footer .datatable-pager a {
78
+ height: 22px;
79
+ min-width: 24px;
80
+ line-height: 22px;
81
+ padding: 0;
82
+ border-radius: 3px;
83
+ margin: 0 3px;
84
+ text-align: center;
85
+ vertical-align: top;
86
+ text-decoration: none;
87
+ vertical-align: bottom;
88
+ color: #72809b;
89
+ }
90
+ .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-left,
91
+ .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-skip,
92
+ .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-right,
93
+ .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-prev {
94
+ font-size: 18px;
95
+ line-height: 27px;
96
+ padding: 0 3px;
97
+ }
98
+ .ngx-datatable.dark .datatable-summary-row .datatable-body-row {
99
+ background-color: #14171f;
100
+ }
101
+ .ngx-datatable.dark .datatable-summary-row .datatable-body-row:hover {
102
+ background-color: #14171f;
103
+ }
104
+ .ngx-datatable.dark .datatable-summary-row .datatable-body-row .datatable-body-cell {
105
+ font-weight: bold;
106
+ }
package/themes/dark.scss CHANGED
@@ -10,6 +10,7 @@
10
10
  color: #72809b;
11
11
 
12
12
  .datatable-header-cell {
13
+ flex-shrink: 0;
13
14
  text-align: left;
14
15
  padding: 0.5rem 1.2rem;
15
16
  font-weight: bold;
@@ -27,6 +28,7 @@
27
28
  border-top: 1px solid #2f3646;
28
29
 
29
30
  .datatable-body-cell {
31
+ flex-shrink: 0;
30
32
  text-align: left;
31
33
  padding: 0.5rem 1.2rem;
32
34
  vertical-align: top;
@@ -48,6 +50,16 @@
48
50
  color: #fff;
49
51
  }
50
52
  }
53
+ .custom-loading-indicator-wrapper {
54
+ position: sticky;
55
+ top: 0;
56
+ height: 0;
57
+ z-index: 999;
58
+ .custom-loading-content {
59
+ width: 100%;
60
+ background-color: #1a1e28;
61
+ }
62
+ }
51
63
  }
52
64
 
53
65
  .datatable-footer {