@timlassiter11/yatl 0.1.6 → 0.1.8
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/LICENSE +21 -21
- package/README.md +141 -136
- package/dist/datatable.d.mts +25 -28
- package/dist/datatable.d.ts +25 -28
- package/dist/datatable.global.js +3 -3
- package/dist/datatable.global.js.map +1 -1
- package/dist/datatable.js +3 -3
- package/dist/datatable.js.map +1 -1
- package/dist/datatable.mjs +3 -3
- package/dist/datatable.mjs.map +1 -1
- package/package.json +65 -64
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 Timothy Lassiter
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Timothy Lassiter
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,136 +1,141 @@
|
|
|
1
|
-
# YATL
|
|
2
|
-
**Yet Another Table Library**
|
|
3
|
-
|
|
4
|
-
YATL is a lightweight and customizable JavaScript library for creating dynamic, interactive tables. It provides features like sorting, filtering, searching, and virtual scrolling, making it easy to work with large datasets in a performant way.
|
|
5
|
-
|
|
6
|
-
##
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
- **
|
|
11
|
-
- **
|
|
12
|
-
- **
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
1
|
+
# YATL
|
|
2
|
+
**Yet Another Table Library**
|
|
3
|
+
|
|
4
|
+
YATL is a lightweight and customizable JavaScript library for creating dynamic, interactive tables. It provides features like sorting, filtering, searching, and virtual scrolling, making it easy to work with large datasets in a performant way.
|
|
5
|
+
|
|
6
|
+
## Why?!?
|
|
7
|
+
I needed a free and simple table library for vanilla JS that was easy to customize and could handle large datasets... so I created YATL. It is designed with performance and simplicity in mind. It has zero dependencies, is incredibly lightweight, and uses a highly efficient virtual scrolling engine to handle massive datasets with ease. If you need a powerful table without the bloat of larger frameworks, YATL is for you.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
- **Sorting**: Sort table rows by multiple columns (ascending or descending).
|
|
11
|
+
- **Filtering**: Filter rows based on multiple criteria or custom filter functions.
|
|
12
|
+
- **Searching**: Perform case-insensitive searches across table data with support for tokenization and regular expressions.
|
|
13
|
+
- **Virtual Scrolling**: Efficiently render large datasets with virtual scrolling.
|
|
14
|
+
- **Customizable Columns**: Define column properties like visibility, formatting, and sorting behavior.
|
|
15
|
+
- **Export to CSV**: Export table data to a CSV file.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
The recommend method is to use npm.
|
|
20
|
+
```bash
|
|
21
|
+
npm install @timlassiter11/yatl
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Alternatively you can manually download the source files from the [releases](https://github.com/timlassiter11/YATL/releases) section.
|
|
25
|
+
|
|
26
|
+
### npm
|
|
27
|
+
```ts
|
|
28
|
+
import { DataTable } from "@timlassiter11/yatl";
|
|
29
|
+
|
|
30
|
+
const datatble = DataTable("#myTable", {
|
|
31
|
+
...
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### source (ES6)
|
|
37
|
+
```javascript
|
|
38
|
+
import { DataTable } from "path/to/datatable.esm.js";
|
|
39
|
+
|
|
40
|
+
const datatable = new DataTable("#myTable", {
|
|
41
|
+
...
|
|
42
|
+
});
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### source (UMD)
|
|
46
|
+
```html
|
|
47
|
+
<script src="path/to/datatable.umd.js"></script>
|
|
48
|
+
<script>
|
|
49
|
+
const datatble = new yatl.DataTable("#myTable", {
|
|
50
|
+
...
|
|
51
|
+
});
|
|
52
|
+
</script>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Styling
|
|
56
|
+
Some optional styling is included which adds sorting indicators and sticky headers. To use them simply include the stylesheet.
|
|
57
|
+
|
|
58
|
+
### npm
|
|
59
|
+
```ts
|
|
60
|
+
import "@timlassiter11/yatl/datatable.css";
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### source
|
|
64
|
+
```html
|
|
65
|
+
<link rel="stylesheet" href="path/to/datatable.css">
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Usage
|
|
69
|
+
```javascript
|
|
70
|
+
// Initialize the DataTable
|
|
71
|
+
const dataTable = new DataTable("#myTable", {
|
|
72
|
+
columns: [
|
|
73
|
+
{ field: "name", title: "First Name", sortable: true, searchable: true },
|
|
74
|
+
// Titles will be created from the field name
|
|
75
|
+
{ field: "age", sortable: true },
|
|
76
|
+
{ field: "city", searchable: true },
|
|
77
|
+
],
|
|
78
|
+
data: [
|
|
79
|
+
{ name: "Alice", age: 25, city: "New York" },
|
|
80
|
+
{ name: "Bob", age: 30, city: "Los Angeles" },
|
|
81
|
+
{ name: "Charlie", age: 35, city: "Chicago" },
|
|
82
|
+
],
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
// Sort by age in ascending order
|
|
86
|
+
dataTable.sort("age", "asc");
|
|
87
|
+
|
|
88
|
+
// Filter rows to only people aged 25
|
|
89
|
+
dataTable.filter({ age: 25 });
|
|
90
|
+
|
|
91
|
+
// Filter rows to only people over 25
|
|
92
|
+
dataTable.filter((row) => row.age > 25);
|
|
93
|
+
|
|
94
|
+
// Search for Bob
|
|
95
|
+
dataTable.search("bob");
|
|
96
|
+
|
|
97
|
+
// Export table data to CSV
|
|
98
|
+
dataTable.export("my-table-data");
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Virtual Scroll
|
|
102
|
+
Virtual scrolling is used to render only the rows that are visible (with some extras before and after). This allows the library to support tables with hundreads of thousands of rows without issue. This is done using some magic (*simple math...*) but requires it's parent enforce a height. To do this you can simply add a height to the table.
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<body>
|
|
106
|
+
<table style="height: 500px;"></table>
|
|
107
|
+
</body>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
This will result in the following HTML after the table is initialized
|
|
111
|
+
```html
|
|
112
|
+
<body>
|
|
113
|
+
<div class="dt-scroller" style="overflow: auto; height: 500px;">
|
|
114
|
+
<table></table>
|
|
115
|
+
</div>
|
|
116
|
+
</body>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
Most of the time this isn't ideal though and instead we'd like to let the layout work it's magic (*probably also simple math...*). To do this, it's best to wrap the table in an element that can enforce a height.
|
|
120
|
+
|
|
121
|
+
```html
|
|
122
|
+
<body style="height: 100vh;">
|
|
123
|
+
<div style="display: flex; flex-direction: column; overflow: auto; height: 100%;">
|
|
124
|
+
<div>
|
|
125
|
+
... Lot's of cool table controls or filters
|
|
126
|
+
</div>
|
|
127
|
+
<table></table>
|
|
128
|
+
<div>
|
|
129
|
+
... Some boring footer info or something
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</body>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
Since the `dt-scroller` wrapper listens to scroll and resize events, this allows the table to be responsive and update what is rendered as the layout changes.
|
|
136
|
+
|
|
137
|
+
# Known Issues
|
|
138
|
+
There are some limitations to virtual scrolling. For one, rows need to be a uniform height to accurately calculate the table height. Also, there seems to be a maximum element size that once exceeded, the contents are no longer rendered. I've found this to occur with datasets approaching 1 million rows in Chrome and unfortunately I have no workaround for it. If you have that many rows you definitely need some server side pagination and this is probably not the library for you.
|
|
139
|
+
|
|
140
|
+
# Examples
|
|
141
|
+
Examples can be found in the examples directoy and are also hosted [here](https://timlassiter11.github.io/YATL/index.html) to view live.
|
package/dist/datatable.d.mts
CHANGED
|
@@ -2,35 +2,26 @@
|
|
|
2
2
|
* Defines the possible sorting orders for columns.
|
|
3
3
|
*/
|
|
4
4
|
type SortOrder = 'asc' | 'desc' | null;
|
|
5
|
-
/**
|
|
6
|
-
* Represents a generic data row in the table, an object with string keys and any values.
|
|
7
|
-
*/
|
|
8
|
-
type Row = Record<string, any>;
|
|
9
|
-
/**
|
|
10
|
-
* Represents filter data where the key should be a field in the Row data and the value
|
|
11
|
-
* should be comparable to the value of that field, or an array of values.
|
|
12
|
-
*/
|
|
13
|
-
type Filters = Record<string, any>;
|
|
14
5
|
/**
|
|
15
6
|
* Callback for formatting a row's HTML element.
|
|
16
7
|
* @param row - The row data.
|
|
17
8
|
* @param element - The row element.
|
|
18
9
|
*/
|
|
19
|
-
type RowFormatterCallback = (row:
|
|
10
|
+
type RowFormatterCallback = (row: any, element: HTMLElement) => void;
|
|
20
11
|
/**
|
|
21
12
|
* Callback for formatting the value of a cell.
|
|
22
13
|
* Called when the cell is created and when exporting to CSV.
|
|
23
14
|
* @param value - The value of the cell.
|
|
24
15
|
* @param row - The row data.
|
|
25
16
|
*/
|
|
26
|
-
type ValueFormatterCallback = (value: any, row:
|
|
17
|
+
type ValueFormatterCallback = (value: any, row: any) => string;
|
|
27
18
|
/**
|
|
28
19
|
* Callback for formatting a cell's HTML element.
|
|
29
20
|
* @param value - The value of the field.
|
|
30
21
|
* @param row - The row data.
|
|
31
22
|
* @param element - The cell element.
|
|
32
23
|
*/
|
|
33
|
-
type CellFormatterCallback = (value: any, row:
|
|
24
|
+
type CellFormatterCallback = (value: any, row: any, element: HTMLElement) => void;
|
|
34
25
|
/**
|
|
35
26
|
* Callback for comparing two values.
|
|
36
27
|
* @param a - The first value.
|
|
@@ -57,7 +48,7 @@ type TokenizerCallback = (value: any) => string[];
|
|
|
57
48
|
* @param index - The index of the row.
|
|
58
49
|
* @returns True if the row matches the filter, false otherwise.
|
|
59
50
|
*/
|
|
60
|
-
type FilterCallback = (row:
|
|
51
|
+
type FilterCallback = (row: any, index: number) => boolean;
|
|
61
52
|
/**
|
|
62
53
|
* Callback for filtering a field value against the filter data.
|
|
63
54
|
* @param value - The value to filter.
|
|
@@ -214,7 +205,7 @@ interface TableOptions {
|
|
|
214
205
|
/**
|
|
215
206
|
* The initial data to load into the table.
|
|
216
207
|
*/
|
|
217
|
-
data?:
|
|
208
|
+
data?: any[];
|
|
218
209
|
/**
|
|
219
210
|
* Configures virtual scrolling.
|
|
220
211
|
*/
|
|
@@ -238,6 +229,11 @@ interface TableOptions {
|
|
|
238
229
|
* Can be overridden on individual columns.
|
|
239
230
|
*/
|
|
240
231
|
tokenize?: boolean;
|
|
232
|
+
/**
|
|
233
|
+
* Whether search results should be scored or not.
|
|
234
|
+
* Scoring is very computationally expensive...
|
|
235
|
+
*/
|
|
236
|
+
scoring?: boolean;
|
|
241
237
|
/**
|
|
242
238
|
* Whether columns should be resizable by default.
|
|
243
239
|
* Can be overridden on individual columns.
|
|
@@ -325,11 +321,11 @@ declare class DataTable extends EventTarget {
|
|
|
325
321
|
/**
|
|
326
322
|
* Gets the currently filtered and sorted rows displayed in the table.
|
|
327
323
|
*/
|
|
328
|
-
get rows():
|
|
324
|
+
get rows(): any[];
|
|
329
325
|
/**
|
|
330
326
|
* Gets the underlying data
|
|
331
327
|
*/
|
|
332
|
-
get data():
|
|
328
|
+
get data(): any[];
|
|
333
329
|
/**
|
|
334
330
|
* Gets the total number of currently filtered and sorted rows.
|
|
335
331
|
*/
|
|
@@ -346,13 +342,14 @@ declare class DataTable extends EventTarget {
|
|
|
346
342
|
*/
|
|
347
343
|
get virtualScroll(): boolean;
|
|
348
344
|
set virtualScroll(value: boolean);
|
|
345
|
+
get scoring(): boolean;
|
|
346
|
+
set scoring(value: boolean);
|
|
349
347
|
/**
|
|
350
|
-
* Loads data into the table
|
|
351
|
-
* @param rows - An array of
|
|
352
|
-
* @param
|
|
353
|
-
* @throws {TypeError} If `rows` is not an array.
|
|
348
|
+
* Loads data into the table
|
|
349
|
+
* @param rows - An array of data to be loaded
|
|
350
|
+
* @param options - Configuration for the load operation
|
|
354
351
|
*/
|
|
355
|
-
loadData(rows:
|
|
352
|
+
loadData(rows: any[], options?: LoadOptions): void;
|
|
356
353
|
/**
|
|
357
354
|
* Displays a message in the table body, typically used for "no data" or "no results" states.
|
|
358
355
|
* The message is shown in a single row spanning all columns.
|
|
@@ -377,7 +374,7 @@ declare class DataTable extends EventTarget {
|
|
|
377
374
|
* @param filters - An object defining field-based filters or a custom filter callback function.
|
|
378
375
|
* @throws {TypeError} If `filters` is not an object or a function.
|
|
379
376
|
*/
|
|
380
|
-
filter(filters?:
|
|
377
|
+
filter(filters?: any | FilterCallback): void;
|
|
381
378
|
/**
|
|
382
379
|
* Sorts the table by a specified column and order.
|
|
383
380
|
* If `order` is `null`, the sort on this column is removed.
|
|
@@ -407,7 +404,7 @@ declare class DataTable extends EventTarget {
|
|
|
407
404
|
* @param all - If `true`, exports all original data (ignoring filters). If `false` (default), exports only the currently visible (filtered and sorted) rows.
|
|
408
405
|
*/
|
|
409
406
|
export(filename: string, all?: boolean): void;
|
|
410
|
-
scrollToRow(row:
|
|
407
|
+
scrollToRow(row: any): void;
|
|
411
408
|
/**
|
|
412
409
|
* Scrolls the table to bring the row at the specified original index into view.
|
|
413
410
|
* @param index - The original index of the row (from the initial dataset).
|
|
@@ -443,18 +440,18 @@ declare class DataTable extends EventTarget {
|
|
|
443
440
|
indexOf(field: string, value: any): number;
|
|
444
441
|
/**
|
|
445
442
|
* Updates the data of a row at a specific original index.
|
|
446
|
-
* @param data - An object containing the new data to assign to the row. Existing fields will be updated, and new fields will be added.
|
|
447
443
|
* @param index - The original index of the row to update.
|
|
444
|
+
* @param data - An object containing the new data to assign to the row. Existing fields will be updated, and new fields will be added.
|
|
448
445
|
*
|
|
449
446
|
* @example
|
|
450
447
|
* ```ts
|
|
451
448
|
* const index = dataTable.indexOf('id', 12345);
|
|
452
449
|
* if (index >= 0) {
|
|
453
|
-
* dataTable.updateRow({description: "Updated description"}
|
|
450
|
+
* dataTable.updateRow(index, {description: "Updated description"});
|
|
454
451
|
* }
|
|
455
452
|
* ```
|
|
456
453
|
*/
|
|
457
|
-
updateRow(
|
|
454
|
+
updateRow(index: number, data: any): void;
|
|
458
455
|
/**
|
|
459
456
|
* Deletes a row at a specific original index from the table.
|
|
460
457
|
* @param index - The original index of the row to delete.
|
|
@@ -475,7 +472,7 @@ declare class DataTable extends EventTarget {
|
|
|
475
472
|
*/
|
|
476
473
|
interface DataTableEventMap {
|
|
477
474
|
'dt.row.clicked': {
|
|
478
|
-
row:
|
|
475
|
+
row: any;
|
|
479
476
|
index: number;
|
|
480
477
|
column: string | undefined;
|
|
481
478
|
originalEvent: MouseEvent;
|
|
@@ -528,4 +525,4 @@ declare class LocalStorageAdapter {
|
|
|
528
525
|
clearState(): void;
|
|
529
526
|
}
|
|
530
527
|
|
|
531
|
-
export { type CellFormatterCallback, type ColumnFilterCallback, type ColumnOptions, type ColumnState, type ComparatorCallback, DataTable, type DataTableEventMap, type FilterCallback, type
|
|
528
|
+
export { type CellFormatterCallback, type ColumnFilterCallback, type ColumnOptions, type ColumnState, type ComparatorCallback, DataTable, type DataTableEventMap, type FilterCallback, type LoadOptions, LocalStorageAdapter, type RowFormatterCallback, type SortOrder, type SortValueCallback, type TableClasses, type TableOptions, type TokenizerCallback, type ValueFormatterCallback };
|
package/dist/datatable.d.ts
CHANGED
|
@@ -2,35 +2,26 @@
|
|
|
2
2
|
* Defines the possible sorting orders for columns.
|
|
3
3
|
*/
|
|
4
4
|
type SortOrder = 'asc' | 'desc' | null;
|
|
5
|
-
/**
|
|
6
|
-
* Represents a generic data row in the table, an object with string keys and any values.
|
|
7
|
-
*/
|
|
8
|
-
type Row = Record<string, any>;
|
|
9
|
-
/**
|
|
10
|
-
* Represents filter data where the key should be a field in the Row data and the value
|
|
11
|
-
* should be comparable to the value of that field, or an array of values.
|
|
12
|
-
*/
|
|
13
|
-
type Filters = Record<string, any>;
|
|
14
5
|
/**
|
|
15
6
|
* Callback for formatting a row's HTML element.
|
|
16
7
|
* @param row - The row data.
|
|
17
8
|
* @param element - The row element.
|
|
18
9
|
*/
|
|
19
|
-
type RowFormatterCallback = (row:
|
|
10
|
+
type RowFormatterCallback = (row: any, element: HTMLElement) => void;
|
|
20
11
|
/**
|
|
21
12
|
* Callback for formatting the value of a cell.
|
|
22
13
|
* Called when the cell is created and when exporting to CSV.
|
|
23
14
|
* @param value - The value of the cell.
|
|
24
15
|
* @param row - The row data.
|
|
25
16
|
*/
|
|
26
|
-
type ValueFormatterCallback = (value: any, row:
|
|
17
|
+
type ValueFormatterCallback = (value: any, row: any) => string;
|
|
27
18
|
/**
|
|
28
19
|
* Callback for formatting a cell's HTML element.
|
|
29
20
|
* @param value - The value of the field.
|
|
30
21
|
* @param row - The row data.
|
|
31
22
|
* @param element - The cell element.
|
|
32
23
|
*/
|
|
33
|
-
type CellFormatterCallback = (value: any, row:
|
|
24
|
+
type CellFormatterCallback = (value: any, row: any, element: HTMLElement) => void;
|
|
34
25
|
/**
|
|
35
26
|
* Callback for comparing two values.
|
|
36
27
|
* @param a - The first value.
|
|
@@ -57,7 +48,7 @@ type TokenizerCallback = (value: any) => string[];
|
|
|
57
48
|
* @param index - The index of the row.
|
|
58
49
|
* @returns True if the row matches the filter, false otherwise.
|
|
59
50
|
*/
|
|
60
|
-
type FilterCallback = (row:
|
|
51
|
+
type FilterCallback = (row: any, index: number) => boolean;
|
|
61
52
|
/**
|
|
62
53
|
* Callback for filtering a field value against the filter data.
|
|
63
54
|
* @param value - The value to filter.
|
|
@@ -214,7 +205,7 @@ interface TableOptions {
|
|
|
214
205
|
/**
|
|
215
206
|
* The initial data to load into the table.
|
|
216
207
|
*/
|
|
217
|
-
data?:
|
|
208
|
+
data?: any[];
|
|
218
209
|
/**
|
|
219
210
|
* Configures virtual scrolling.
|
|
220
211
|
*/
|
|
@@ -238,6 +229,11 @@ interface TableOptions {
|
|
|
238
229
|
* Can be overridden on individual columns.
|
|
239
230
|
*/
|
|
240
231
|
tokenize?: boolean;
|
|
232
|
+
/**
|
|
233
|
+
* Whether search results should be scored or not.
|
|
234
|
+
* Scoring is very computationally expensive...
|
|
235
|
+
*/
|
|
236
|
+
scoring?: boolean;
|
|
241
237
|
/**
|
|
242
238
|
* Whether columns should be resizable by default.
|
|
243
239
|
* Can be overridden on individual columns.
|
|
@@ -325,11 +321,11 @@ declare class DataTable extends EventTarget {
|
|
|
325
321
|
/**
|
|
326
322
|
* Gets the currently filtered and sorted rows displayed in the table.
|
|
327
323
|
*/
|
|
328
|
-
get rows():
|
|
324
|
+
get rows(): any[];
|
|
329
325
|
/**
|
|
330
326
|
* Gets the underlying data
|
|
331
327
|
*/
|
|
332
|
-
get data():
|
|
328
|
+
get data(): any[];
|
|
333
329
|
/**
|
|
334
330
|
* Gets the total number of currently filtered and sorted rows.
|
|
335
331
|
*/
|
|
@@ -346,13 +342,14 @@ declare class DataTable extends EventTarget {
|
|
|
346
342
|
*/
|
|
347
343
|
get virtualScroll(): boolean;
|
|
348
344
|
set virtualScroll(value: boolean);
|
|
345
|
+
get scoring(): boolean;
|
|
346
|
+
set scoring(value: boolean);
|
|
349
347
|
/**
|
|
350
|
-
* Loads data into the table
|
|
351
|
-
* @param rows - An array of
|
|
352
|
-
* @param
|
|
353
|
-
* @throws {TypeError} If `rows` is not an array.
|
|
348
|
+
* Loads data into the table
|
|
349
|
+
* @param rows - An array of data to be loaded
|
|
350
|
+
* @param options - Configuration for the load operation
|
|
354
351
|
*/
|
|
355
|
-
loadData(rows:
|
|
352
|
+
loadData(rows: any[], options?: LoadOptions): void;
|
|
356
353
|
/**
|
|
357
354
|
* Displays a message in the table body, typically used for "no data" or "no results" states.
|
|
358
355
|
* The message is shown in a single row spanning all columns.
|
|
@@ -377,7 +374,7 @@ declare class DataTable extends EventTarget {
|
|
|
377
374
|
* @param filters - An object defining field-based filters or a custom filter callback function.
|
|
378
375
|
* @throws {TypeError} If `filters` is not an object or a function.
|
|
379
376
|
*/
|
|
380
|
-
filter(filters?:
|
|
377
|
+
filter(filters?: any | FilterCallback): void;
|
|
381
378
|
/**
|
|
382
379
|
* Sorts the table by a specified column and order.
|
|
383
380
|
* If `order` is `null`, the sort on this column is removed.
|
|
@@ -407,7 +404,7 @@ declare class DataTable extends EventTarget {
|
|
|
407
404
|
* @param all - If `true`, exports all original data (ignoring filters). If `false` (default), exports only the currently visible (filtered and sorted) rows.
|
|
408
405
|
*/
|
|
409
406
|
export(filename: string, all?: boolean): void;
|
|
410
|
-
scrollToRow(row:
|
|
407
|
+
scrollToRow(row: any): void;
|
|
411
408
|
/**
|
|
412
409
|
* Scrolls the table to bring the row at the specified original index into view.
|
|
413
410
|
* @param index - The original index of the row (from the initial dataset).
|
|
@@ -443,18 +440,18 @@ declare class DataTable extends EventTarget {
|
|
|
443
440
|
indexOf(field: string, value: any): number;
|
|
444
441
|
/**
|
|
445
442
|
* Updates the data of a row at a specific original index.
|
|
446
|
-
* @param data - An object containing the new data to assign to the row. Existing fields will be updated, and new fields will be added.
|
|
447
443
|
* @param index - The original index of the row to update.
|
|
444
|
+
* @param data - An object containing the new data to assign to the row. Existing fields will be updated, and new fields will be added.
|
|
448
445
|
*
|
|
449
446
|
* @example
|
|
450
447
|
* ```ts
|
|
451
448
|
* const index = dataTable.indexOf('id', 12345);
|
|
452
449
|
* if (index >= 0) {
|
|
453
|
-
* dataTable.updateRow({description: "Updated description"}
|
|
450
|
+
* dataTable.updateRow(index, {description: "Updated description"});
|
|
454
451
|
* }
|
|
455
452
|
* ```
|
|
456
453
|
*/
|
|
457
|
-
updateRow(
|
|
454
|
+
updateRow(index: number, data: any): void;
|
|
458
455
|
/**
|
|
459
456
|
* Deletes a row at a specific original index from the table.
|
|
460
457
|
* @param index - The original index of the row to delete.
|
|
@@ -475,7 +472,7 @@ declare class DataTable extends EventTarget {
|
|
|
475
472
|
*/
|
|
476
473
|
interface DataTableEventMap {
|
|
477
474
|
'dt.row.clicked': {
|
|
478
|
-
row:
|
|
475
|
+
row: any;
|
|
479
476
|
index: number;
|
|
480
477
|
column: string | undefined;
|
|
481
478
|
originalEvent: MouseEvent;
|
|
@@ -528,4 +525,4 @@ declare class LocalStorageAdapter {
|
|
|
528
525
|
clearState(): void;
|
|
529
526
|
}
|
|
530
527
|
|
|
531
|
-
export { type CellFormatterCallback, type ColumnFilterCallback, type ColumnOptions, type ColumnState, type ComparatorCallback, DataTable, type DataTableEventMap, type FilterCallback, type
|
|
528
|
+
export { type CellFormatterCallback, type ColumnFilterCallback, type ColumnOptions, type ColumnState, type ComparatorCallback, DataTable, type DataTableEventMap, type FilterCallback, type LoadOptions, LocalStorageAdapter, type RowFormatterCallback, type SortOrder, type SortValueCallback, type TableClasses, type TableOptions, type TokenizerCallback, type ValueFormatterCallback };
|