@timlassiter11/yatl 0.3.3 → 0.3.5

package/dist/data-table.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:"\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}
+.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;table-layout:fixed}.dt-scroller{max-width:100%;max-height:100%;overflow:auto;position:relative}.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=data-table.css.map */

package/dist/data-table.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/data-table/data-table.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":[]}
+{"version":3,"sources":["../src/data-table/data-table.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  table-layout: fixed;\n}\n\n.dt-scroller {\n  max-width: 100%;\n  max-height: 100%;\n  overflow: auto;\n  position: relative;\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,aAAc,KAChB,CAEA,CAAC,YACC,UAAW,KACX,WAAY,KACZ,SAAU,KACV,SAAU,QACZ,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,QAhDd,QAiDW,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,CAhGC,UAgGW,CAAE,KAAM,CAAE,EAAG,CAAE,GAC3B,CAAC,gBACC,cAAe,SACf,YAAa,OACb,SAAU,MACZ,CAEA,CAAC,SACC,WAAY,OACZ,eAAgB,IAClB","names":[]}

package/dist/data-table.d.mts

@@ -28,7 +28,7 @@ interface IVirtualScrollConstructor {
 interface LoadOptions {
     /** If the data should replace or be added to the end of the current data */
     append?: boolean;
-    /** If the current scroll position should be kepts */
+    /** If the current scroll position should be kept */
     keepScroll?: boolean;
 }
 /**
@@ -40,21 +40,22 @@ type SortOrder = 'asc' | 'desc';
  * @param row - The row data.
  * @param element - The row element.
  */
-type RowFormatterCallback<T extends object> = (row: T, 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<T extends object> = (value: any, row: T) => string;
+type ValueFormatterCallback<T> = (value: any, row: T) => string | null;
 /**
  * Callback for formatting a cell's HTML element.
+ * Called when the cell is created but NOT when exporting to CSV.
  * @param value - The value of the field.
  * @param row - The row data.
  * @param element - The cell element.
  */
-type CellFormatterCallback<T extends object> = (value: any, row: T, element: HTMLElement) => void;
+type CellFormatterCallback<T> = (value: any, row: T, element: HTMLElement) => void;
 /**
  * Callback for comparing two values.
  * @param a - The first value.
@@ -74,7 +75,7 @@ type SortValueCallback = (value: any) => number | string;
  * and the values used to compare against.
  */
 type Filters<T extends object> = Partial<{
-    [K in keyof T]: any;
+    [K in NestedKeyOf<T>]: any;
 }>;
 /**
  * A single query token derived from a larger string
@@ -102,7 +103,7 @@ type TokenizerCallback = (value: any) => QueryToken[];
  * @param index - The index of the row.
  * @returns True if the row matches the filter, false otherwise.
  */
-type FilterCallback = (row: any, index: number) => boolean;
+type FilterCallback<T> = (row: T, index: number) => boolean;
 /**
  * Callback for filtering a field value against the filter data.
  * @param value - The value to filter.
@@ -110,6 +111,20 @@ type FilterCallback = (row: any, index: number) => boolean;
  * @returns True if the value matches the filter, false otherwise.
  */
 type ColumnFilterCallback = (value: any, filter: any) => boolean;
+/**
+ * Represents the current sort state
+ */
+interface SortState {
+    /**
+     * The sort order
+     */
+    order: SortOrder;
+    /**
+     * The sort priority.
+     * Lower priority means
+     */
+    priority: number;
+}
 /**
  * Column options for the table.
  */
@@ -134,13 +149,8 @@ interface ColumnOptions<T extends object> {
      * Whether the column's data should be tokenized for searching.
      */
     tokenize?: boolean;
-    /**
-     * Whether the column should be visible by default.
-     */
-    visible?: boolean;
     /**
      * Whether the column should be resizable.
-     * Defaults to the table's resizable option.
      */
     resizable?: boolean;
     /**
@@ -167,6 +177,27 @@ interface ColumnOptions<T extends object> {
      */
     filter?: ColumnFilterCallback | null;
 }
+/**
+ * Represents the current state of a column.
+ */
+interface ColumnState<T extends object> {
+    /**
+     * The unique field name of the column.
+     */
+    field: NestedKeyOf<T>;
+    /**
+     * The current visibility of the column.
+     */
+    visible: boolean;
+    /**
+     * The current sort order of the column.
+     */
+    sortState?: SortState | null;
+    /**
+     * The currently set width of the column in pixels.
+     */
+    width?: number | null;
+}
 /**
  * Defines CSS classes to be applied to different parts of the table.
  */
@@ -204,10 +235,6 @@ interface TableClasses {
  * Options for configuring the table.
  */
 interface TableOptions<T extends object> {
-    /**
-     * Data to load into the table
-     */
-    data?: T[];
     /**
      * Configures virtual scrolling.
      */
@@ -225,16 +252,6 @@ interface TableOptions<T extends object> {
      * Scoring is very computationally expensive...
      */
     enableSearchScoring?: boolean;
-    /**
-     * Whether columns should be sortable by default.
-     * Can be overridden on individual columns.
-     */
-    sortable?: boolean;
-    /**
-     * Whether columns should be resizable by default.
-     * Can be overridden on individual columns.
-     */
-    resizable?: boolean;
     /**
      * Whether columns should be rearrangeable by drag and drop.
      */
@@ -244,6 +261,10 @@ interface TableOptions<T extends object> {
      * Used for fields that are not displayed as columns.
      */
     extraSearchFields?: NestedKeyOf<T>[];
+    /**
+     * A placeholder to use for null or undefined values.
+     */
+    emptyValuePlaceholder?: string;
     /**
      * The text to display when there is no data in the table.
      */
@@ -264,53 +285,37 @@ interface TableOptions<T extends object> {
      * A function to use for tokenizing values for searching.
      */
     tokenizer?: TokenizerCallback;
+    /**
+     * A specific virtual scroll class to use
+     */
     virtualScrollClass?: IVirtualScrollConstructor;
 }
 /**
- * Represents the current sort state
+ * Represents the current state of the table
  */
-interface SortState {
-    /**
-     * The sort order
-     */
-    order: SortOrder;
-    /**
-     * The sort priority.
-     * Lower priority means
-     */
-    priority: number;
-}
-/** Represents the current state of a column, often used for saving and restoring column configurations. */
-interface ColumnState<T extends object> {
+interface TableState<T extends object> {
     /**
-     * The unique field name of the column.
+     * A list of {@link ColumnState}s representing all of the columns in the table.
      */
-    field: NestedKeyOf<T>;
+    columns: ColumnState<T>[];
     /**
-     * The user friendly title of the column.
+     * The current query applied to the table or null if no query is applied.
      */
-    title: string;
+    searchQuery: string | RegExp | null;
     /**
-     * The current visibility of the column.
+     * The current filters applied to the table or null if no filters are applied.
      */
-    visible: boolean;
+    filters: Filters<T> | FilterCallback<T> | null;
     /**
-     * The current sort order of the column.
+     * The current scroll position of the table
      */
-    sortState: SortState | null;
-    /**
-     * The currently set width of the column.
-     */
-    width: string;
-}
-interface TableState<T extends object> {
-    columns: ColumnState<T>[];
-    searchQuery?: string | RegExp;
-    filters?: Filters<T> | FilterCallback;
     scrollPosition: {
         top: number;
         left: number;
     };
+    /**
+     * The current column order represented as a list of their fields from left to right.
+     */
     columnOrder: NestedKeyOf<T>[];
 }
 type RestorableColumnState<T extends object> = Partial<Omit<ColumnState<T>, 'field'>> & Pick<ColumnState<T>, 'field'>;
@@ -353,11 +358,11 @@ declare class DataTable<T extends object> extends EventTarget {
      * @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, columns: ColumnOptions<T>[], options?: TableOptions<T>);
+    constructor(table: string | HTMLTableElement, columns: ColumnInitOptions<T>[], options?: TableInitOptions<T>);
     /**
      * Gets the current options applied to the table.
      */
-    get tableOptions(): RequiredTableOptions<T>;
+    get tableOptions(): ConcreteTableOptions<T>;
     /**
      * Gets the currently filtered and sorted rows displayed in the table.
      */
@@ -380,8 +385,8 @@ declare class DataTable<T extends object> extends EventTarget {
      */
     restoreState(state: RestorableTableState<T>): void;
     updateTableOptions(options: UpdatableTableOptions<T>): void;
-    getColumnOptions(column: NestedKeyOf<T>): Required<Omit<ColumnOptions<T>, "field">>;
-    updateColumnOptions(column: NestedKeyOf<T>, options: UpdateableColumnOptions<T>): void;
+    getColumnOptions(column: NestedKeyOf<T>): Required<ColumnOptionsWithoutField<T>>;
+    updateColumnOptions(column: NestedKeyOf<T>, options: ColumnOptionsWithoutField<T>): void;
     /**
      * Loads data into the table
      * @param rows - An array of data to be loaded
@@ -404,7 +409,7 @@ declare class DataTable<T extends object> extends EventTarget {
      * The search is performed on columns marked as `searchable` and `extraSearchFields`.
      * @param query - The search term (string) or a regular expression. An empty string clears the search.
      */
-    search(query?: string | RegExp): void;
+    search(query?: string | RegExp | null): void;
     /**
      * Applies filters to the table rows.
      * Filters can be an object where keys are field names and values are the criteria to filter by,
@@ -412,7 +417,7 @@ declare class DataTable<T extends object> 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?: Filters<T> | FilterCallback): void;
+    filter(filters?: Filters<T> | FilterCallback<T> | null): void;
     /**
      * Sorts the table by a specified column and order.
      * If `order` is `null`, the sort on this column is removed.
@@ -504,7 +509,22 @@ declare class DataTable<T extends object> extends EventTarget {
     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;
+    private readonly TABLE_OPTION_CONFIGS;
+    private readonly COLUMN_OPTION_CONFIGS;
 }
+type TableInitOptions<T extends object> = TableOptions<T> & {
+    data?: T[];
+};
+type ColumnInitOptions<T extends object> = ColumnOptions<T> & Partial<ColumnState<T>>;
+type ConcreteTableClasses = Required<{
+    [K in keyof TableClasses]: string[];
+}>;
+type ConcreteTableOptions<T extends object> = Required<Omit<TableOptions<T>, 'data' | 'classes' | 'virtualScroll'>> & {
+    classes: ConcreteTableClasses;
+    virtualScroll: number;
+};
+type UpdatableTableOptions<T extends object> = TableOptions<T>;
+type ColumnOptionsWithoutField<T extends object> = Omit<ColumnOptions<T>, 'field'>;
 /**
  * Defines the mapping between event names and their detail object types.
  */
@@ -537,15 +557,6 @@ interface DataTableEventMap<T> {
         query: string | RegExp | null;
     };
 }
-type ConcreteTableClasses = Required<{
-    [K in keyof TableClasses]: string[];
-}>;
-type RequiredTableOptions<T extends object> = Required<Omit<TableOptions<T>, 'data' | 'classes' | 'virtualScroll'>> & {
-    classes: ConcreteTableClasses;
-    virtualScroll: number;
-};
-type UpdateableColumnOptions<T extends object> = Pick<ColumnOptions<T>, 'title' | 'searchable' | 'resizable' | 'sortable' | 'tokenize' | 'valueFormatter' | 'elementFormatter' | 'sorter'>;
-type UpdatableTableOptions<T extends object> = Pick<TableOptions<T>, 'virtualScroll' | 'highlightSearch' | 'tokenizeSearch' | 'enableSearchScoring' | 'rearrangeable' | 'extraSearchFields' | 'noMatchText' | 'noDataText' | 'classes'>;
 
 declare class VirtualScroll implements IVirtualScroll {
     #private;
@@ -567,7 +578,6 @@ declare class VirtualScrollError extends Error {
 
 interface LocalStorageAdapterOptions {
     saveSearch?: boolean;
-    saveColumnTitle?: boolean;
     saveColumnSorting?: boolean;
     saveColumnOrder?: boolean;
     saveColumnVisibility?: boolean;

package/dist/data-table.d.ts

@@ -28,7 +28,7 @@ interface IVirtualScrollConstructor {
 interface LoadOptions {
     /** If the data should replace or be added to the end of the current data */
     append?: boolean;
-    /** If the current scroll position should be kepts */
+    /** If the current scroll position should be kept */
     keepScroll?: boolean;
 }
 /**
@@ -40,21 +40,22 @@ type SortOrder = 'asc' | 'desc';
  * @param row - The row data.
  * @param element - The row element.
  */
-type RowFormatterCallback<T extends object> = (row: T, 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<T extends object> = (value: any, row: T) => string;
+type ValueFormatterCallback<T> = (value: any, row: T) => string | null;
 /**
  * Callback for formatting a cell's HTML element.
+ * Called when the cell is created but NOT when exporting to CSV.
  * @param value - The value of the field.
  * @param row - The row data.
  * @param element - The cell element.
  */
-type CellFormatterCallback<T extends object> = (value: any, row: T, element: HTMLElement) => void;
+type CellFormatterCallback<T> = (value: any, row: T, element: HTMLElement) => void;
 /**
  * Callback for comparing two values.
  * @param a - The first value.
@@ -74,7 +75,7 @@ type SortValueCallback = (value: any) => number | string;
  * and the values used to compare against.
  */
 type Filters<T extends object> = Partial<{
-    [K in keyof T]: any;
+    [K in NestedKeyOf<T>]: any;
 }>;
 /**
  * A single query token derived from a larger string
@@ -102,7 +103,7 @@ type TokenizerCallback = (value: any) => QueryToken[];
  * @param index - The index of the row.
  * @returns True if the row matches the filter, false otherwise.
  */
-type FilterCallback = (row: any, index: number) => boolean;
+type FilterCallback<T> = (row: T, index: number) => boolean;
 /**
  * Callback for filtering a field value against the filter data.
  * @param value - The value to filter.
@@ -110,6 +111,20 @@ type FilterCallback = (row: any, index: number) => boolean;
  * @returns True if the value matches the filter, false otherwise.
  */
 type ColumnFilterCallback = (value: any, filter: any) => boolean;
+/**
+ * Represents the current sort state
+ */
+interface SortState {
+    /**
+     * The sort order
+     */
+    order: SortOrder;
+    /**
+     * The sort priority.
+     * Lower priority means
+     */
+    priority: number;
+}
 /**
  * Column options for the table.
  */
@@ -134,13 +149,8 @@ interface ColumnOptions<T extends object> {
      * Whether the column's data should be tokenized for searching.
      */
     tokenize?: boolean;
-    /**
-     * Whether the column should be visible by default.
-     */
-    visible?: boolean;
     /**
      * Whether the column should be resizable.
-     * Defaults to the table's resizable option.
      */
     resizable?: boolean;
     /**
@@ -167,6 +177,27 @@ interface ColumnOptions<T extends object> {
      */
     filter?: ColumnFilterCallback | null;
 }
+/**
+ * Represents the current state of a column.
+ */
+interface ColumnState<T extends object> {
+    /**
+     * The unique field name of the column.
+     */
+    field: NestedKeyOf<T>;
+    /**
+     * The current visibility of the column.
+     */
+    visible: boolean;
+    /**
+     * The current sort order of the column.
+     */
+    sortState?: SortState | null;
+    /**
+     * The currently set width of the column in pixels.
+     */
+    width?: number | null;
+}
 /**
  * Defines CSS classes to be applied to different parts of the table.
  */
@@ -204,10 +235,6 @@ interface TableClasses {
  * Options for configuring the table.
  */
 interface TableOptions<T extends object> {
-    /**
-     * Data to load into the table
-     */
-    data?: T[];
     /**
      * Configures virtual scrolling.
      */
@@ -225,16 +252,6 @@ interface TableOptions<T extends object> {
      * Scoring is very computationally expensive...
      */
     enableSearchScoring?: boolean;
-    /**
-     * Whether columns should be sortable by default.
-     * Can be overridden on individual columns.
-     */
-    sortable?: boolean;
-    /**
-     * Whether columns should be resizable by default.
-     * Can be overridden on individual columns.
-     */
-    resizable?: boolean;
     /**
      * Whether columns should be rearrangeable by drag and drop.
      */
@@ -244,6 +261,10 @@ interface TableOptions<T extends object> {
      * Used for fields that are not displayed as columns.
      */
     extraSearchFields?: NestedKeyOf<T>[];
+    /**
+     * A placeholder to use for null or undefined values.
+     */
+    emptyValuePlaceholder?: string;
     /**
      * The text to display when there is no data in the table.
      */
@@ -264,53 +285,37 @@ interface TableOptions<T extends object> {
      * A function to use for tokenizing values for searching.
      */
     tokenizer?: TokenizerCallback;
+    /**
+     * A specific virtual scroll class to use
+     */
     virtualScrollClass?: IVirtualScrollConstructor;
 }
 /**
- * Represents the current sort state
+ * Represents the current state of the table
  */
-interface SortState {
-    /**
-     * The sort order
-     */
-    order: SortOrder;
-    /**
-     * The sort priority.
-     * Lower priority means
-     */
-    priority: number;
-}
-/** Represents the current state of a column, often used for saving and restoring column configurations. */
-interface ColumnState<T extends object> {
+interface TableState<T extends object> {
     /**
-     * The unique field name of the column.
+     * A list of {@link ColumnState}s representing all of the columns in the table.
      */
-    field: NestedKeyOf<T>;
+    columns: ColumnState<T>[];
     /**
-     * The user friendly title of the column.
+     * The current query applied to the table or null if no query is applied.
      */
-    title: string;
+    searchQuery: string | RegExp | null;
     /**
-     * The current visibility of the column.
+     * The current filters applied to the table or null if no filters are applied.
      */
-    visible: boolean;
+    filters: Filters<T> | FilterCallback<T> | null;
     /**
-     * The current sort order of the column.
+     * The current scroll position of the table
      */
-    sortState: SortState | null;
-    /**
-     * The currently set width of the column.
-     */
-    width: string;
-}
-interface TableState<T extends object> {
-    columns: ColumnState<T>[];
-    searchQuery?: string | RegExp;
-    filters?: Filters<T> | FilterCallback;
     scrollPosition: {
         top: number;
         left: number;
     };
+    /**
+     * The current column order represented as a list of their fields from left to right.
+     */
     columnOrder: NestedKeyOf<T>[];
 }
 type RestorableColumnState<T extends object> = Partial<Omit<ColumnState<T>, 'field'>> & Pick<ColumnState<T>, 'field'>;
@@ -353,11 +358,11 @@ declare class DataTable<T extends object> extends EventTarget {
      * @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, columns: ColumnOptions<T>[], options?: TableOptions<T>);
+    constructor(table: string | HTMLTableElement, columns: ColumnInitOptions<T>[], options?: TableInitOptions<T>);
     /**
      * Gets the current options applied to the table.
      */
-    get tableOptions(): RequiredTableOptions<T>;
+    get tableOptions(): ConcreteTableOptions<T>;
     /**
      * Gets the currently filtered and sorted rows displayed in the table.
      */
@@ -380,8 +385,8 @@ declare class DataTable<T extends object> extends EventTarget {
      */
     restoreState(state: RestorableTableState<T>): void;
     updateTableOptions(options: UpdatableTableOptions<T>): void;
-    getColumnOptions(column: NestedKeyOf<T>): Required<Omit<ColumnOptions<T>, "field">>;
-    updateColumnOptions(column: NestedKeyOf<T>, options: UpdateableColumnOptions<T>): void;
+    getColumnOptions(column: NestedKeyOf<T>): Required<ColumnOptionsWithoutField<T>>;
+    updateColumnOptions(column: NestedKeyOf<T>, options: ColumnOptionsWithoutField<T>): void;
     /**
      * Loads data into the table
      * @param rows - An array of data to be loaded
@@ -404,7 +409,7 @@ declare class DataTable<T extends object> extends EventTarget {
      * The search is performed on columns marked as `searchable` and `extraSearchFields`.
      * @param query - The search term (string) or a regular expression. An empty string clears the search.
      */
-    search(query?: string | RegExp): void;
+    search(query?: string | RegExp | null): void;
     /**
      * Applies filters to the table rows.
      * Filters can be an object where keys are field names and values are the criteria to filter by,
@@ -412,7 +417,7 @@ declare class DataTable<T extends object> 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?: Filters<T> | FilterCallback): void;
+    filter(filters?: Filters<T> | FilterCallback<T> | null): void;
     /**
      * Sorts the table by a specified column and order.
      * If `order` is `null`, the sort on this column is removed.
@@ -504,7 +509,22 @@ declare class DataTable<T extends object> extends EventTarget {
     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;
+    private readonly TABLE_OPTION_CONFIGS;
+    private readonly COLUMN_OPTION_CONFIGS;
 }
+type TableInitOptions<T extends object> = TableOptions<T> & {
+    data?: T[];
+};
+type ColumnInitOptions<T extends object> = ColumnOptions<T> & Partial<ColumnState<T>>;
+type ConcreteTableClasses = Required<{
+    [K in keyof TableClasses]: string[];
+}>;
+type ConcreteTableOptions<T extends object> = Required<Omit<TableOptions<T>, 'data' | 'classes' | 'virtualScroll'>> & {
+    classes: ConcreteTableClasses;
+    virtualScroll: number;
+};
+type UpdatableTableOptions<T extends object> = TableOptions<T>;
+type ColumnOptionsWithoutField<T extends object> = Omit<ColumnOptions<T>, 'field'>;
 /**
  * Defines the mapping between event names and their detail object types.
  */
@@ -537,15 +557,6 @@ interface DataTableEventMap<T> {
         query: string | RegExp | null;
     };
 }
-type ConcreteTableClasses = Required<{
-    [K in keyof TableClasses]: string[];
-}>;
-type RequiredTableOptions<T extends object> = Required<Omit<TableOptions<T>, 'data' | 'classes' | 'virtualScroll'>> & {
-    classes: ConcreteTableClasses;
-    virtualScroll: number;
-};
-type UpdateableColumnOptions<T extends object> = Pick<ColumnOptions<T>, 'title' | 'searchable' | 'resizable' | 'sortable' | 'tokenize' | 'valueFormatter' | 'elementFormatter' | 'sorter'>;
-type UpdatableTableOptions<T extends object> = Pick<TableOptions<T>, 'virtualScroll' | 'highlightSearch' | 'tokenizeSearch' | 'enableSearchScoring' | 'rearrangeable' | 'extraSearchFields' | 'noMatchText' | 'noDataText' | 'classes'>;
 
 declare class VirtualScroll implements IVirtualScroll {
     #private;
@@ -567,7 +578,6 @@ declare class VirtualScrollError extends Error {
 
 interface LocalStorageAdapterOptions {
     saveSearch?: boolean;
-    saveColumnTitle?: boolean;
     saveColumnSorting?: boolean;
     saveColumnOrder?: boolean;
     saveColumnVisibility?: boolean;