@timlassiter11/yatl 0.2.2 → 0.3.0

package/dist/datatable.css

@@ -1,2 +1,2 @@
-.data-table{--dt-header-sorter-width: 1ch;--dt-header-resizer-width: 10px;--dt-header-drop-color: rgba(255, 255, 255, .1);position:relative;white-space:nowrap;overflow:auto;width:100%;table-layout:fixed!important}.dt-headers{position:sticky;top:0;z-index:1}.dt-headers th{overflow:hidden;box-sizing:border-box}.dt-headers .dt-header-content{position:relative}.dt-sortable .dt-header-content{cursor:pointer}.dt-header-title-wrapper{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;overflow:hidden}.dt-sort-icon{position:relative;width:var(--dt-header-sorter-width);align-self:stretch;padding:0 12px;overflow:hidden;flex-shrink:0}.dt-sort-icon:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dt-sortable.dt-descending .dt-sort-icon:after{content:"\2193"}.dt-sortable.dt-ascending .dt-sort-icon:after{content:"\2191"}.dt-resizer{position:absolute;top:0;right:calc((var(--dt-header-resizer-width) / 2) * -1);height:100%;width:var(--dt-header-resizer-width);cursor:ew-resize;z-index:2}.dt-resizer:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:60%;background-color:currentColor}.dt-headers>tr>th.dt-drag-over,.dt-headers>tr>th:has(.dt-drag-over){background-color:var(--dt-header-drop-color)}.data-table>tbody>tr>td,.dt-header-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dt-empty{text-align:center;pointer-events:none}.dt-scroller{height:100%;overflow:auto}*:has(.data-table:has(.dt-virtual-scroll)){height:100%;min-height:0}
+.data-table{--dt-header-sorter-width: 1ch;--dt-header-resizer-width: 10px;--dt-header-drop-color: rgba(255, 255, 255, .1);position:relative;white-space:nowrap;overflow:auto;width:100%;table-layout:fixed!important}.dt-headers{position:sticky;top:0;z-index:1}.dt-headers th{overflow:hidden;box-sizing:border-box}.dt-headers .dt-header-content{position:relative}.dt-sortable .dt-header-content{cursor:pointer}.dt-header-title-wrapper{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;overflow:hidden}.dt-sort-icon{position:relative;width:var(--dt-header-sorter-width);align-self:stretch;padding:0 12px;overflow:hidden;flex-shrink:0}.dt-sort-icon:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dt-sortable.dt-descending .dt-sort-icon:after{content:"\2191"}.dt-sortable.dt-ascending .dt-sort-icon:after{content:"\2193"}.dt-resizer{position:absolute;top:0;right:calc((var(--dt-header-resizer-width) / 2) * -1);height:100%;width:var(--dt-header-resizer-width);cursor:ew-resize;z-index:2}.dt-resizer:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:60%;background-color:currentColor}.dt-headers>tr>th.dt-drag-over,.dt-headers>tr>th:has(.dt-drag-over){background-color:var(--dt-header-drop-color)}.data-table>tbody>tr>td,.dt-header-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dt-empty{text-align:center;pointer-events:none}
 /*# sourceMappingURL=datatable.css.map */

