@timlassiter11/yatl 1.0.2 → 1.0.3
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/README.md +54 -48
- package/dist/index.d.mts +84 -29
- package/dist/index.d.ts +84 -29
- package/dist/index.js +58 -47
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +58 -47
- package/dist/index.mjs.map +1 -1
- package/dist/yatl.min.global.js +18 -17
- package/dist/yatl.min.global.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
# YATL
|
|
1
|
+
# YATL (Yet Another Table Library)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@timlassiter11/yatl)
|
|
4
|
+
[](https://timlassiter11.github.io/YATL/docs/index.html)
|
|
5
|
+
[](https://timlassiter11.github.io/YATL/examples/advanced.html)
|
|
6
|
+
[](LICENSE)
|
|
4
7
|
|
|
5
8
|
YATL is a powerful, feature-rich, and lightweight Web Component data table built with Lit. It handles large datasets with ease using virtual scrolling, offers advanced fuzzy search capabilities, supports state persistence, and works in any framework (React, Vue, Angular, or Vanilla JS).
|
|
6
9
|
|
|
@@ -62,11 +65,14 @@ class MyComponent extends LitElement {
|
|
|
62
65
|
];
|
|
63
66
|
|
|
64
67
|
protected override render() {
|
|
65
|
-
return html
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
return html`
|
|
69
|
+
<yatl-table
|
|
70
|
+
.columns=${this._columns}
|
|
71
|
+
.data=${this._tableData}
|
|
72
|
+
enable-virtual-scroll
|
|
73
|
+
@yatl-row-click=${this.handleRowClicked}>
|
|
74
|
+
</yatl-table>
|
|
75
|
+
`;
|
|
70
76
|
}
|
|
71
77
|
|
|
72
78
|
private handleRowClicked = (event) => {
|
|
@@ -75,11 +81,9 @@ class MyComponent extends LitElement {
|
|
|
75
81
|
}
|
|
76
82
|
```
|
|
77
83
|
|
|
78
|
-
###
|
|
79
|
-
|
|
80
|
-
```ts
|
|
81
|
-
import '@timlassiter11/yatl';
|
|
84
|
+
### js
|
|
82
85
|
|
|
86
|
+
```js
|
|
83
87
|
const table = document.querySelector('yatl-table');
|
|
84
88
|
|
|
85
89
|
table.columns = [
|
|
@@ -104,42 +108,52 @@ table.data = [
|
|
|
104
108
|
### Vanilla JS
|
|
105
109
|
|
|
106
110
|
```html
|
|
107
|
-
<!
|
|
111
|
+
<!doctype html>
|
|
108
112
|
<html lang="en">
|
|
109
113
|
<head>
|
|
110
|
-
<meta charset="
|
|
111
|
-
<title>
|
|
112
|
-
<script src="yatl.min.global.js"></script>
|
|
113
|
-
|
|
114
|
+
<meta charset="utf-8" />
|
|
115
|
+
<title>Basic Example</title>
|
|
114
116
|
<style>
|
|
115
|
-
|
|
116
|
-
height:
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
body {
|
|
118
|
+
height: 100vh;
|
|
119
|
+
width: 100vw;
|
|
120
|
+
margin: 0;
|
|
121
|
+
padding: 20px;
|
|
122
|
+
box-sizing: border-box;
|
|
119
123
|
}
|
|
120
124
|
</style>
|
|
121
125
|
</head>
|
|
122
|
-
<body>
|
|
123
|
-
<yatl-table id="my-table" enable-footer enable-column-reorder></yatl-table>
|
|
124
126
|
|
|
127
|
+
<body>
|
|
128
|
+
<yatl-table sortable resizable enable-footer></yatl-table>
|
|
129
|
+
<script src="../dist/yatl.min.global.js"></script>
|
|
125
130
|
<script>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
131
|
+
window.addEventListener('load', () => {
|
|
132
|
+
const table = document.querySelector('yatl-table');
|
|
133
|
+
table.columns = [
|
|
134
|
+
{
|
|
135
|
+
field: 'index',
|
|
136
|
+
title: 'ID',
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
field: 'name',
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
field: 'value',
|
|
143
|
+
},
|
|
144
|
+
];
|
|
145
|
+
|
|
146
|
+
// Generate random rows of data
|
|
147
|
+
table.data = new Array(100).fill(null).map((v, i) => ({
|
|
148
|
+
index: i,
|
|
149
|
+
name: `Row ${i}`,
|
|
150
|
+
value: Math.random() * 1000,
|
|
151
|
+
}));
|
|
152
|
+
|
|
153
|
+
table.addEventListener('yatl-row-click', event => {
|
|
154
|
+
console.log(event.detail);
|
|
155
|
+
});
|
|
156
|
+
});
|
|
143
157
|
</script>
|
|
144
158
|
</body>
|
|
145
159
|
</html>
|
|
@@ -286,12 +300,4 @@ Most of the time this isn't ideal though and instead we'd like to let the layout
|
|
|
286
300
|
<div>... Some boring footer info or something</div>
|
|
287
301
|
</div>
|
|
288
302
|
</body>
|
|
289
|
-
```
|
|
290
|
-
|
|
291
|
-
### Docs
|
|
292
|
-
|
|
293
|
-
Full API docs can be found [here](https://timlassiter11.github.io/YATL/docs/index.html).
|
|
294
|
-
|
|
295
|
-
# Examples
|
|
296
|
-
|
|
297
|
-
Examples can be found in the examples directoy and are also hosted [here](https://timlassiter11.github.io/YATL/examples/index.html) to view live.
|
|
303
|
+
```
|
package/dist/index.d.mts
CHANGED
|
@@ -17,6 +17,10 @@ declare function findColumn<T extends {
|
|
|
17
17
|
field: string;
|
|
18
18
|
}>(field: string, columns: T[]): T | undefined;
|
|
19
19
|
|
|
20
|
+
/**
|
|
21
|
+
* Default type for the table.
|
|
22
|
+
*/
|
|
23
|
+
type UnspecifiedRecord = Record<string, any>;
|
|
20
24
|
/**
|
|
21
25
|
* Defines the possible sorting orders for columns.
|
|
22
26
|
*/
|
|
@@ -122,22 +126,20 @@ interface SortState {
|
|
|
122
126
|
*/
|
|
123
127
|
priority: number;
|
|
124
128
|
}
|
|
129
|
+
type ColumnRole = 'display' | 'internal';
|
|
125
130
|
/**
|
|
126
|
-
*
|
|
131
|
+
* Shared options between both internal and displayed columns.
|
|
127
132
|
*/
|
|
128
|
-
interface
|
|
133
|
+
interface BaseColumnOptions<T> {
|
|
129
134
|
/**
|
|
130
135
|
* The field name in the data object.
|
|
131
136
|
*/
|
|
132
137
|
field: NestedKeyOf<T>;
|
|
133
138
|
/**
|
|
134
|
-
*
|
|
139
|
+
* Determines if a column is intended to be displayed,
|
|
140
|
+
* or just for searching and filtering.
|
|
135
141
|
*/
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* Whether the column is sortable.
|
|
139
|
-
*/
|
|
140
|
-
sortable?: boolean;
|
|
142
|
+
role?: ColumnRole;
|
|
141
143
|
/**
|
|
142
144
|
* Whether the column is searchable.
|
|
143
145
|
*/
|
|
@@ -146,15 +148,38 @@ interface ColumnOptions<T> {
|
|
|
146
148
|
* Whether the column's data should be tokenized for searching.
|
|
147
149
|
*/
|
|
148
150
|
tokenize?: boolean;
|
|
149
|
-
/**
|
|
150
|
-
* Whether the column should be resizable.
|
|
151
|
-
*/
|
|
152
|
-
resizable?: boolean;
|
|
153
151
|
/**
|
|
154
152
|
* A function for tokenizing this column's data.
|
|
155
153
|
* Fallback to the main table tokenizer if not provided.
|
|
156
154
|
*/
|
|
157
155
|
searchTokenizer?: TokenizerCallback;
|
|
156
|
+
/**
|
|
157
|
+
* A custom function to determine if a cell's value in this column matches a given filter criterion.
|
|
158
|
+
* This is used when `DataTable.filter()` is called with an object-based filter that targets this column's field.
|
|
159
|
+
*/
|
|
160
|
+
filter?: ColumnFilterCallback;
|
|
161
|
+
}
|
|
162
|
+
/**
|
|
163
|
+
* Column options for the table.
|
|
164
|
+
*/
|
|
165
|
+
interface DisplayColumnOptions<T> extends BaseColumnOptions<T> {
|
|
166
|
+
/**
|
|
167
|
+
* Determines if a column is intended to be displayed,
|
|
168
|
+
* or just for searching and filtering.
|
|
169
|
+
*/
|
|
170
|
+
role?: 'display';
|
|
171
|
+
/**
|
|
172
|
+
* The title to display in the header.
|
|
173
|
+
*/
|
|
174
|
+
title?: string;
|
|
175
|
+
/**
|
|
176
|
+
* Whether the column is sortable.
|
|
177
|
+
*/
|
|
178
|
+
sortable?: boolean;
|
|
179
|
+
/**
|
|
180
|
+
* Whether the column should be resizable.
|
|
181
|
+
*/
|
|
182
|
+
resizable?: boolean;
|
|
158
183
|
/**
|
|
159
184
|
* A function to format the value for display.
|
|
160
185
|
*/
|
|
@@ -178,12 +203,18 @@ interface ColumnOptions<T> {
|
|
|
178
203
|
* This can be used to preprocess and cache values (e.g., convert to lowercase, extract numbers) before comparison.
|
|
179
204
|
*/
|
|
180
205
|
sortValue?: SortValueCallback;
|
|
206
|
+
}
|
|
207
|
+
/**
|
|
208
|
+
* Internal column definition used for searching and filtering
|
|
209
|
+
*/
|
|
210
|
+
interface InternalColumnOptions<T> extends BaseColumnOptions<T> {
|
|
181
211
|
/**
|
|
182
|
-
*
|
|
183
|
-
*
|
|
212
|
+
* Marks this column as internal-only.
|
|
213
|
+
* It will be indexed for search and filtering, but strictly excluded from the UI.
|
|
184
214
|
*/
|
|
185
|
-
|
|
215
|
+
display: 'internal';
|
|
186
216
|
}
|
|
217
|
+
type ColumnOptions<T> = DisplayColumnOptions<T> | InternalColumnOptions<T>;
|
|
187
218
|
/**
|
|
188
219
|
* Represents the current state of a column.
|
|
189
220
|
*/
|
|
@@ -319,7 +350,7 @@ declare class YatlStateChangeEvent<T> extends YatlEvent<{
|
|
|
319
350
|
* Represents a dynamic and interactive table with features like sorting, searching, filtering,
|
|
320
351
|
* column resizing, column rearranging, and virtual scrolling.
|
|
321
352
|
*/
|
|
322
|
-
declare class YatlTable<T extends object> extends LitElement {
|
|
353
|
+
declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement {
|
|
323
354
|
static styles: lit.CSSResult[];
|
|
324
355
|
private tableElement;
|
|
325
356
|
private virtualizer?;
|
|
@@ -331,7 +362,6 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
331
362
|
private _storageOptions;
|
|
332
363
|
private _data;
|
|
333
364
|
private _searchQuery;
|
|
334
|
-
private _searchIncludedFields;
|
|
335
365
|
private _searchTokenizer;
|
|
336
366
|
private _filters;
|
|
337
367
|
private _filteredData;
|
|
@@ -344,6 +374,20 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
344
374
|
private queryTokens;
|
|
345
375
|
private resizeState;
|
|
346
376
|
private dragColumn;
|
|
377
|
+
/**
|
|
378
|
+
* Default sortability for all columns.
|
|
379
|
+
* Can be overridden by setting `sortable` on the specific column definition.
|
|
380
|
+
* * **NOTE:** Changing this will not clear sorted column states.
|
|
381
|
+
* @default false
|
|
382
|
+
*/
|
|
383
|
+
sortable: boolean;
|
|
384
|
+
/**
|
|
385
|
+
* Default resizability for all columns.
|
|
386
|
+
* Can be overridden by setting `resizable` on the specific column definition.
|
|
387
|
+
* * **NOTE:** Changing this will not clear current column widths.
|
|
388
|
+
* @default false
|
|
389
|
+
*/
|
|
390
|
+
resizable: boolean;
|
|
347
391
|
/**
|
|
348
392
|
* Enables virtual scrolling for the table.
|
|
349
393
|
* When enabled, only the visible rows are rendered to the DOM, significantly improving
|
|
@@ -408,8 +452,16 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
408
452
|
*/
|
|
409
453
|
get columns(): ColumnOptions<T>[];
|
|
410
454
|
set columns(columns: ColumnOptions<T>[]);
|
|
455
|
+
/**
|
|
456
|
+
* The current order of the columns.
|
|
457
|
+
* * **NOTE:** This includes hidden columns but not internal columns
|
|
458
|
+
*/
|
|
411
459
|
get columnOrder(): NestedKeyOf<T>[];
|
|
412
460
|
set columnOrder(columns: NestedKeyOf<T>[]);
|
|
461
|
+
/**
|
|
462
|
+
* The current visibility state of all columns.
|
|
463
|
+
* **This will always be ordered by {@link YatlTable.columnOrder}**
|
|
464
|
+
*/
|
|
413
465
|
get columnVisibility(): {
|
|
414
466
|
field: NestedKeyOf<T>;
|
|
415
467
|
visible: boolean;
|
|
@@ -418,6 +470,10 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
418
470
|
field: NestedKeyOf<T>;
|
|
419
471
|
visible: boolean;
|
|
420
472
|
}[]);
|
|
473
|
+
/**
|
|
474
|
+
* The current sort state of all columns.
|
|
475
|
+
* **This will always be orderd by {@link YatlTable.columnOrder}**
|
|
476
|
+
*/
|
|
421
477
|
get columnSort(): {
|
|
422
478
|
field: NestedKeyOf<T>;
|
|
423
479
|
sort: SortState | null;
|
|
@@ -426,6 +482,10 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
426
482
|
field: NestedKeyOf<T>;
|
|
427
483
|
sort: SortState | null;
|
|
428
484
|
}[]);
|
|
485
|
+
/**
|
|
486
|
+
* The current width of all columns.
|
|
487
|
+
* **This will always be ordered by {@link YatlTable.columnOrder}**
|
|
488
|
+
*/
|
|
429
489
|
get columnWidths(): {
|
|
430
490
|
field: NestedKeyOf<T>;
|
|
431
491
|
width: number | null;
|
|
@@ -440,12 +500,6 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
440
500
|
*/
|
|
441
501
|
get searchQuery(): string;
|
|
442
502
|
set searchQuery(query: string);
|
|
443
|
-
/**
|
|
444
|
-
* A list of extra data fields to include in the search index, even if they are not
|
|
445
|
-
* displayed as visible columns. Useful for searching by ID, hidden keywords, or tags.
|
|
446
|
-
*/
|
|
447
|
-
get searchIncludedFields(): NestedKeyOf<T>[];
|
|
448
|
-
set searchIncludedFields(fields: NestedKeyOf<T>[]);
|
|
449
503
|
/**
|
|
450
504
|
* A function that splits the search query into tokens.
|
|
451
505
|
* Only used if `enableSearchTokenization` is true.
|
|
@@ -580,11 +634,11 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
580
634
|
* @param index - The original index of the row to delete.
|
|
581
635
|
*/
|
|
582
636
|
deleteRow(index: number): void;
|
|
583
|
-
protected renderColumnSortIcon(column:
|
|
584
|
-
protected renderColumnResizer(column:
|
|
637
|
+
protected renderColumnSortIcon(column: DisplayColumnOptions<T>, state: ColumnState<T>): TemplateResult<1> | typeof nothing;
|
|
638
|
+
protected renderColumnResizer(column: DisplayColumnOptions<T>, _state: ColumnState<T>): TemplateResult<1> | typeof nothing;
|
|
585
639
|
protected renderHeaderCell(field: NestedKeyOf<T>): TemplateResult<1> | typeof nothing;
|
|
586
640
|
protected renderHeader(): TemplateResult<1>;
|
|
587
|
-
protected renderCellContents(value: unknown, column:
|
|
641
|
+
protected renderCellContents(value: unknown, column: DisplayColumnOptions<T>, row: T): unknown;
|
|
588
642
|
protected renderCell(field: NestedKeyOf<T>, row: T): TemplateResult<1> | typeof nothing;
|
|
589
643
|
protected renderRow(row: T, index: number): TemplateResult<1>;
|
|
590
644
|
protected renderBody(): TemplateResult<1>;
|
|
@@ -616,7 +670,8 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
616
670
|
private sortRows;
|
|
617
671
|
private createMetadata;
|
|
618
672
|
private updateInternalQuery;
|
|
619
|
-
private
|
|
673
|
+
private getColumns;
|
|
674
|
+
private getColumnData;
|
|
620
675
|
/**
|
|
621
676
|
* Gets the width of each column in the
|
|
622
677
|
* order they will appear in the grid.
|
|
@@ -657,8 +712,8 @@ interface EventMap<T> {
|
|
|
657
712
|
}
|
|
658
713
|
declare global {
|
|
659
714
|
interface HTMLElementTagNameMap {
|
|
660
|
-
'yatl-table': YatlTable
|
|
715
|
+
'yatl-table': YatlTable;
|
|
661
716
|
}
|
|
662
717
|
}
|
|
663
718
|
|
|
664
|
-
export { type CellPartsCallback, type CellRenderCallback, type ColumnFilterCallback, type ColumnInitOptions, type ColumnOptions, type ColumnState, type ComparatorCallback, type Compareable, type FilterCallback, type Filters, type NestedKeyOf, type QueryToken, type RestorableColumnState, type RestorableTableState, type RowPartsCallback, type SortOrder, type SortState, type SortValueCallback, type StorageOptions, type TableState, type TokenizerCallback, type ValueFormatterCallback, YatlChangeEvent, YatlColumnReorderEvent, YatlColumnResizeEvent, YatlColumnToggleEvent, YatlEvent, YatlRowClickEvent, YatlSearchEvent, YatlSortEvent, YatlStateChangeEvent, YatlTable, createRegexTokenizer, findColumn, whitespaceTokenizer };
|
|
719
|
+
export { type BaseColumnOptions, type CellPartsCallback, type CellRenderCallback, type ColumnFilterCallback, type ColumnInitOptions, type ColumnOptions, type ColumnRole, type ColumnState, type ComparatorCallback, type Compareable, type DisplayColumnOptions, type FilterCallback, type Filters, type InternalColumnOptions, type NestedKeyOf, type QueryToken, type RestorableColumnState, type RestorableTableState, type RowPartsCallback, type SortOrder, type SortState, type SortValueCallback, type StorageOptions, type TableState, type TokenizerCallback, type UnspecifiedRecord, type ValueFormatterCallback, YatlChangeEvent, YatlColumnReorderEvent, YatlColumnResizeEvent, YatlColumnToggleEvent, YatlEvent, YatlRowClickEvent, YatlSearchEvent, YatlSortEvent, YatlStateChangeEvent, YatlTable, createRegexTokenizer, findColumn, whitespaceTokenizer };
|
package/dist/index.d.ts
CHANGED
|
@@ -17,6 +17,10 @@ declare function findColumn<T extends {
|
|
|
17
17
|
field: string;
|
|
18
18
|
}>(field: string, columns: T[]): T | undefined;
|
|
19
19
|
|
|
20
|
+
/**
|
|
21
|
+
* Default type for the table.
|
|
22
|
+
*/
|
|
23
|
+
type UnspecifiedRecord = Record<string, any>;
|
|
20
24
|
/**
|
|
21
25
|
* Defines the possible sorting orders for columns.
|
|
22
26
|
*/
|
|
@@ -122,22 +126,20 @@ interface SortState {
|
|
|
122
126
|
*/
|
|
123
127
|
priority: number;
|
|
124
128
|
}
|
|
129
|
+
type ColumnRole = 'display' | 'internal';
|
|
125
130
|
/**
|
|
126
|
-
*
|
|
131
|
+
* Shared options between both internal and displayed columns.
|
|
127
132
|
*/
|
|
128
|
-
interface
|
|
133
|
+
interface BaseColumnOptions<T> {
|
|
129
134
|
/**
|
|
130
135
|
* The field name in the data object.
|
|
131
136
|
*/
|
|
132
137
|
field: NestedKeyOf<T>;
|
|
133
138
|
/**
|
|
134
|
-
*
|
|
139
|
+
* Determines if a column is intended to be displayed,
|
|
140
|
+
* or just for searching and filtering.
|
|
135
141
|
*/
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* Whether the column is sortable.
|
|
139
|
-
*/
|
|
140
|
-
sortable?: boolean;
|
|
142
|
+
role?: ColumnRole;
|
|
141
143
|
/**
|
|
142
144
|
* Whether the column is searchable.
|
|
143
145
|
*/
|
|
@@ -146,15 +148,38 @@ interface ColumnOptions<T> {
|
|
|
146
148
|
* Whether the column's data should be tokenized for searching.
|
|
147
149
|
*/
|
|
148
150
|
tokenize?: boolean;
|
|
149
|
-
/**
|
|
150
|
-
* Whether the column should be resizable.
|
|
151
|
-
*/
|
|
152
|
-
resizable?: boolean;
|
|
153
151
|
/**
|
|
154
152
|
* A function for tokenizing this column's data.
|
|
155
153
|
* Fallback to the main table tokenizer if not provided.
|
|
156
154
|
*/
|
|
157
155
|
searchTokenizer?: TokenizerCallback;
|
|
156
|
+
/**
|
|
157
|
+
* A custom function to determine if a cell's value in this column matches a given filter criterion.
|
|
158
|
+
* This is used when `DataTable.filter()` is called with an object-based filter that targets this column's field.
|
|
159
|
+
*/
|
|
160
|
+
filter?: ColumnFilterCallback;
|
|
161
|
+
}
|
|
162
|
+
/**
|
|
163
|
+
* Column options for the table.
|
|
164
|
+
*/
|
|
165
|
+
interface DisplayColumnOptions<T> extends BaseColumnOptions<T> {
|
|
166
|
+
/**
|
|
167
|
+
* Determines if a column is intended to be displayed,
|
|
168
|
+
* or just for searching and filtering.
|
|
169
|
+
*/
|
|
170
|
+
role?: 'display';
|
|
171
|
+
/**
|
|
172
|
+
* The title to display in the header.
|
|
173
|
+
*/
|
|
174
|
+
title?: string;
|
|
175
|
+
/**
|
|
176
|
+
* Whether the column is sortable.
|
|
177
|
+
*/
|
|
178
|
+
sortable?: boolean;
|
|
179
|
+
/**
|
|
180
|
+
* Whether the column should be resizable.
|
|
181
|
+
*/
|
|
182
|
+
resizable?: boolean;
|
|
158
183
|
/**
|
|
159
184
|
* A function to format the value for display.
|
|
160
185
|
*/
|
|
@@ -178,12 +203,18 @@ interface ColumnOptions<T> {
|
|
|
178
203
|
* This can be used to preprocess and cache values (e.g., convert to lowercase, extract numbers) before comparison.
|
|
179
204
|
*/
|
|
180
205
|
sortValue?: SortValueCallback;
|
|
206
|
+
}
|
|
207
|
+
/**
|
|
208
|
+
* Internal column definition used for searching and filtering
|
|
209
|
+
*/
|
|
210
|
+
interface InternalColumnOptions<T> extends BaseColumnOptions<T> {
|
|
181
211
|
/**
|
|
182
|
-
*
|
|
183
|
-
*
|
|
212
|
+
* Marks this column as internal-only.
|
|
213
|
+
* It will be indexed for search and filtering, but strictly excluded from the UI.
|
|
184
214
|
*/
|
|
185
|
-
|
|
215
|
+
display: 'internal';
|
|
186
216
|
}
|
|
217
|
+
type ColumnOptions<T> = DisplayColumnOptions<T> | InternalColumnOptions<T>;
|
|
187
218
|
/**
|
|
188
219
|
* Represents the current state of a column.
|
|
189
220
|
*/
|
|
@@ -319,7 +350,7 @@ declare class YatlStateChangeEvent<T> extends YatlEvent<{
|
|
|
319
350
|
* Represents a dynamic and interactive table with features like sorting, searching, filtering,
|
|
320
351
|
* column resizing, column rearranging, and virtual scrolling.
|
|
321
352
|
*/
|
|
322
|
-
declare class YatlTable<T extends object> extends LitElement {
|
|
353
|
+
declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement {
|
|
323
354
|
static styles: lit.CSSResult[];
|
|
324
355
|
private tableElement;
|
|
325
356
|
private virtualizer?;
|
|
@@ -331,7 +362,6 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
331
362
|
private _storageOptions;
|
|
332
363
|
private _data;
|
|
333
364
|
private _searchQuery;
|
|
334
|
-
private _searchIncludedFields;
|
|
335
365
|
private _searchTokenizer;
|
|
336
366
|
private _filters;
|
|
337
367
|
private _filteredData;
|
|
@@ -344,6 +374,20 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
344
374
|
private queryTokens;
|
|
345
375
|
private resizeState;
|
|
346
376
|
private dragColumn;
|
|
377
|
+
/**
|
|
378
|
+
* Default sortability for all columns.
|
|
379
|
+
* Can be overridden by setting `sortable` on the specific column definition.
|
|
380
|
+
* * **NOTE:** Changing this will not clear sorted column states.
|
|
381
|
+
* @default false
|
|
382
|
+
*/
|
|
383
|
+
sortable: boolean;
|
|
384
|
+
/**
|
|
385
|
+
* Default resizability for all columns.
|
|
386
|
+
* Can be overridden by setting `resizable` on the specific column definition.
|
|
387
|
+
* * **NOTE:** Changing this will not clear current column widths.
|
|
388
|
+
* @default false
|
|
389
|
+
*/
|
|
390
|
+
resizable: boolean;
|
|
347
391
|
/**
|
|
348
392
|
* Enables virtual scrolling for the table.
|
|
349
393
|
* When enabled, only the visible rows are rendered to the DOM, significantly improving
|
|
@@ -408,8 +452,16 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
408
452
|
*/
|
|
409
453
|
get columns(): ColumnOptions<T>[];
|
|
410
454
|
set columns(columns: ColumnOptions<T>[]);
|
|
455
|
+
/**
|
|
456
|
+
* The current order of the columns.
|
|
457
|
+
* * **NOTE:** This includes hidden columns but not internal columns
|
|
458
|
+
*/
|
|
411
459
|
get columnOrder(): NestedKeyOf<T>[];
|
|
412
460
|
set columnOrder(columns: NestedKeyOf<T>[]);
|
|
461
|
+
/**
|
|
462
|
+
* The current visibility state of all columns.
|
|
463
|
+
* **This will always be ordered by {@link YatlTable.columnOrder}**
|
|
464
|
+
*/
|
|
413
465
|
get columnVisibility(): {
|
|
414
466
|
field: NestedKeyOf<T>;
|
|
415
467
|
visible: boolean;
|
|
@@ -418,6 +470,10 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
418
470
|
field: NestedKeyOf<T>;
|
|
419
471
|
visible: boolean;
|
|
420
472
|
}[]);
|
|
473
|
+
/**
|
|
474
|
+
* The current sort state of all columns.
|
|
475
|
+
* **This will always be orderd by {@link YatlTable.columnOrder}**
|
|
476
|
+
*/
|
|
421
477
|
get columnSort(): {
|
|
422
478
|
field: NestedKeyOf<T>;
|
|
423
479
|
sort: SortState | null;
|
|
@@ -426,6 +482,10 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
426
482
|
field: NestedKeyOf<T>;
|
|
427
483
|
sort: SortState | null;
|
|
428
484
|
}[]);
|
|
485
|
+
/**
|
|
486
|
+
* The current width of all columns.
|
|
487
|
+
* **This will always be ordered by {@link YatlTable.columnOrder}**
|
|
488
|
+
*/
|
|
429
489
|
get columnWidths(): {
|
|
430
490
|
field: NestedKeyOf<T>;
|
|
431
491
|
width: number | null;
|
|
@@ -440,12 +500,6 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
440
500
|
*/
|
|
441
501
|
get searchQuery(): string;
|
|
442
502
|
set searchQuery(query: string);
|
|
443
|
-
/**
|
|
444
|
-
* A list of extra data fields to include in the search index, even if they are not
|
|
445
|
-
* displayed as visible columns. Useful for searching by ID, hidden keywords, or tags.
|
|
446
|
-
*/
|
|
447
|
-
get searchIncludedFields(): NestedKeyOf<T>[];
|
|
448
|
-
set searchIncludedFields(fields: NestedKeyOf<T>[]);
|
|
449
503
|
/**
|
|
450
504
|
* A function that splits the search query into tokens.
|
|
451
505
|
* Only used if `enableSearchTokenization` is true.
|
|
@@ -580,11 +634,11 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
580
634
|
* @param index - The original index of the row to delete.
|
|
581
635
|
*/
|
|
582
636
|
deleteRow(index: number): void;
|
|
583
|
-
protected renderColumnSortIcon(column:
|
|
584
|
-
protected renderColumnResizer(column:
|
|
637
|
+
protected renderColumnSortIcon(column: DisplayColumnOptions<T>, state: ColumnState<T>): TemplateResult<1> | typeof nothing;
|
|
638
|
+
protected renderColumnResizer(column: DisplayColumnOptions<T>, _state: ColumnState<T>): TemplateResult<1> | typeof nothing;
|
|
585
639
|
protected renderHeaderCell(field: NestedKeyOf<T>): TemplateResult<1> | typeof nothing;
|
|
586
640
|
protected renderHeader(): TemplateResult<1>;
|
|
587
|
-
protected renderCellContents(value: unknown, column:
|
|
641
|
+
protected renderCellContents(value: unknown, column: DisplayColumnOptions<T>, row: T): unknown;
|
|
588
642
|
protected renderCell(field: NestedKeyOf<T>, row: T): TemplateResult<1> | typeof nothing;
|
|
589
643
|
protected renderRow(row: T, index: number): TemplateResult<1>;
|
|
590
644
|
protected renderBody(): TemplateResult<1>;
|
|
@@ -616,7 +670,8 @@ declare class YatlTable<T extends object> extends LitElement {
|
|
|
616
670
|
private sortRows;
|
|
617
671
|
private createMetadata;
|
|
618
672
|
private updateInternalQuery;
|
|
619
|
-
private
|
|
673
|
+
private getColumns;
|
|
674
|
+
private getColumnData;
|
|
620
675
|
/**
|
|
621
676
|
* Gets the width of each column in the
|
|
622
677
|
* order they will appear in the grid.
|
|
@@ -657,8 +712,8 @@ interface EventMap<T> {
|
|
|
657
712
|
}
|
|
658
713
|
declare global {
|
|
659
714
|
interface HTMLElementTagNameMap {
|
|
660
|
-
'yatl-table': YatlTable
|
|
715
|
+
'yatl-table': YatlTable;
|
|
661
716
|
}
|
|
662
717
|
}
|
|
663
718
|
|
|
664
|
-
export { type CellPartsCallback, type CellRenderCallback, type ColumnFilterCallback, type ColumnInitOptions, type ColumnOptions, type ColumnState, type ComparatorCallback, type Compareable, type FilterCallback, type Filters, type NestedKeyOf, type QueryToken, type RestorableColumnState, type RestorableTableState, type RowPartsCallback, type SortOrder, type SortState, type SortValueCallback, type StorageOptions, type TableState, type TokenizerCallback, type ValueFormatterCallback, YatlChangeEvent, YatlColumnReorderEvent, YatlColumnResizeEvent, YatlColumnToggleEvent, YatlEvent, YatlRowClickEvent, YatlSearchEvent, YatlSortEvent, YatlStateChangeEvent, YatlTable, createRegexTokenizer, findColumn, whitespaceTokenizer };
|
|
719
|
+
export { type BaseColumnOptions, type CellPartsCallback, type CellRenderCallback, type ColumnFilterCallback, type ColumnInitOptions, type ColumnOptions, type ColumnRole, type ColumnState, type ComparatorCallback, type Compareable, type DisplayColumnOptions, type FilterCallback, type Filters, type InternalColumnOptions, type NestedKeyOf, type QueryToken, type RestorableColumnState, type RestorableTableState, type RowPartsCallback, type SortOrder, type SortState, type SortValueCallback, type StorageOptions, type TableState, type TokenizerCallback, type UnspecifiedRecord, type ValueFormatterCallback, YatlChangeEvent, YatlColumnReorderEvent, YatlColumnResizeEvent, YatlColumnToggleEvent, YatlEvent, YatlRowClickEvent, YatlSearchEvent, YatlSortEvent, YatlStateChangeEvent, YatlTable, createRegexTokenizer, findColumn, whitespaceTokenizer };
|