@timlassiter11/yatl 0.3.22 → 1.0.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.
@@ -1,626 +0,0 @@
1
- type NestedKeyOf<ObjectType> = ObjectType extends object ? {
2
- [Key in keyof ObjectType & (string | number)]: NonNullable<ObjectType[Key]> extends any[] ? `${Key}` : NonNullable<ObjectType[Key]> extends object ? // Recurse with the non-nullable type
3
- `${Key}` | `${Key}.${NestedKeyOf<NonNullable<ObjectType[Key]>>}` : `${Key}`;
4
- }[keyof ObjectType & (string | number)] : never;
5
- declare const createRegexTokenizer: (exp?: string) => (value: string) => {
6
- value: string;
7
- quoted: boolean;
8
- }[];
9
-
10
- interface VirtualScrollOptions {
11
- generator: (index: number) => HTMLElement;
12
- container: HTMLElement;
13
- element?: HTMLElement;
14
- nodePadding?: number;
15
- }
16
- interface IVirtualScroll {
17
- start(rowCount: number): void;
18
- stop(): void;
19
- scrollToIndex(index: number): void;
20
- scrollToPx(px: number): void;
21
- }
22
- interface IVirtualScrollConstructor {
23
- new (options: VirtualScrollOptions): IVirtualScroll;
24
- }
25
-
26
- /**
27
- * Defines options for loading data into the table
28
- * */
29
- interface LoadOptions {
30
- /** If the data should replace or be added to the end of the current data */
31
- append?: boolean;
32
- /** If the current scroll position should be kept */
33
- keepScroll?: boolean;
34
- }
35
- /**
36
- * Defines the possible sorting orders for columns.
37
- */
38
- type SortOrder = 'asc' | 'desc';
39
- /**
40
- * Callback for formatting a row's HTML element.
41
- * @param row - The row data.
42
- * @param element - The row element.
43
- */
44
- type RowFormatterCallback<T> = (row: T, element: HTMLElement) => void;
45
- /**
46
- * Callback for formatting the value of a cell.
47
- * Called when the cell is created and when exporting to CSV.
48
- * @param value - The value of the cell.
49
- * @param row - The row data.
50
- */
51
- type ValueFormatterCallback<T> = (value: any, row: T) => string | null;
52
- /**
53
- * Callback for formatting a cell's HTML element.
54
- * Called when the cell is created but NOT when exporting to CSV.
55
- * @param value - The value of the field.
56
- * @param row - The row data.
57
- * @param element - The cell element.
58
- */
59
- type CellFormatterCallback<T> = (value: any, row: T, element: HTMLElement) => void;
60
- /**
61
- * Callback for comparing two values.
62
- * @param a - The first value.
63
- * @param b - The second value.
64
- * @returns A negative number if a < b, a positive number if a > b, or 0 if they are equal.
65
- */
66
- type ComparatorCallback = (a: any, b: any) => number;
67
- /**
68
- * Callback for caching the sort value of a field
69
- * This function should derive a comparable value (often numerical or lowercase string) from the field's original value, to be used during sorting.
70
- * @param value - The value of the field.
71
- * @returns The derived value for sorting (e.g., a number or a standardized string).
72
- */
73
- type SortValueCallback = (value: any) => number | string;
74
- /**
75
- * A filter object containing keys for the fields to be filtered,
76
- * and the values used to compare against.
77
- */
78
- type Filters<T> = Partial<{
79
- [K in NestedKeyOf<T>]: any;
80
- }>;
81
- /**
82
- * A single query token derived from a larger string
83
- */
84
- interface QueryToken {
85
- /**
86
- * The value to use for the token
87
- */
88
- value: string;
89
- /**
90
- * If the token should be treated as quoted.
91
- * Quoted tokens are searched for exactly, no partial matches.
92
- */
93
- quoted: boolean;
94
- }
95
- /**
96
- * Callback for tokenizing a value into a list of string tokens.
97
- * @param value - The value to tokenize.
98
- * @returns An array of tokens.
99
- */
100
- type TokenizerCallback = (value: any) => QueryToken[];
101
- /**
102
- * Callback for filtering a row.
103
- * @param row - The row data.
104
- * @param index - The index of the row.
105
- * @returns True if the row matches the filter, false otherwise.
106
- */
107
- type FilterCallback<T> = (row: T, index: number) => boolean;
108
- /**
109
- * Callback for filtering a field value against the filter data.
110
- * @param value - The value to filter.
111
- * @param filter - The filter to apply.
112
- * @returns True if the value matches the filter, false otherwise.
113
- */
114
- type ColumnFilterCallback = (value: any, filter: any) => boolean;
115
- /**
116
- * Represents the current sort state
117
- */
118
- interface SortState {
119
- /**
120
- * The sort order
121
- */
122
- order: SortOrder;
123
- /**
124
- * The sort priority.
125
- * Lower priority means
126
- */
127
- priority: number;
128
- }
129
- /**
130
- * Column options for the table.
131
- */
132
- interface ColumnOptions<T> {
133
- /**
134
- * The field name in the data object.
135
- */
136
- field: NestedKeyOf<T>;
137
- /**
138
- * The title to display in the header.
139
- */
140
- title?: string;
141
- /**
142
- * Whether the column is sortable.
143
- */
144
- sortable?: boolean;
145
- /**
146
- * Whether the column is searchable.
147
- */
148
- searchable?: boolean;
149
- /**
150
- * Whether the column's data should be tokenized for searching.
151
- */
152
- tokenize?: boolean;
153
- /**
154
- * Whether the column should be resizable.
155
- */
156
- resizable?: boolean;
157
- /**
158
- * A function to format the value for display.
159
- */
160
- valueFormatter?: ValueFormatterCallback<T> | null;
161
- /**
162
- * A function to format the element for display.
163
- */
164
- elementFormatter?: CellFormatterCallback<T> | null;
165
- /**
166
- * A function to use for sorting the column.
167
- * This overrides the default sorting behavior.
168
- */
169
- sorter?: ComparatorCallback | null;
170
- /**
171
- * A function to derive a comparable value from the cell's original value, specifically for sorting this column.
172
- * This can be used to preprocess and cache values (e.g., convert to lowercase, extract numbers) before comparison.
173
- */
174
- sortValue?: SortValueCallback | null;
175
- /**
176
- * A custom function to determine if a cell's value in this column matches a given filter criterion.
177
- * This is used when `DataTable.filter()` is called with an object-based filter that targets this column's field.
178
- */
179
- filter?: ColumnFilterCallback | null;
180
- }
181
- /**
182
- * Represents the current state of a column.
183
- */
184
- interface ColumnState<T> {
185
- /**
186
- * The unique field name of the column.
187
- */
188
- field: NestedKeyOf<T>;
189
- /**
190
- * The current visibility of the column.
191
- */
192
- visible: boolean;
193
- /**
194
- * The current sort order of the column.
195
- */
196
- sortState?: SortState | null;
197
- /**
198
- * The currently set width of the column in pixels.
199
- */
200
- width?: number | null;
201
- }
202
- /**
203
- * Defines CSS classes to be applied to different parts of the table.
204
- */
205
- interface TableClasses {
206
- /**
207
- * Classes for the scroller element.
208
- */
209
- scroller?: string | string[];
210
- /**
211
- * Classes for the thead element.
212
- */
213
- thead?: string | string[];
214
- /**
215
- * Classes for the tbody element.
216
- */
217
- tbody?: string | string[];
218
- /**
219
- * Classes for each table row element.
220
- */
221
- tr?: string | string[];
222
- /**
223
- * Classes for each header element.
224
- */
225
- th?: string | string[];
226
- /**
227
- * Classes for each cell element.
228
- */
229
- td?: string | string[];
230
- /**
231
- * Classes for the mark elements used to highligh search results.
232
- */
233
- mark?: string | string[];
234
- }
235
- /**
236
- * Options for configuring the table.
237
- */
238
- interface TableOptions<T> {
239
- /**
240
- * Configures virtual scrolling.
241
- */
242
- virtualScroll?: boolean | number;
243
- /**
244
- * Whether to highlight search results in the table cells.
245
- */
246
- highlightSearch?: boolean;
247
- /**
248
- * Whether the search query should be tokenized.
249
- */
250
- tokenizeSearch?: boolean;
251
- /**
252
- * Whether search results should be scored or not.
253
- * Scoring is very computationally expensive...
254
- */
255
- enableSearchScoring?: boolean;
256
- /**
257
- * Whether columns should be rearrangeable by drag and drop.
258
- */
259
- rearrangeable?: boolean;
260
- /**
261
- * Additional fields to include in the search.
262
- * Used for fields that are not displayed as columns.
263
- */
264
- extraSearchFields?: NestedKeyOf<T>[];
265
- /**
266
- * A placeholder to use for null or undefined values.
267
- */
268
- emptyValuePlaceholder?: string;
269
- /**
270
- * The text to display when there is no data in the table.
271
- */
272
- noDataText?: string;
273
- /**
274
- * The text to display when there are no matching records after filtering or searching.
275
- */
276
- noMatchText?: string;
277
- /**
278
- * Custom CSS classes to apply to various table elements.
279
- */
280
- classes?: TableClasses;
281
- /**
282
- * A function to format each row's HTML element.
283
- */
284
- rowFormatter?: RowFormatterCallback<T> | null;
285
- /**
286
- * A function to use for tokenizing values for searching.
287
- */
288
- tokenizer?: TokenizerCallback;
289
- /**
290
- * A specific virtual scroll class to use
291
- */
292
- virtualScrollClass?: IVirtualScrollConstructor;
293
- }
294
- /**
295
- * Represents the current state of the table
296
- */
297
- interface TableState<T> {
298
- /**
299
- * A list of {@link ColumnState}s representing all of the columns in the table.
300
- */
301
- columns: ColumnState<T>[];
302
- /**
303
- * The current query applied to the table or null if no query is applied.
304
- */
305
- searchQuery: string | RegExp | null;
306
- /**
307
- * The current filters applied to the table or null if no filters are applied.
308
- */
309
- filters: Filters<T> | FilterCallback<T> | null;
310
- /**
311
- * The current scroll position of the table
312
- */
313
- scrollPosition: {
314
- top: number;
315
- left: number;
316
- };
317
- /**
318
- * The current column order represented as a list of their fields from left to right.
319
- */
320
- columnOrder: NestedKeyOf<T>[];
321
- }
322
- type TableInitOptions<T> = TableOptions<T> & {
323
- data?: T[];
324
- };
325
- type ColumnInitOptions<T> = ColumnOptions<T> & Partial<ColumnState<T>>;
326
- type RestorableColumnState<T> = Partial<Omit<ColumnState<T>, 'field'>> & Pick<ColumnState<T>, 'field'>;
327
- type RestorableTableState<T> = Partial<Omit<TableState<T>, 'columns'>> & {
328
- columns?: RestorableColumnState<T>[];
329
- };
330
-
331
- /**
332
- * Represents a dynamic and interactive table with features like sorting, searching, filtering,
333
- * column resizing, column rearranging, and virtual scrolling.
334
- *
335
- * @example
336
- * ```ts
337
- * type DataType = {id: number, name: string, age: number};
338
- *
339
- * const dataTable = new DataTable<DataType>('#myTable', [
340
- * { field: 'id', title: 'ID', sortable: true },
341
- * { field: 'name', title: 'Name', searchable: true },
342
- * { field: 'age', title: 'Age', sortable: true, valueFormatter: (value) => `${value} years` }
343
- * ], {
344
- * data: [
345
- * { id: 1, name: 'Alice', age: 30 },
346
- * { id: 2, name: 'Bob', age: 24 },
347
- * ],
348
- * virtualScroll: true,
349
- * resizable: true,
350
- * rearrangeable: true,
351
- * });
352
- * ```
353
- */
354
- declare class DataTable<T> extends EventTarget {
355
- #private;
356
- private static readonly MatchWeights;
357
- private readonly DEFAULT_OPTIONS;
358
- /**
359
- * Initializes a new instance of the DataTable.
360
- * @param table - The HTMLTableElement or a CSS selector string for the table.
361
- * @param columns - List of {@link ColumnOptions} for the table.
362
- * @param options - Optional configuration options for the DataTable.
363
- * @throws {SyntaxError} If the table selector does not find an element.
364
- * @throws {TypeError} If the provided table element is not an HTMLTableElement or if columns option is not an array.
365
- */
366
- constructor(table: string | HTMLTableElement, columns: ColumnInitOptions<T>[], options?: TableInitOptions<T>);
367
- /**
368
- * Gets the current options applied to the table.
369
- */
370
- get tableOptions(): ConcreteTableOptions<T>;
371
- /**
372
- * Gets the currently filtered and sorted rows displayed in the table.
373
- */
374
- get rows(): T[];
375
- /**
376
- * Gets the underlying data
377
- */
378
- get data(): T[];
379
- /**
380
- * Gets the underlying HTMLTableElement managed by this DataTable instance.
381
- */
382
- get table(): HTMLTableElement;
383
- /**
384
- * Gets the current state of the table.
385
- */
386
- getState(): TableState<T>;
387
- /**
388
- * Restores the table to the provided state.
389
- * @param state - The state to restore the table to.
390
- */
391
- restoreState(state: RestorableTableState<T>): void;
392
- updateTableOptions(options: UpdatableTableOptions<T>): void;
393
- getColumnOptions(): Required<ColumnOptions<T>>[];
394
- getColumnOptions(field: NestedKeyOf<T>): Required<ColumnOptions<T>>;
395
- updateColumnOptions(column: NestedKeyOf<T>, options: ColumnOptionsWithoutField<T>): void;
396
- /**
397
- * Loads data into the table
398
- * @param rows - An array of data to be loaded
399
- * @param options - Configuration for the load operation
400
- */
401
- loadData(rows: T[], options?: LoadOptions): void;
402
- /**
403
- * Displays a message in the table body, typically used for "no data" or "no results" states.
404
- * The message is shown in a single row spanning all columns.
405
- * @param text - The text or HTML message to display.
406
- * @param classes - A string or array of strings for CSS classes to apply to the message row.
407
- */
408
- showMessage(text: string, ...classes: string[]): void;
409
- /**
410
- * Clears the current message and dispalsy the normal table data.
411
- */
412
- clearMessage(): void;
413
- /**
414
- * Filters rows based on a search query.
415
- * The search is performed on columns marked as `searchable` and `extraSearchFields`.
416
- * @param query - The search term (string) or a regular expression. An empty string clears the search.
417
- */
418
- search(query?: string | RegExp | null): void;
419
- /**
420
- * Applies filters to the table rows.
421
- * Filters can be an object where keys are field names and values are the criteria to filter by,
422
- * or a callback function that receives a row and its index and returns `true` if the row should be included.
423
- * @param filters - An object defining field-based filters or a custom filter callback function.
424
- * @throws {TypeError} If `filters` is not an object or a function.
425
- */
426
- filter(filters?: Filters<T> | FilterCallback<T> | null): void;
427
- /**
428
- * Sorts the table by a specified column and order.
429
- * If `order` is `null`, the sort on this column is removed.
430
- * @param colName - The field name of the column to sort by.
431
- * @param order - The sort order: 'asc', 'desc', or `null` to remove sorting for this column.
432
- */
433
- sort(colName: NestedKeyOf<T>, order: SortOrder | null): void;
434
- /**
435
- * Sets the visibility of a specified column.
436
- * @param colName - The field name of the column.
437
- * @param visisble - `true` to show the column, `false` to hide it.
438
- */
439
- setColumnVisibility(colName: NestedKeyOf<T>, visisble: boolean): void;
440
- /**
441
- * Shows a previously hidden column.
442
- * @param field - The field name of the column to show.
443
- */
444
- showColumn(field: NestedKeyOf<T>): void;
445
- /**
446
- * Hides a visible column.
447
- * @param field - The field name of the column to hide.
448
- */
449
- hideColumn(field: NestedKeyOf<T>): void;
450
- /**
451
- * Export the current visible table data to a CSV file.
452
- * @param filename - The name of the file to save.
453
- * @param all - If `true`, exports all original data (ignoring filters). If `false` (default), exports only the currently visible (filtered and sorted) rows.
454
- */
455
- export(filename: string, all?: boolean): void;
456
- scrollToRow(row: T): void;
457
- /**
458
- * Scrolls the table to bring the row at the specified original index into view.
459
- * @param index - The original index of the row (from the initial dataset).
460
- */
461
- scrollToOriginalIndex(index: number): void;
462
- scrollToFilteredIndex(index: number): void;
463
- scrollToPx(px: number): void;
464
- /**
465
- * Sets the display order of the columns in the table.
466
- *
467
- * @param fields - An array of field names representing the new order of columns. Columns not included in the array will be placed at the end.
468
- * @throws {TypeError} If `fields` is not an array.
469
- */
470
- setColumnOrder(fields: NestedKeyOf<T>[]): void;
471
- /**
472
- * Refreshes the table display. This re-applies filters, sorting, and updates headers and rows.
473
- */
474
- refresh(): void;
475
- /**
476
- * Finds the original index of the first row where the specified field matches the given value.
477
- * This searches through the original, unfiltered dataset.
478
- * @param field - The field name within the row data to search.
479
- * @param value - The value to match against the field's content.
480
- * @returns The original index of the found row, or -1 if no match is found.
481
- * @example
482
- * ```ts
483
- * const index = dataTable.indexOf('id', 12345);
484
- * if (index >= 0) {
485
- * dataTable.updateRow({description: "Updated description"}, index);
486
- * }
487
- * ```
488
- */
489
- indexOf(field: string, value: any): number;
490
- /**
491
- * Updates the data of a row at a specific original index.
492
- * @param index - The original index of the row to update.
493
- * @param data - An object containing the new data to assign to the row. Existing fields will be updated, and new fields will be added.
494
- *
495
- * @example
496
- * ```ts
497
- * const index = dataTable.indexOf('id', 12345);
498
- * if (index >= 0) {
499
- * dataTable.updateRow(index, {description: "Updated description"});
500
- * }
501
- * ```
502
- */
503
- updateRow(index: number, data: Partial<T>): void;
504
- /**
505
- * Deletes a row at a specific original index from the table.
506
- * @param index - The original index of the row to delete.
507
- */
508
- deleteRow(index: number): void;
509
- /**
510
- * Executes a callback function without triggering table updates (like re-rendering or event dispatches)
511
- * until the callback has completed. This is useful for batching multiple operations.
512
- * @param callback - A function to execute. It receives the DataTable instance as its argument.
513
- * @example dataTable.withoutUpdates(dt => { dt.sort('name', 'asc'); dt.filter({ age: '>30' }); });
514
- */
515
- withoutUpdates(callback: (dataTable: DataTable<T>) => void): void;
516
- destroy(): void;
517
- addEventListener<K extends keyof DataTableEventMap<T>>(type: K, listener: (this: DataTable<T>, ev: CustomEvent<DataTableEventMap<T>[K]>) => any, options?: boolean | AddEventListenerOptions): void;
518
- addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
519
- removeEventListener<K extends keyof DataTableEventMap<T>>(type: K, listener: (this: DataTable<T>, ev: CustomEvent<DataTableEventMap<T>[K]>) => any, options?: boolean | EventListenerOptions): void;
520
- removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
521
- private readonly TABLE_OPTION_CONFIGS;
522
- private readonly COLUMN_OPTION_CONFIGS;
523
- }
524
- type ConcreteTableClasses = Required<{
525
- [K in keyof TableClasses]: string[];
526
- }>;
527
- type ConcreteTableOptions<T> = Required<Omit<TableOptions<T>, 'data' | 'classes' | 'virtualScroll'>> & {
528
- classes: ConcreteTableClasses;
529
- virtualScroll: number;
530
- };
531
- type UpdatableTableOptions<T> = TableOptions<T>;
532
- type ColumnOptionsWithoutField<T> = Omit<ColumnOptions<T>, 'field'>;
533
- /**
534
- * Defines the mapping between event names and their detail object types.
535
- */
536
- interface DataTableEventMap<T> {
537
- 'dt.row.clicked': {
538
- row: T;
539
- index: number;
540
- column: NestedKeyOf<T>;
541
- originalEvent: MouseEvent;
542
- };
543
- 'dt.rows.changed': object;
544
- 'dt.col.sort': {
545
- column: string;
546
- order: SortOrder | null;
547
- };
548
- 'dt.col.visibility': {
549
- column: NestedKeyOf<T>;
550
- visible: boolean;
551
- };
552
- 'dt.col.resize': {
553
- column: NestedKeyOf<T>;
554
- width: number;
555
- };
556
- 'dt.col.reorder': {
557
- draggedColumn: NestedKeyOf<T>;
558
- dropColumn: NestedKeyOf<T>;
559
- order: string[];
560
- };
561
- 'dt.search': {
562
- query: string | RegExp | null;
563
- };
564
- }
565
-
566
- declare class VirtualScroll implements IVirtualScroll {
567
- #private;
568
- static AVERAGE_RENDER_COUNT: number;
569
- constructor({ generator, container, element, nodePadding, }: VirtualScrollOptions);
570
- private get rowHeight();
571
- get started(): boolean;
572
- scrollToIndex(index: number): void;
573
- /**
574
- * @param px
575
- */
576
- scrollToPx(px: number): void;
577
- start(rowCount: number): void;
578
- stop(): void;
579
- }
580
- declare class VirtualScrollError extends Error {
581
- constructor(message: string);
582
- }
583
-
584
- interface LocalStorageAdapterOptions {
585
- saveSearch?: boolean;
586
- saveColumnSorting?: boolean;
587
- saveColumnOrder?: boolean;
588
- saveColumnVisibility?: boolean;
589
- saveColumnWidth?: boolean;
590
- }
591
- interface IDataTable<T> extends EventTarget {
592
- getState(): TableState<T>;
593
- restoreState(state: RestorableTableState<T>): void;
594
- }
595
-
596
- /**
597
- * Monitors a {@link DataTable} instance for changes and saves the state to local storage.
598
- */
599
- declare class LocalStorageAdapter<T> {
600
- #private;
601
- private readonly storageKey;
602
- private dataTable?;
603
- private options;
604
- /**
605
- * @param dataTable - The DataTable instance to monitor.
606
- * @param storageKey - The key to use for saving the state in localStorage.
607
- * @param options - The options for configuring what is stored.
608
- */
609
- constructor(storageKey: string, dataTable?: IDataTable<T> | undefined, options?: LocalStorageAdapterOptions);
610
- setDataTable(dataTable: IDataTable<T>): void;
611
- destroy(): void;
612
- /**
613
- * Saves the current column state to localStorage.
614
- */
615
- saveState(): void;
616
- /**
617
- * Restores the column state from localStorage.
618
- */
619
- restoreState(): void;
620
- /**
621
- * Clears the saved state from localStorage.
622
- */
623
- clearState(): void;
624
- }
625
-
626
- export { type CellFormatterCallback, type ColumnFilterCallback, type ColumnInitOptions, type ColumnOptions, type ColumnState, type ComparatorCallback, DataTable, type DataTableEventMap, type FilterCallback, type Filters, type IDataTable, type IVirtualScroll, type IVirtualScrollConstructor, type LoadOptions, LocalStorageAdapter, type LocalStorageAdapterOptions, type NestedKeyOf, type QueryToken, type RestorableColumnState, type RestorableTableState, type RowFormatterCallback, type SortOrder, type SortState, type SortValueCallback, type TableClasses, type TableInitOptions, type TableOptions, type TableState, type TokenizerCallback, type ValueFormatterCallback, VirtualScroll, VirtualScrollError, type VirtualScrollOptions, createRegexTokenizer };