@swimlane/ngx-datatable 21.0.0-alpha.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.
- package/CHANGELOG.md +720 -0
- package/LICENSE +22 -0
- package/README.md +68 -0
- package/assets/app.css +303 -0
- package/assets/data/100k.json +100002 -0
- package/assets/data/company.json +505 -0
- package/assets/data/company_tree.json +61 -0
- package/assets/data/forRowGrouping.json +227 -0
- package/assets/fonts/data-table.eot +0 -0
- package/assets/fonts/data-table.svg +26 -0
- package/assets/fonts/data-table.ttf +0 -0
- package/assets/fonts/data-table.woff +0 -0
- package/assets/icons-reference.html +399 -0
- package/assets/icons.css +106 -0
- package/index.css +253 -0
- package/index.scss +325 -0
- package/package.json +1 -1
- package/themes/_ghost.scss +22 -0
- package/themes/_rows.scss +22 -0
- package/themes/bootstrap.css +119 -0
- package/themes/bootstrap.scss +125 -0
- package/themes/dark.css +106 -0
- package/themes/dark.scss +132 -0
- package/themes/material.css +389 -0
- package/themes/material.scss +521 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
(The MIT License)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2019 Swimlane <info@swimlane.com>
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
6
|
+
a copy of this software and associated documentation files (the
|
|
7
|
+
'Software'), to deal in the Software without restriction, including
|
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
11
|
+
the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be
|
|
14
|
+
included in all copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
|
19
|
+
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
|
20
|
+
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
|
21
|
+
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
|
22
|
+
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# ngx-datatable
|
|
2
|
+
|
|
3
|
+
[](https://gitter.im/swimlane/ngx-datatable?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
|
4
|
+
[](https://codeclimate.com/github/swimlane/ngx-datatable)
|
|
5
|
+
[](https://codeclimate.com/github/swimlane/ngx-datatable/coverage)
|
|
6
|
+
[](https://badge.fury.io/js/%40swimlane%2Fngx-datatable)
|
|
7
|
+
[](https://npmjs.org/@swimlane/ngx-datatable)
|
|
8
|
+
|
|
9
|
+
`ngx-datatable` is an Angular component for presenting large and complex data. It has all the features you would expect from any other table but in a light package with _no external dependencies_. The table was designed to be extremely flexible and light; it doesn't make any assumptions about your data or how you: filter, sort or page it.
|
|
10
|
+
|
|
11
|
+
Check out the [documentation](https://swimlane.gitbook.io/ngx-datatable/) & [demos](http://swimlane.github.io/ngx-datatable/) for more information!
|
|
12
|
+
|
|
13
|
+
See the [changelog](https://github.com/swimlane/ngx-datatable/blob/master/docs/changelog.md) for recent changes.
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- Handle large data sets ( Virtual DOM )
|
|
18
|
+
- Expressive Header and Cell Templates
|
|
19
|
+
- Horizontal & Vertical Scrolling
|
|
20
|
+
- Column Reordering & Resizing
|
|
21
|
+
- Client/Server side Pagination & Sorting
|
|
22
|
+
- Intelligent Column Width Algorithms ( Force-fill & Flex-grow )
|
|
23
|
+
- Integrated Pager
|
|
24
|
+
- Cell & Row Selection ( Single, Multi, Keyboard, Checkbox )
|
|
25
|
+
- Fixed AND Fluid height
|
|
26
|
+
- Left and Right Column Pinning
|
|
27
|
+
- Row Detail View
|
|
28
|
+
- Decoupled theme'ing with included Google Material theme
|
|
29
|
+
- Light codebase / No external dependencies
|
|
30
|
+
- AoT Compilation Support
|
|
31
|
+
- Universal Support
|
|
32
|
+
|
|
33
|
+
## Installation
|
|
34
|
+
|
|
35
|
+
To use ngx-datatable in your project install it via [npm](https://www.npmjs.com/package/@swimlane/ngx-datatable):
|
|
36
|
+
|
|
37
|
+
```
|
|
38
|
+
npm i @swimlane/ngx-datatable --save
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Building
|
|
42
|
+
|
|
43
|
+
Run `yarn build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
|
44
|
+
|
|
45
|
+
## Running tests
|
|
46
|
+
|
|
47
|
+
- Run `yarn test` to execute the linter, prettier check, unit and end-to-end tests.
|
|
48
|
+
|
|
49
|
+
## Release
|
|
50
|
+
|
|
51
|
+
- Checkout master (`git checkout master`)
|
|
52
|
+
- Pull master (`git pull`)
|
|
53
|
+
- Refresh node modules (`yarn install --frozen-lockfile`)
|
|
54
|
+
- Run tests (`yarn test`)
|
|
55
|
+
- Examine log to determine next version (X.Y.Z)
|
|
56
|
+
- Run `git checkout -b release/X.Y.Z`
|
|
57
|
+
- Update version in `projects/swimlane/ngx-datatable/package.json`.
|
|
58
|
+
- Update changelog in `projects/swimlane/ngx-datatable/docs/CHANGELOG.md`
|
|
59
|
+
- Run `yarn package` to build the package
|
|
60
|
+
- Run `git commit -am "(release): X.Y.Z"`
|
|
61
|
+
- Run `git tag X.Y.Z`
|
|
62
|
+
- Run `git push origin HEAD --tags`
|
|
63
|
+
- Run `yarn publish`
|
|
64
|
+
- Submit PR
|
|
65
|
+
|
|
66
|
+
## Credits
|
|
67
|
+
|
|
68
|
+
`ngx-datatable` is a [Swimlane](http://swimlane.com) open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.
|
package/assets/app.css
ADDED
|
@@ -0,0 +1,303 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
|
|
3
|
+
text-align: left;
|
|
4
|
+
font-style: normal;
|
|
5
|
+
font-weight: 300;
|
|
6
|
+
font-size: 16px;
|
|
7
|
+
line-height: 2rem;
|
|
8
|
+
letter-spacing: 0.01rem;
|
|
9
|
+
color: #212121;
|
|
10
|
+
background-color: #fafafa;
|
|
11
|
+
-webkit-font-smoothing: antialiased;
|
|
12
|
+
-moz-osx-font-smoothing: grayscale;
|
|
13
|
+
text-rendering: optimizeLegibility;
|
|
14
|
+
margin: 0;
|
|
15
|
+
position: relative;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ngx-datatable,
|
|
19
|
+
.info {
|
|
20
|
+
text-align: left;
|
|
21
|
+
width: 75%;
|
|
22
|
+
margin: 0 auto;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.info {
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
padding: 0 1em;
|
|
28
|
+
border: solid 1px #ccc;
|
|
29
|
+
background: white;
|
|
30
|
+
font-size: 0.8em;
|
|
31
|
+
margin-bottom: 1em;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ngx-datatable.scroll-vertical {
|
|
35
|
+
height: 70vh;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.selected-column {
|
|
39
|
+
background: #fff;
|
|
40
|
+
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
|
|
41
|
+
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
|
|
42
|
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.group {
|
|
46
|
+
position: relative;
|
|
47
|
+
margin-bottom: 45px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
input[type='text'] {
|
|
51
|
+
font-size: 14px;
|
|
52
|
+
display: block;
|
|
53
|
+
background: transparent;
|
|
54
|
+
width: 100%;
|
|
55
|
+
border: none;
|
|
56
|
+
border-bottom: 1px solid #5264ae;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
textarea {
|
|
60
|
+
font-size: 14px;
|
|
61
|
+
font-family: sans-serif;
|
|
62
|
+
display: block;
|
|
63
|
+
background: transparent;
|
|
64
|
+
width: 100%;
|
|
65
|
+
border: none;
|
|
66
|
+
border-bottom: 1px solid #5264ae;
|
|
67
|
+
resize: vertical;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
input:focus {
|
|
71
|
+
outline: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
a {
|
|
75
|
+
color: grey;
|
|
76
|
+
text-decoration: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.expander-btn {
|
|
80
|
+
margin-top: 8px;
|
|
81
|
+
display: block;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
h3 {
|
|
85
|
+
background: #1f89ff;
|
|
86
|
+
margin: 0 0 30px 0;
|
|
87
|
+
color: #fff;
|
|
88
|
+
text-align: left;
|
|
89
|
+
padding: 10px;
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
height: 32px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
h3 a {
|
|
95
|
+
color: #ccc;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
h3 small {
|
|
99
|
+
margin-left: 10px;
|
|
100
|
+
font-size: 0.8rem;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.fullscreen {
|
|
104
|
+
position: absolute !important;
|
|
105
|
+
height: auto !important;
|
|
106
|
+
top: 0;
|
|
107
|
+
left: 0;
|
|
108
|
+
right: 0;
|
|
109
|
+
bottom: 0;
|
|
110
|
+
width: 100%;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.selection-cell .datatable-body-cell.active {
|
|
114
|
+
background: #0829e0 !important;
|
|
115
|
+
color: #fff !important;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.selected-column {
|
|
119
|
+
float: right;
|
|
120
|
+
width: 20%;
|
|
121
|
+
margin-right: 20px;
|
|
122
|
+
text-align: left;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.selected-column h4 {
|
|
126
|
+
text-align: center;
|
|
127
|
+
margin: 10px 0 0 0;
|
|
128
|
+
padding: 0;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
ul,
|
|
132
|
+
li {
|
|
133
|
+
padding: 0;
|
|
134
|
+
margin: 0;
|
|
135
|
+
list-style: none;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
ul {
|
|
139
|
+
margin: 10px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
li {
|
|
143
|
+
padding: 3px 5px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
nav {
|
|
147
|
+
background: #fff;
|
|
148
|
+
z-index: 99;
|
|
149
|
+
top: 0;
|
|
150
|
+
left: 0;
|
|
151
|
+
bottom: 0;
|
|
152
|
+
width: 200px;
|
|
153
|
+
position: fixed;
|
|
154
|
+
overflow-y: auto;
|
|
155
|
+
font-size: 14px;
|
|
156
|
+
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
|
|
157
|
+
0 5px 24px 4px rgba(0, 0, 0, 0.12);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
nav ul {
|
|
161
|
+
margin: 0 8px !important;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
nav li {
|
|
165
|
+
padding: 0;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
nav h3 {
|
|
169
|
+
font-size: 14px;
|
|
170
|
+
margin: 0 0 10px 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
nav h4 {
|
|
174
|
+
margin: 7px 0 0 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
nav h4 a {
|
|
178
|
+
color: #000;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
main {
|
|
182
|
+
margin-left: 200px;
|
|
183
|
+
height: 100vh;
|
|
184
|
+
display: block;
|
|
185
|
+
position: relative;
|
|
186
|
+
padding-bottom: 0px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
main h3 {
|
|
190
|
+
padding-left: 35px;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.main-ul {
|
|
194
|
+
margin-left: 15px !important;
|
|
195
|
+
display: block;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.github-button-wrap {
|
|
199
|
+
position: absolute;
|
|
200
|
+
top: 10px;
|
|
201
|
+
right: 10px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
nav h3 small {
|
|
205
|
+
font-size: 0.7rem;
|
|
206
|
+
display: inline-block;
|
|
207
|
+
margin-left: 0;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
select {
|
|
211
|
+
width: 100%;
|
|
212
|
+
height: 30px;
|
|
213
|
+
margin: 5px 0;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.age-is-ten {
|
|
217
|
+
background: #ffc91f;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.is-gender {
|
|
221
|
+
background: blue;
|
|
222
|
+
color: white;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.is-female {
|
|
226
|
+
background: pink;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.dark {
|
|
230
|
+
background: #181b24;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.dark nav {
|
|
234
|
+
background: #232837;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.dark nav a {
|
|
238
|
+
color: #fff;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.dark nav h4 {
|
|
242
|
+
color: #72809b;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.expectedpayment + label:before {
|
|
246
|
+
border: 1px solid #7f83a2;
|
|
247
|
+
content: '\00a0';
|
|
248
|
+
display: inline-block;
|
|
249
|
+
font: 16px/1em sans-serif;
|
|
250
|
+
height: 16px;
|
|
251
|
+
margin: 0 0.25em 0 0;
|
|
252
|
+
padding: 0;
|
|
253
|
+
vertical-align: top;
|
|
254
|
+
width: 16px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.expectedpayment2 + label:before {
|
|
258
|
+
border: 1px solid #7f83a2;
|
|
259
|
+
content: '\00a0';
|
|
260
|
+
display: inline-block;
|
|
261
|
+
font: 16px/1em sans-serif;
|
|
262
|
+
height: 16px;
|
|
263
|
+
margin: 0 0.25em 0 0;
|
|
264
|
+
padding: 0;
|
|
265
|
+
vertical-align: top;
|
|
266
|
+
width: 16px;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.expectedpayment3 + label:before {
|
|
270
|
+
border: 1px solid #7f83a2;
|
|
271
|
+
content: '\00a0';
|
|
272
|
+
display: inline-block;
|
|
273
|
+
font: 16px/1em sans-serif;
|
|
274
|
+
height: 16px;
|
|
275
|
+
margin: 0 0.25em 0 0;
|
|
276
|
+
padding: 0;
|
|
277
|
+
vertical-align: top;
|
|
278
|
+
width: 16px;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.expectedpayment:checked + label:before {
|
|
282
|
+
color: #eee;
|
|
283
|
+
content: '\2713';
|
|
284
|
+
text-align: center;
|
|
285
|
+
font-weight: bold;
|
|
286
|
+
background-color: #66bb6a;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.expectedpayment2:checked + label:before {
|
|
290
|
+
color: #eee;
|
|
291
|
+
content: '\2716';
|
|
292
|
+
text-align: center;
|
|
293
|
+
font-weight: bold;
|
|
294
|
+
background-color: #ff1744;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.expectedpayment3:checked + label:before {
|
|
298
|
+
color: #eee;
|
|
299
|
+
content: '\003F';
|
|
300
|
+
text-align: center;
|
|
301
|
+
font-weight: bold;
|
|
302
|
+
background-color: #ffeb3b;
|
|
303
|
+
}
|