package/dist/datatable.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/datatable.css"],"sourcesContent":[".data-table {\n  --dt-header-sorter-width: 1ch;\n  --dt-header-resizer-width: 10px;\n  --dt-header-drop-color: rgba(255, 255, 255, 0.1);\n\n  position: relative;\n  white-space: nowrap;\n  overflow: auto;\n  width: 100%;\n  table-layout: fixed !important;\n}\n\n.dt-headers {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.dt-headers th {\n  overflow: hidden;\n  box-sizing: border-box;\n\n}\n\n.dt-headers .dt-header-content {\n  position: relative;\n}\n\n.dt-sortable .dt-header-content {\n  cursor: pointer;\n}\n\n.dt-header-title-wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: nowrap;\n  overflow: hidden;;\n}\n\n.dt-sort-icon {\n  position: relative;\n  width: var(--dt-header-sorter-width);\n  align-self: stretch;\n  padding: 0 12px;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.dt-sort-icon::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.dt-sortable.dt-descending .dt-sort-icon::after {\n  content: '\\2193';\n}\n\n.dt-sortable.dt-ascending .dt-sort-icon::after {\n  content: '\\2191';\n}\n\n.dt-resizer {\n  position: absolute;\n  top: 0;\n  right: calc((var(--dt-header-resizer-width) / 2) * -1);\n  height: 100%;\n  width: var(--dt-header-resizer-width);\n  cursor: ew-resize;\n  z-index: 2;\n}\n\n.dt-resizer::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 1px;\n  height: 60%;\n  background-color: currentColor;\n}\n\n.dt-headers > tr > th.dt-drag-over,\n.dt-headers > tr > th:has(.dt-drag-over) {\n  background-color: var(--dt-header-drop-color);\n}\n\n.data-table > tbody > tr > td,\n.dt-header-title {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.dt-empty {\n  text-align: center;\n  pointer-events: none;\n}\n\n.dt-scroller {\n  height: 100%;\n  overflow: auto;\n}\n\n/* This is a catch all to ensure*/\n*:has( .data-table:has( .dt-virtual-scroll)) {\n  height: 100%;\n  min-height: 0;\n}"],"mappings":"AAAA,CAAC,WACC,0BAA0B,IAC1B,2BAA2B,KAC3B,wBAAwB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAE5C,SAAU,SACV,YAAa,OACb,SAAU,KACV,MAAO,KACP,aAAc,eAChB,CAEA,CAAC,WACC,SAAU,OACV,IAAK,EACL,QAAS,CACX,CAEA,CANC,WAMW,GACV,SAAU,OACV,WAAY,UAEd,CAEA,CAZC,WAYW,CAAC,kBACX,SAAU,QACZ,CAEA,CAAC,YAAY,CAJA,kBAKX,OAAQ,OACV,CAEA,CAAC,wBACC,QAAS,KACT,eAAgB,IAChB,YAAa,OACb,UAAW,OACX,SAAU,MACZ,CAEA,CAAC,aACC,SAAU,SACV,MAAO,IAAI,0BACX,WAAY,QA3Cd,QA4CW,EAAE,KACX,SAAU,OACV,YAAa,CACf,CAEA,CATC,YASY,OACX,QAAS,GACT,SAAU,SACV,IAAK,IACL,KAAM,IACN,UAAW,UAAU,IAAI,CAAE,KAC7B,CAEA,CA7BC,WA6BW,CAAC,cAAc,CAjB1B,YAiBuC,OACtC,QAAS,OACX,CAEA,CAjCC,WAiCW,CAAC,aAAa,CArBzB,YAqBsC,OACrC,QAAS,OACX,CAEA,CAAC,WACC,SAAU,SACV,IAAK,EACL,MAAO,KAAK,CAAC,IAAI,2BAA2B,EAAE,GAAG,EAAE,IACnD,OAAQ,KACR,MAAO,IAAI,2BACX,OAAQ,UACR,QAAS,CACX,CAEA,CAVC,UAUU,OACT,QAAS,GACT,SAAU,SACV,IAAK,IACL,KAAM,IACN,UAAW,UAAU,IAAI,CAAE,MAC3B,MAAO,IACP,OAAQ,IACR,iBAAkB,YACpB,CAEA,CA1EC,UA0EW,CAAE,EAAG,CAAE,EAAE,CAAC,aACtB,CA3EC,UA2EW,CAAE,EAAG,CAAE,EAAE,KAAK,CADJ,cAEpB,iBAAkB,IAAI,uBACxB,CAEA,CA3FC,UA2FW,CAAE,KAAM,CAAE,EAAG,CAAE,GAC3B,CAAC,gBACC,cAAe,SACf,YAAa,OACb,SAAU,MACZ,CAEA,CAAC,SACC,WAAY,OACZ,eAAgB,IAClB,CAEA,CAAC,YACC,OAAQ,KACR,SAAU,IACZ,CAGA,CAAC,KAAM,CA7GN,UA6GiB,KAAM,CAAC,oBACvB,OAAQ,KACR,WAAY,CACd","names":[]}
+{"version":3,"sources":["../src/datatable.css"],"sourcesContent":[".data-table {\n  --dt-header-sorter-width: 1ch;\n  --dt-header-resizer-width: 10px;\n  --dt-header-drop-color: rgba(255, 255, 255, 0.1);\n\n  position: relative;\n  white-space: nowrap;\n  overflow: auto;\n  width: 100%;\n  table-layout: fixed !important;\n}\n\n.dt-headers {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.dt-headers th {\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.dt-headers .dt-header-content {\n  position: relative;\n}\n\n.dt-sortable .dt-header-content {\n  cursor: pointer;\n}\n\n.dt-header-title-wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: nowrap;\n  overflow: hidden;\n}\n\n.dt-sort-icon {\n  position: relative;\n  width: var(--dt-header-sorter-width);\n  align-self: stretch;\n  padding: 0 12px;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.dt-sort-icon::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.dt-sortable.dt-descending .dt-sort-icon::after {\n  content: '\\2191';\n}\n\n.dt-sortable.dt-ascending .dt-sort-icon::after {\n  content: '\\2193';\n}\n\n.dt-resizer {\n  position: absolute;\n  top: 0;\n  right: calc((var(--dt-header-resizer-width) / 2) * -1);\n  height: 100%;\n  width: var(--dt-header-resizer-width);\n  cursor: ew-resize;\n  z-index: 2;\n}\n\n.dt-resizer::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 1px;\n  height: 60%;\n  background-color: currentColor;\n}\n\n.dt-headers > tr > th.dt-drag-over,\n.dt-headers > tr > th:has(.dt-drag-over) {\n  background-color: var(--dt-header-drop-color);\n}\n\n.data-table > tbody > tr > td,\n.dt-header-title {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.dt-empty {\n  text-align: center;\n  pointer-events: none;\n}\n"],"mappings":"AAAA,CAAC,WACC,0BAA0B,IAC1B,2BAA2B,KAC3B,wBAAwB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAE5C,SAAU,SACV,YAAa,OACb,SAAU,KACV,MAAO,KACP,aAAc,eAChB,CAEA,CAAC,WACC,SAAU,OACV,IAAK,EACL,QAAS,CACX,CAEA,CANC,WAMW,GACV,SAAU,OACV,WAAY,UACd,CAEA,CAXC,WAWW,CAAC,kBACX,SAAU,QACZ,CAEA,CAAC,YAAY,CAJA,kBAKX,OAAQ,OACV,CAEA,CAAC,wBACC,QAAS,KACT,eAAgB,IAChB,YAAa,OACb,UAAW,OACX,SAAU,MACZ,CAEA,CAAC,aACC,SAAU,SACV,MAAO,IAAI,0BACX,WAAY,QA1Cd,QA2CW,EAAE,KACX,SAAU,OACV,YAAa,CACf,CAEA,CATC,YASY,OACX,QAAS,GACT,SAAU,SACV,IAAK,IACL,KAAM,IACN,UAAW,UAAU,IAAI,CAAE,KAC7B,CAEA,CA7BC,WA6BW,CAAC,cAAc,CAjB1B,YAiBuC,OACtC,QAAS,OACX,CAEA,CAjCC,WAiCW,CAAC,aAAa,CArBzB,YAqBsC,OACrC,QAAS,OACX,CAEA,CAAC,WACC,SAAU,SACV,IAAK,EACL,MAAO,KAAK,CAAC,IAAI,2BAA2B,EAAE,GAAG,EAAE,IACnD,OAAQ,KACR,MAAO,IAAI,2BACX,OAAQ,UACR,QAAS,CACX,CAEA,CAVC,UAUU,OACT,QAAS,GACT,SAAU,SACV,IAAK,IACL,KAAM,IACN,UAAW,UAAU,IAAI,CAAE,MAC3B,MAAO,IACP,OAAQ,IACR,iBAAkB,YACpB,CAEA,CAzEC,UAyEW,CAAE,EAAG,CAAE,EAAE,CAAC,aACtB,CA1EC,UA0EW,CAAE,EAAG,CAAE,EAAE,KAAK,CADJ,cAEpB,iBAAkB,IAAI,uBACxB,CAEA,CA1FC,UA0FW,CAAE,KAAM,CAAE,EAAG,CAAE,GAC3B,CAAC,gBACC,cAAe,SACf,YAAa,OACb,SAAU,MACZ,CAEA,CAAC,SACC,WAAY,OACZ,eAAgB,IAClB","names":[]}

package/dist/datatable.d.mts

@@ -1,3 +1,11 @@
+type NestedKeyOf<T> = T extends object ? {
+    [K in keyof T]: K extends string ? T[K] extends object ? `${K}` | `${K}.${NestedKeyOf<T[K]>}` : `${K}` : never;
+}[keyof T] : never;
+declare const createRegexTokenizer: (exp?: string) => (value: string) => {
+    value: string;
+    quoted: boolean;
+}[];
+
 /**
  * Defines the possible sorting orders for columns.
  */
@@ -7,21 +15,21 @@ type SortOrder = 'asc' | 'desc' | null;
  * @param row - The row data.
  * @param element - The row element.
  */
-type RowFormatterCallback = (row: any, element: HTMLElement) => void;
+type RowFormatterCallback<T> = (row: T, element: HTMLElement) => void;
 /**
  * Callback for formatting the value of a cell.
  * Called when the cell is created and when exporting to CSV.
  * @param value - The value of the cell.
  * @param row - The row data.
  */
-type ValueFormatterCallback = (value: any, row: any) => string;
+type ValueFormatterCallback<T> = (value: any, row: T) => string;
 /**
  * Callback for formatting a cell's HTML element.
  * @param value - The value of the field.
  * @param row - The row data.
  * @param element - The cell element.
  */
-type CellFormatterCallback = (value: any, row: any, element: HTMLElement) => void;
+type CellFormatterCallback<T> = (value: any, row: T, element: HTMLElement) => void;
 /**
  * Callback for comparing two values.
  * @param a - The first value.
@@ -63,11 +71,11 @@ type ColumnFilterCallback = (value: any, filter: any) => boolean;
 /**
  * Column options for the table.
  */
-interface ColumnOptions {
+interface ColumnOptions<T> {
     /**
      * The field name in the data object.
      */
-    field: string;
+    field: NestedKeyOf<T>;
     /**
      * The title to display in the header.
      */
@@ -110,11 +118,11 @@ interface ColumnOptions {
     /**
      * A function to format the value for display.
      */
-    valueFormatter?: ValueFormatterCallback;
+    valueFormatter?: ValueFormatterCallback<T>;
     /**
      * A function to format the element for display.
      */
-    elementFormatter?: CellFormatterCallback;
+    elementFormatter?: CellFormatterCallback<T>;
     /**
      * A function to use for sorting the column.
      * This overrides the default sorting behavior.
@@ -177,10 +185,6 @@ interface TableClasses {
      * Classes for the tbody element.
      */
     tbody?: string | string[];
-    /**
-     * Classes for the tfoot element.
-     */
-    tfoot?: string | string[];
     /**
      * Classes for each table row element.
      */
@@ -201,19 +205,15 @@ interface TableClasses {
 /**
  * Options for configuring the table.
  */
-interface TableOptions {
-    /**
-     * The column options for the table.
-     */
-    columns?: ColumnOptions[];
+interface TableOptions<T> {
     /**
      * The initial data to load into the table.
      */
-    data?: any[];
+    data?: T[];
     /**
      * Configures virtual scrolling.
      */
-    virtualScroll?: boolean;
+    virtualScroll?: boolean | number;
     /**
      * Whether to highlight search results in the table cells.
      */
@@ -261,7 +261,7 @@ interface TableOptions {
     /**
      * A function to format each row's HTML element.
      */
-    rowFormatter?: RowFormatterCallback;
+    rowFormatter?: RowFormatterCallback<T>;
     /**
      * A function to use for tokenizing values for searching.
      */
@@ -273,11 +273,9 @@ interface LoadOptions {
     /** If the current scroll position should be kepts */
     keepScroll?: boolean;
 }
-
-declare const createRegexTokenizer: (exp?: string) => (value: string) => {
-    value: string;
-    quoted: boolean;
-}[];
+type Filters<T> = Partial<{
+    [K in keyof T]: any;
+}>;
 
 /**
  * Represents a dynamic and interactive table with features like sorting, searching, filtering,
@@ -285,13 +283,13 @@ declare const createRegexTokenizer: (exp?: string) => (value: string) => {
  *
  * @example
  * ```ts
- * const tableElement = document.getElementById('myTable');
- * const options = {
- *   columns: [
+ * type DataType = {id: number, name: string, age: number};
+ *
+ * const dataTable = new DataTable<DataType>('#myTable', [
  *     { field: 'id', title: 'ID', sortable: true },
  *     { field: 'name', title: 'Name', searchable: true },
  *     { field: 'age', title: 'Age', sortable: true, valueFormatter: (value) => `${value} years` }
- *   ],
+ *   ], {
  *   data: [
  *     { id: 1, name: 'Alice', age: 30 },
  *     { id: 2, name: 'Bob', age: 24 },
@@ -299,22 +297,23 @@ declare const createRegexTokenizer: (exp?: string) => (value: string) => {
  *   virtualScroll: true,
  *   resizable: true,
  *   rearrangeable: true,
- * };
- * const dataTable = new DataTable(tableElement, options);
+ * });
  * ```
  */
-declare class DataTable extends EventTarget {
+declare class DataTable<T> extends EventTarget {
     #private;
     private static readonly MatchWeights;
-    private static readonly DEFAULT_OPTIONS;
+    private readonly DEFAULT_OPTIONS;
     /**
      * Initializes a new instance of the DataTable.
      * @param table - The HTMLTableElement or a CSS selector string for the table.
+     * @param columns - List of {@link ColumnOptions} for the table.
      * @param options - Optional configuration options for the DataTable.
      * @throws {SyntaxError} If the table selector does not find an element.
      * @throws {TypeError} If the provided table element is not an HTMLTableElement or if columns option is not an array.
      */
-    constructor(table: string | HTMLTableElement, options?: TableOptions);
+    constructor(table: string | HTMLTableElement, columns: ColumnOptions<T>[], options?: TableOptions<T>);
+    get options(): RequiredOptions<T>;
     /**
      * Gets or sets the state of all columns in the table.
      * This can be used to save and restore column configurations like visibility, sort order, and width.
@@ -325,35 +324,23 @@ declare class DataTable extends EventTarget {
     /**
      * Gets the currently filtered and sorted rows displayed in the table.
      */
-    get rows(): any[];
+    get rows(): T[];
     /**
      * Gets the underlying data
      */
-    get data(): any[];
-    /**
-     * Gets the total number of currently filtered and sorted rows.
-     */
-    get length(): number;
+    get data(): T[];
     /**
      * Gets the underlying HTMLTableElement managed by this DataTable instance.
      */
     get table(): HTMLTableElement;
-    /**
-     * Gets or sets the virtual scroll behavior for the table.
-     * When `true`, virtual scrolling is enabled, rendering only visible rows for performance with large datasets.
-     * When `false`, virtual scrolling is disabled, and all rows are rendered.
-     * @default true
-     */
-    get virtualScroll(): boolean;
-    set virtualScroll(value: boolean);
-    get scoring(): boolean;
-    set scoring(value: boolean);
+    updateOptions(options: UpdatableOptions<T>): void;
+    updateColumnOptions(column: ColumnField<T>, options: UpdateableColumnOptions<T>): void;
     /**
      * Loads data into the table
      * @param rows - An array of data to be loaded
      * @param options - Configuration for the load operation
      */
-    loadData(rows: any[], options?: LoadOptions): void;
+    loadData(rows: T[], options?: LoadOptions): void;
     /**
      * Displays a message in the table body, typically used for "no data" or "no results" states.
      * The message is shown in a single row spanning all columns.
@@ -378,7 +365,7 @@ declare class DataTable extends EventTarget {
      * @param filters - An object defining field-based filters or a custom filter callback function.
      * @throws {TypeError} If `filters` is not an object or a function.
      */
-    filter(filters?: any | FilterCallback): void;
+    filter(filters?: Filters<T> | FilterCallback): void;
     /**
      * Sorts the table by a specified column and order.
      * If `order` is `null`, the sort on this column is removed.
@@ -408,7 +395,7 @@ declare class DataTable extends EventTarget {
      * @param all - If `true`, exports all original data (ignoring filters). If `false` (default), exports only the currently visible (filtered and sorted) rows.
      */
     export(filename: string, all?: boolean): void;
-    scrollToRow(row: any): void;
+    scrollToRow(row: T): void;
     /**
      * Scrolls the table to bring the row at the specified original index into view.
      * @param index - The original index of the row (from the initial dataset).
@@ -455,7 +442,7 @@ declare class DataTable extends EventTarget {
      * }
      * ```
      */
-    updateRow(index: number, data: any): void;
+    updateRow(index: number, data: T): void;
     /**
      * Deletes a row at a specific original index from the table.
      * @param index - The original index of the row to delete.
@@ -467,16 +454,20 @@ declare class DataTable extends EventTarget {
      * @param callback - A function to execute. It receives the DataTable instance as its argument.
      * @example dataTable.withoutUpdates(dt => { dt.sort('name', 'asc'); dt.filter({ age: '>30' }); });
      */
-    withoutUpdates(callback: (datatable: DataTable) => void): void;
-    addEventListener<K extends keyof DataTableEventMap>(type: K, listener: (this: DataTable, ev: CustomEvent<DataTableEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    withoutUpdates(callback: (datatable: DataTable<T>) => void): void;
+    addEventListener<K extends keyof DataTableEventMap<T>>(type: K, listener: (this: DataTable<T>, ev: CustomEvent<DataTableEventMap<T>[K]>) => any, options?: boolean | AddEventListenerOptions): void;
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
 }
+type ColumnField<T> = NestedKeyOf<T>;
+type InternalClasses = Required<{
+    [K in keyof TableClasses]: string[];
+}>;
 /**
  * Defines the mapping between event names and their detail object types.
  */
-interface DataTableEventMap {
+interface DataTableEventMap<T> {
     'dt.row.clicked': {
-        row: any;
+        row: T;
         index: number;
         column: string | undefined;
         originalEvent: MouseEvent;
@@ -500,6 +491,12 @@ interface DataTableEventMap {
         order: string[];
     };
 }
+type RequiredOptions<T> = Required<Omit<TableOptions<T>, 'columns' | 'data' | 'rowFormatter' | 'classes'>> & Pick<TableOptions<T>, 'rowFormatter'> & {
+    classes: InternalClasses;
+    virtualScroll: number;
+};
+type UpdatableOptions<T> = Pick<TableOptions<T>, 'virtualScroll' | 'highlightSearch' | 'tokenizeSearch' | 'enableSearchScoring' | 'rearrangeable' | 'extraSearchFields' | 'noMatchText' | 'noDataText' | 'classes'>;
+type UpdateableColumnOptions<T> = Pick<ColumnOptions<T>, 'title' | 'searchable' | 'resizable' | 'sortable' | 'tokenize' | 'valueFormatter' | 'elementFormatter' | 'sorter'>;
 
 interface Options {
     saveColumnSorting: boolean;
@@ -507,14 +504,17 @@ interface Options {
     saveColumnVisibility: boolean;
     saveColumnWidth: boolean;
 }
-declare class LocalStorageAdapter {
+/**
+ * Monitors a {@link DataTable} instance for changes and saves the state to local storage.
+ */
+declare class LocalStorageAdapter<T> {
     #private;
     /**
      * @param dataTable - The DataTable instance to monitor.
      * @param storageKey - The key to use for saving the state in localStorage.
-     * @param options - The key to use for saving the state in localStorage.
+     * @param options - The options for configuring what is stored.
      */
-    constructor(dataTable: DataTable, storageKey: string, options?: Options);
+    constructor(dataTable: DataTable<T>, storageKey: string, options?: Options);
     /**
      * Saves the current column state to localStorage.
      */
@@ -529,4 +529,4 @@ declare class LocalStorageAdapter {
     clearState(): void;
 }
 
-export { type CellFormatterCallback, type ColumnFilterCallback, type ColumnOptions, type ColumnState, type ComparatorCallback, DataTable, type DataTableEventMap, type FilterCallback, type LoadOptions, LocalStorageAdapter, type QueryToken, type RowFormatterCallback, type SortOrder, type SortValueCallback, type TableClasses, type TableOptions, type TokenizerCallback, type ValueFormatterCallback, createRegexTokenizer };
+export { type CellFormatterCallback, type ColumnFilterCallback, type ColumnOptions, type ColumnState, type ComparatorCallback, DataTable, type DataTableEventMap, type FilterCallback, type Filters, type LoadOptions, LocalStorageAdapter, type QueryToken, type RowFormatterCallback, type SortOrder, type SortValueCallback, type TableClasses, type TableOptions, type TokenizerCallback, type ValueFormatterCallback, createRegexTokenizer };

package/dist/datatable.d.ts

@@ -1,3 +1,11 @@
+type NestedKeyOf<T> = T extends object ? {
+    [K in keyof T]: K extends string ? T[K] extends object ? `${K}` | `${K}.${NestedKeyOf<T[K]>}` : `${K}` : never;
+}[keyof T] : never;
+declare const createRegexTokenizer: (exp?: string) => (value: string) => {
+    value: string;
+    quoted: boolean;
+}[];
+
 /**
  * Defines the possible sorting orders for columns.
  */
@@ -7,21 +15,21 @@ type SortOrder = 'asc' | 'desc' | null;
  * @param row - The row data.
  * @param element - The row element.
  */
-type RowFormatterCallback = (row: any, element: HTMLElement) => void;
+type RowFormatterCallback<T> = (row: T, element: HTMLElement) => void;
 /**
  * Callback for formatting the value of a cell.
  * Called when the cell is created and when exporting to CSV.
  * @param value - The value of the cell.
  * @param row - The row data.
  */
-type ValueFormatterCallback = (value: any, row: any) => string;
+type ValueFormatterCallback<T> = (value: any, row: T) => string;
 /**
  * Callback for formatting a cell's HTML element.
  * @param value - The value of the field.
  * @param row - The row data.
  * @param element - The cell element.
  */
-type CellFormatterCallback = (value: any, row: any, element: HTMLElement) => void;
+type CellFormatterCallback<T> = (value: any, row: T, element: HTMLElement) => void;
 /**
  * Callback for comparing two values.
  * @param a - The first value.
@@ -63,11 +71,11 @@ type ColumnFilterCallback = (value: any, filter: any) => boolean;
 /**
  * Column options for the table.
  */
-interface ColumnOptions {
+interface ColumnOptions<T> {
     /**
      * The field name in the data object.
      */
-    field: string;
+    field: NestedKeyOf<T>;
     /**
      * The title to display in the header.
      */
@@ -110,11 +118,11 @@ interface ColumnOptions {
     /**
      * A function to format the value for display.
      */
-    valueFormatter?: ValueFormatterCallback;
+    valueFormatter?: ValueFormatterCallback<T>;
     /**
      * A function to format the element for display.
      */
-    elementFormatter?: CellFormatterCallback;
+    elementFormatter?: CellFormatterCallback<T>;
     /**
      * A function to use for sorting the column.
      * This overrides the default sorting behavior.
@@ -177,10 +185,6 @@ interface TableClasses {
      * Classes for the tbody element.
      */
     tbody?: string | string[];
-    /**
-     * Classes for the tfoot element.
-     */
-    tfoot?: string | string[];
     /**
      * Classes for each table row element.
      */
@@ -201,19 +205,15 @@ interface TableClasses {
 /**
  * Options for configuring the table.
  */
-interface TableOptions {
-    /**
-     * The column options for the table.
-     */
-    columns?: ColumnOptions[];
+interface TableOptions<T> {
     /**
      * The initial data to load into the table.
      */
-    data?: any[];
+    data?: T[];
     /**
      * Configures virtual scrolling.
      */
-    virtualScroll?: boolean;
+    virtualScroll?: boolean | number;
     /**
      * Whether to highlight search results in the table cells.
      */
@@ -261,7 +261,7 @@ interface TableOptions {
     /**
      * A function to format each row's HTML element.
      */
-    rowFormatter?: RowFormatterCallback;
+    rowFormatter?: RowFormatterCallback<T>;
     /**
      * A function to use for tokenizing values for searching.
      */
@@ -273,11 +273,9 @@ interface LoadOptions {
     /** If the current scroll position should be kepts */
     keepScroll?: boolean;
 }
-
-declare const createRegexTokenizer: (exp?: string) => (value: string) => {
-    value: string;
-    quoted: boolean;
-}[];
+type Filters<T> = Partial<{
+    [K in keyof T]: any;
+}>;
 
 /**
  * Represents a dynamic and interactive table with features like sorting, searching, filtering,
@@ -285,13 +283,13 @@ declare const createRegexTokenizer: (exp?: string) => (value: string) => {
  *
  * @example
  * ```ts
- * const tableElement = document.getElementById('myTable');
- * const options = {
- *   columns: [
+ * type DataType = {id: number, name: string, age: number};
+ *
+ * const dataTable = new DataTable<DataType>('#myTable', [
  *     { field: 'id', title: 'ID', sortable: true },
  *     { field: 'name', title: 'Name', searchable: true },
  *     { field: 'age', title: 'Age', sortable: true, valueFormatter: (value) => `${value} years` }
- *   ],
+ *   ], {
  *   data: [
  *     { id: 1, name: 'Alice', age: 30 },
  *     { id: 2, name: 'Bob', age: 24 },
@@ -299,22 +297,23 @@ declare const createRegexTokenizer: (exp?: string) => (value: string) => {
  *   virtualScroll: true,
  *   resizable: true,
  *   rearrangeable: true,
- * };
- * const dataTable = new DataTable(tableElement, options);
+ * });
  * ```
  */
-declare class DataTable extends EventTarget {
+declare class DataTable<T> extends EventTarget {
     #private;
     private static readonly MatchWeights;
-    private static readonly DEFAULT_OPTIONS;
+    private readonly DEFAULT_OPTIONS;
     /**
      * Initializes a new instance of the DataTable.
      * @param table - The HTMLTableElement or a CSS selector string for the table.
+     * @param columns - List of {@link ColumnOptions} for the table.
      * @param options - Optional configuration options for the DataTable.
      * @throws {SyntaxError} If the table selector does not find an element.
      * @throws {TypeError} If the provided table element is not an HTMLTableElement or if columns option is not an array.
      */
-    constructor(table: string | HTMLTableElement, options?: TableOptions);
+    constructor(table: string | HTMLTableElement, columns: ColumnOptions<T>[], options?: TableOptions<T>);
+    get options(): RequiredOptions<T>;
     /**
      * Gets or sets the state of all columns in the table.
      * This can be used to save and restore column configurations like visibility, sort order, and width.
@@ -325,35 +324,23 @@ declare class DataTable extends EventTarget {
     /**
      * Gets the currently filtered and sorted rows displayed in the table.
      */
-    get rows(): any[];
+    get rows(): T[];
     /**
      * Gets the underlying data
      */
-    get data(): any[];
-    /**
-     * Gets the total number of currently filtered and sorted rows.
-     */
-    get length(): number;
+    get data(): T[];
     /**
      * Gets the underlying HTMLTableElement managed by this DataTable instance.
      */
     get table(): HTMLTableElement;
-    /**
-     * Gets or sets the virtual scroll behavior for the table.
-     * When `true`, virtual scrolling is enabled, rendering only visible rows for performance with large datasets.
-     * When `false`, virtual scrolling is disabled, and all rows are rendered.
-     * @default true
-     */
-    get virtualScroll(): boolean;
-    set virtualScroll(value: boolean);
-    get scoring(): boolean;
-    set scoring(value: boolean);
+    updateOptions(options: UpdatableOptions<T>): void;
+    updateColumnOptions(column: ColumnField<T>, options: UpdateableColumnOptions<T>): void;
     /**
      * Loads data into the table
      * @param rows - An array of data to be loaded
      * @param options - Configuration for the load operation
      */
-    loadData(rows: any[], options?: LoadOptions): void;
+    loadData(rows: T[], options?: LoadOptions): void;
     /**
      * Displays a message in the table body, typically used for "no data" or "no results" states.
      * The message is shown in a single row spanning all columns.
@@ -378,7 +365,7 @@ declare class DataTable extends EventTarget {
      * @param filters - An object defining field-based filters or a custom filter callback function.
      * @throws {TypeError} If `filters` is not an object or a function.
      */
-    filter(filters?: any | FilterCallback): void;
+    filter(filters?: Filters<T> | FilterCallback): void;
     /**
      * Sorts the table by a specified column and order.
      * If `order` is `null`, the sort on this column is removed.
@@ -408,7 +395,7 @@ declare class DataTable extends EventTarget {
      * @param all - If `true`, exports all original data (ignoring filters). If `false` (default), exports only the currently visible (filtered and sorted) rows.
      */
     export(filename: string, all?: boolean): void;
-    scrollToRow(row: any): void;
+    scrollToRow(row: T): void;
     /**
      * Scrolls the table to bring the row at the specified original index into view.
      * @param index - The original index of the row (from the initial dataset).
@@ -455,7 +442,7 @@ declare class DataTable extends EventTarget {
      * }
      * ```
      */
-    updateRow(index: number, data: any): void;
+    updateRow(index: number, data: T): void;
     /**
      * Deletes a row at a specific original index from the table.
      * @param index - The original index of the row to delete.
@@ -467,16 +454,20 @@ declare class DataTable extends EventTarget {
      * @param callback - A function to execute. It receives the DataTable instance as its argument.
      * @example dataTable.withoutUpdates(dt => { dt.sort('name', 'asc'); dt.filter({ age: '>30' }); });
      */
-    withoutUpdates(callback: (datatable: DataTable) => void): void;
-    addEventListener<K extends keyof DataTableEventMap>(type: K, listener: (this: DataTable, ev: CustomEvent<DataTableEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    withoutUpdates(callback: (datatable: DataTable<T>) => void): void;
+    addEventListener<K extends keyof DataTableEventMap<T>>(type: K, listener: (this: DataTable<T>, ev: CustomEvent<DataTableEventMap<T>[K]>) => any, options?: boolean | AddEventListenerOptions): void;
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
 }
+type ColumnField<T> = NestedKeyOf<T>;
+type InternalClasses = Required<{
+    [K in keyof TableClasses]: string[];
+}>;
 /**
  * Defines the mapping between event names and their detail object types.
  */
-interface DataTableEventMap {
+interface DataTableEventMap<T> {
     'dt.row.clicked': {
-        row: any;
+        row: T;
         index: number;
         column: string | undefined;
         originalEvent: MouseEvent;
@@ -500,6 +491,12 @@ interface DataTableEventMap {
         order: string[];
     };
 }
+type RequiredOptions<T> = Required<Omit<TableOptions<T>, 'columns' | 'data' | 'rowFormatter' | 'classes'>> & Pick<TableOptions<T>, 'rowFormatter'> & {
+    classes: InternalClasses;
+    virtualScroll: number;
+};
+type UpdatableOptions<T> = Pick<TableOptions<T>, 'virtualScroll' | 'highlightSearch' | 'tokenizeSearch' | 'enableSearchScoring' | 'rearrangeable' | 'extraSearchFields' | 'noMatchText' | 'noDataText' | 'classes'>;
+type UpdateableColumnOptions<T> = Pick<ColumnOptions<T>, 'title' | 'searchable' | 'resizable' | 'sortable' | 'tokenize' | 'valueFormatter' | 'elementFormatter' | 'sorter'>;
 
 interface Options {
     saveColumnSorting: boolean;
@@ -507,14 +504,17 @@ interface Options {
     saveColumnVisibility: boolean;
     saveColumnWidth: boolean;
 }
-declare class LocalStorageAdapter {
+/**
+ * Monitors a {@link DataTable} instance for changes and saves the state to local storage.
+ */
+declare class LocalStorageAdapter<T> {
     #private;
     /**
      * @param dataTable - The DataTable instance to monitor.
      * @param storageKey - The key to use for saving the state in localStorage.
-     * @param options - The key to use for saving the state in localStorage.
+     * @param options - The options for configuring what is stored.
      */
-    constructor(dataTable: DataTable, storageKey: string, options?: Options);
+    constructor(dataTable: DataTable<T>, storageKey: string, options?: Options);
     /**
      * Saves the current column state to localStorage.
      */
@@ -529,4 +529,4 @@ declare class LocalStorageAdapter {
     clearState(): void;
 }
 
-export { type CellFormatterCallback, type ColumnFilterCallback, type ColumnOptions, type ColumnState, type ComparatorCallback, DataTable, type DataTableEventMap, type FilterCallback, type LoadOptions, LocalStorageAdapter, type QueryToken, type RowFormatterCallback, type SortOrder, type SortValueCallback, type TableClasses, type TableOptions, type TokenizerCallback, type ValueFormatterCallback, createRegexTokenizer };
+export { type CellFormatterCallback, type ColumnFilterCallback, type ColumnOptions, type ColumnState, type ComparatorCallback, DataTable, type DataTableEventMap, type FilterCallback, type Filters, type LoadOptions, LocalStorageAdapter, type QueryToken, type RowFormatterCallback, type SortOrder, type SortValueCallback, type TableClasses, type TableOptions, type TokenizerCallback, type ValueFormatterCallback, createRegexTokenizer };