@timlassiter11/yatl 1.0.6 → 1.0.7

package/dist/index.d.mts

@@ -9,6 +9,10 @@ type NestedKeyOf<ObjectType> = ObjectType extends object ? {
  * Default type for the table.
  */
 type UnspecifiedRecord = Record<string, any>;
+/**
+ * Record that maps a column's field to arbitrary data.
+ */
+type ColumnPropertyRecord<TData, TProp> = Partial<Record<NestedKeyOf<TData>, TProp>>;
 /**
  * Defines the possible sorting orders for columns.
  */
@@ -103,7 +107,7 @@ type ColumnFilterCallback = (value: unknown, filter: unknown) => boolean;
 /**
  * Represents the current sort state
  */
-interface SortState {
+type SortState = {
     /**
      * The sort order
      */
@@ -113,7 +117,7 @@ interface SortState {
      * Lower priority means
      */
     priority: number;
-}
+} | null;
 type ColumnRole = 'display' | 'internal';
 /**
  * Shared options between both internal and displayed columns.
@@ -337,6 +341,8 @@ declare const whitespaceTokenizer: (value: string) => {
     value: string;
     quoted: boolean;
 }[];
+declare function isInternalColumn<T>(col: ColumnOptions<T> | undefined | null): col is InternalColumnOptions<T>;
+declare function isDisplayColumn<T>(col: ColumnOptions<T> | undefined | null): col is DisplayColumnOptions<T>;
 
 /**
  * Represents a dynamic and interactive table with features like sorting, searching, filtering,
@@ -445,6 +451,10 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
      */
     get columns(): ColumnOptions<T>[];
     set columns(columns: ColumnOptions<T>[]);
+    /**
+     * Gets a list of columns with the display role
+     * **This will always be ordered by {@link YatlTable.columnOrder}**
+     */
     get displayColumns(): DisplayColumnOptions<T>[];
     /**
      * The current order of the columns.
@@ -456,38 +466,20 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
      * The current visibility state of all columns.
      * **This will always be ordered by {@link YatlTable.columnOrder}**
      */
-    get columnVisibility(): {
-        field: NestedKeyOf<T>;
-        visible: boolean;
-    }[];
-    set columnVisibility(columns: {
-        field: NestedKeyOf<T>;
-        visible: boolean;
-    }[]);
+    get columnVisibility(): Partial<Record<NestedKeyOf<T>, boolean>>;
+    set columnVisibility(columns: Partial<Record<NestedKeyOf<T>, boolean>>);
     /**
      * The current sort state of all columns.
      * **This will always be orderd by {@link YatlTable.columnOrder}**
      */
-    get columnSort(): {
-        field: NestedKeyOf<T>;
-        sort: SortState | null;
-    }[];
-    set columnSort(columns: {
-        field: NestedKeyOf<T>;
-        sort: SortState | null;
-    }[]);
+    get columnSort(): Partial<Record<NestedKeyOf<T>, SortState>>;
+    set columnSort(columns: Partial<Record<NestedKeyOf<T>, SortState>>);
     /**
      * The current width of all columns.
      * **This will always be ordered by {@link YatlTable.columnOrder}**
      */
-    get columnWidths(): {
-        field: NestedKeyOf<T>;
-        width: number | null;
-    }[];
-    set columnWidths(columns: {
-        field: NestedKeyOf<T>;
-        width: number | null;
-    }[]);
+    get columnWidths(): Partial<Record<NestedKeyOf<T>, number | null>>;
+    set columnWidths(columns: Partial<Record<NestedKeyOf<T>, number | null>>);
     /**
      * The current text string used to filter the table data.
      * Setting this property triggers a new search and render cycle.
@@ -666,6 +658,7 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
     private sortRows;
     private createMetadata;
     private updateInternalQuery;
+    private hasVisibleColumn;
     /**
      * Gets the width of each column in the
      * order they will appear in the grid.
@@ -710,8 +703,8 @@ interface EventMap<T> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'yatl-table': YatlTable;
+        'yatl-table': YatlTable<any>;
     }
 }
 
-export { type BaseColumnOptions, type CellPartsCallback, type CellRenderCallback, type ColumnFilterCallback, type ColumnInitOptions, type ColumnOptions, type ColumnRole, type ColumnState, type ComparatorCallback, type Compareable, type DisplayColumnOptions, type FilterCallback, type Filters, type InternalColumnOptions, type NestedKeyOf, type QueryToken, type RestorableColumnState, type RestorableTableState, type RowPartsCallback, type SortOrder, type SortState, type SortValueCallback, type StorageOptions, type TableState, type TokenizerCallback, type UnspecifiedRecord, type ValueFormatterCallback, YatlChangeEvent, YatlColumnReorderEvent, YatlColumnResizeEvent, YatlColumnToggleEvent, YatlEvent, YatlRowClickEvent, YatlSearchEvent, YatlSortEvent, YatlStateChangeEvent, YatlTable, createRegexTokenizer, whitespaceTokenizer };
+export { type BaseColumnOptions, type CellPartsCallback, type CellRenderCallback, type ColumnFilterCallback, type ColumnInitOptions, type ColumnOptions, type ColumnPropertyRecord, type ColumnRole, type ColumnState, type ComparatorCallback, type Compareable, type DisplayColumnOptions, type FilterCallback, type Filters, type InternalColumnOptions, type NestedKeyOf, type QueryToken, type RestorableColumnState, type RestorableTableState, type RowPartsCallback, type SortOrder, type SortState, type SortValueCallback, type StorageOptions, type TableState, type TokenizerCallback, type UnspecifiedRecord, type ValueFormatterCallback, YatlChangeEvent, YatlColumnReorderEvent, YatlColumnResizeEvent, YatlColumnToggleEvent, YatlEvent, YatlRowClickEvent, YatlSearchEvent, YatlSortEvent, YatlStateChangeEvent, YatlTable, createRegexTokenizer, isDisplayColumn, isInternalColumn, whitespaceTokenizer };

package/dist/index.d.ts

@@ -9,6 +9,10 @@ type NestedKeyOf<ObjectType> = ObjectType extends object ? {
  * Default type for the table.
  */
 type UnspecifiedRecord = Record<string, any>;
+/**
+ * Record that maps a column's field to arbitrary data.
+ */
+type ColumnPropertyRecord<TData, TProp> = Partial<Record<NestedKeyOf<TData>, TProp>>;
 /**
  * Defines the possible sorting orders for columns.
  */
@@ -103,7 +107,7 @@ type ColumnFilterCallback = (value: unknown, filter: unknown) => boolean;
 /**
  * Represents the current sort state
  */
-interface SortState {
+type SortState = {
     /**
      * The sort order
      */
@@ -113,7 +117,7 @@ interface SortState {
      * Lower priority means
      */
     priority: number;
-}
+} | null;
 type ColumnRole = 'display' | 'internal';
 /**
  * Shared options between both internal and displayed columns.
@@ -337,6 +341,8 @@ declare const whitespaceTokenizer: (value: string) => {
     value: string;
     quoted: boolean;
 }[];
+declare function isInternalColumn<T>(col: ColumnOptions<T> | undefined | null): col is InternalColumnOptions<T>;
+declare function isDisplayColumn<T>(col: ColumnOptions<T> | undefined | null): col is DisplayColumnOptions<T>;
 
 /**
  * Represents a dynamic and interactive table with features like sorting, searching, filtering,
@@ -445,6 +451,10 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
      */
     get columns(): ColumnOptions<T>[];
     set columns(columns: ColumnOptions<T>[]);
+    /**
+     * Gets a list of columns with the display role
+     * **This will always be ordered by {@link YatlTable.columnOrder}**
+     */
     get displayColumns(): DisplayColumnOptions<T>[];
     /**
      * The current order of the columns.
@@ -456,38 +466,20 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
      * The current visibility state of all columns.
      * **This will always be ordered by {@link YatlTable.columnOrder}**
      */
-    get columnVisibility(): {
-        field: NestedKeyOf<T>;
-        visible: boolean;
-    }[];
-    set columnVisibility(columns: {
-        field: NestedKeyOf<T>;
-        visible: boolean;
-    }[]);
+    get columnVisibility(): Partial<Record<NestedKeyOf<T>, boolean>>;
+    set columnVisibility(columns: Partial<Record<NestedKeyOf<T>, boolean>>);
     /**
      * The current sort state of all columns.
      * **This will always be orderd by {@link YatlTable.columnOrder}**
      */
-    get columnSort(): {
-        field: NestedKeyOf<T>;
-        sort: SortState | null;
-    }[];
-    set columnSort(columns: {
-        field: NestedKeyOf<T>;
-        sort: SortState | null;
-    }[]);
+    get columnSort(): Partial<Record<NestedKeyOf<T>, SortState>>;
+    set columnSort(columns: Partial<Record<NestedKeyOf<T>, SortState>>);
     /**
      * The current width of all columns.
      * **This will always be ordered by {@link YatlTable.columnOrder}**
      */
-    get columnWidths(): {
-        field: NestedKeyOf<T>;
-        width: number | null;
-    }[];
-    set columnWidths(columns: {
-        field: NestedKeyOf<T>;
-        width: number | null;
-    }[]);
+    get columnWidths(): Partial<Record<NestedKeyOf<T>, number | null>>;
+    set columnWidths(columns: Partial<Record<NestedKeyOf<T>, number | null>>);
     /**
      * The current text string used to filter the table data.
      * Setting this property triggers a new search and render cycle.
@@ -666,6 +658,7 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
     private sortRows;
     private createMetadata;
     private updateInternalQuery;
+    private hasVisibleColumn;
     /**
      * Gets the width of each column in the
      * order they will appear in the grid.
@@ -710,8 +703,8 @@ interface EventMap<T> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'yatl-table': YatlTable;
+        'yatl-table': YatlTable<any>;
     }
 }
 
-export { type BaseColumnOptions, type CellPartsCallback, type CellRenderCallback, type ColumnFilterCallback, type ColumnInitOptions, type ColumnOptions, type ColumnRole, type ColumnState, type ComparatorCallback, type Compareable, type DisplayColumnOptions, type FilterCallback, type Filters, type InternalColumnOptions, type NestedKeyOf, type QueryToken, type RestorableColumnState, type RestorableTableState, type RowPartsCallback, type SortOrder, type SortState, type SortValueCallback, type StorageOptions, type TableState, type TokenizerCallback, type UnspecifiedRecord, type ValueFormatterCallback, YatlChangeEvent, YatlColumnReorderEvent, YatlColumnResizeEvent, YatlColumnToggleEvent, YatlEvent, YatlRowClickEvent, YatlSearchEvent, YatlSortEvent, YatlStateChangeEvent, YatlTable, createRegexTokenizer, whitespaceTokenizer };
+export { type BaseColumnOptions, type CellPartsCallback, type CellRenderCallback, type ColumnFilterCallback, type ColumnInitOptions, type ColumnOptions, type ColumnPropertyRecord, type ColumnRole, type ColumnState, type ComparatorCallback, type Compareable, type DisplayColumnOptions, type FilterCallback, type Filters, type InternalColumnOptions, type NestedKeyOf, type QueryToken, type RestorableColumnState, type RestorableTableState, type RowPartsCallback, type SortOrder, type SortState, type SortValueCallback, type StorageOptions, type TableState, type TokenizerCallback, type UnspecifiedRecord, type ValueFormatterCallback, YatlChangeEvent, YatlColumnReorderEvent, YatlColumnResizeEvent, YatlColumnToggleEvent, YatlEvent, YatlRowClickEvent, YatlSearchEvent, YatlSortEvent, YatlStateChangeEvent, YatlTable, createRegexTokenizer, isDisplayColumn, isInternalColumn, whitespaceTokenizer };

package/dist/index.js

@@ -39,6 +39,8 @@ __export(src_exports, {
   YatlStateChangeEvent: () => YatlStateChangeEvent,
   YatlTable: () => YatlTable,
   createRegexTokenizer: () => createRegexTokenizer,
+  isDisplayColumn: () => isDisplayColumn,
+  isInternalColumn: () => isInternalColumn,
   whitespaceTokenizer: () => whitespaceTokenizer
 });
 module.exports = __toCommonJS(src_exports);
@@ -183,9 +185,6 @@ function getNestedValue(obj, path) {
   }
   return current;
 }
-function findColumn(field, columns) {
-  return columns.find((c) => c.field === field);
-}
 function highlightText(text, ranges) {
   if (!text || !ranges || ranges.length === 0) {
     return text;
@@ -227,6 +226,9 @@ function widthsToGridTemplates(widths, defaultWidth = "1fr") {
 function isCompareable(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date;
 }
+function isInternalColumn(col) {
+  return col?.role === "internal";
+}
 function isDisplayColumn(col) {
   return col?.role !== "internal";
 }
@@ -657,10 +659,11 @@ var YatlTable = class extends import_lit3.LitElement {
           this.resizeState.currentWidths[this.resizeState.columnIndex]
         );
         const columnWidths = this.columnWidths;
-        const state2 = findColumn(this.resizeState.columnField, columnWidths);
-        state2.width = finalWidth;
-        this.columnWidths = columnWidths;
-        this.dispatchEvent(new YatlColumnResizeEvent(state2.field, state2.width));
+        columnWidths[this.resizeState.columnField] = finalWidth;
+        this.columnWidths = { ...columnWidths };
+        this.dispatchEvent(
+          new YatlColumnResizeEvent(this.resizeState.columnField, finalWidth)
+        );
       }
       setTimeout(() => {
         this.resizeState = null;
@@ -767,8 +770,12 @@ var YatlTable = class extends import_lit3.LitElement {
     }
     this.requestUpdate("columns", oldValue);
   }
+  /**
+   * Gets a list of columns with the display role
+   * **This will always be ordered by {@link YatlTable.columnOrder}**
+   */
   get displayColumns() {
-    return this._columns.filter(isDisplayColumn);
+    return this.columnOrder.map((field) => this._columnDefinitionMap.get(field)).filter(isDisplayColumn);
   }
   get columnOrder() {
     const finalOrder = /* @__PURE__ */ new Set();
@@ -778,8 +785,8 @@ var YatlTable = class extends import_lit3.LitElement {
         finalOrder.add(field);
       }
     }
-    for (const col of this.displayColumns) {
-      if (!finalOrder.has(col.field)) {
+    for (const col of this.columns) {
+      if (isDisplayColumn(col) && !finalOrder.has(col.field)) {
         finalOrder.add(col.field);
       }
     }
@@ -794,19 +801,21 @@ var YatlTable = class extends import_lit3.LitElement {
     this.requestUpdate("columnOrder", oldValue);
   }
   get columnVisibility() {
-    return this.columnOrder.map((field) => ({
-      field,
-      visible: this.getOrCreateColumnState(field).visible
-    }));
+    const data = {};
+    for (const field of this.columnOrder) {
+      data[field] = this.getOrCreateColumnState(field).visible;
+    }
+    return data;
   }
   set columnVisibility(columns) {
     const oldValue = this.columnVisibility;
     let changed = false;
-    for (const column of columns) {
-      const columnState = this.getOrCreateColumnState(column.field);
-      if (columnState.visible !== column.visible) {
+    const entries = Object.entries(columns);
+    for (const [field, visible] of entries) {
+      const columnState = this.getOrCreateColumnState(field);
+      if (columnState.visible !== visible) {
         changed = true;
-        columnState.visible = column.visible;
+        columnState.visible = visible;
       }
     }
     if (!changed) {
@@ -815,24 +824,22 @@ var YatlTable = class extends import_lit3.LitElement {
     this.requestUpdate("columnVisibility", oldValue);
   }
   get columnSort() {
-    return this.columnOrder.map((field) => {
+    const data = {};
+    for (const field of this.columnOrder) {
       const sortState = this.getOrCreateColumnState(field).sort;
-      return {
-        field,
-        // We need to make a copy of sort state so
-        // if the user changes it, it doesn't change our copy.
-        sort: sortState ? { ...sortState } : null
-      };
-    });
+      data[field] = sortState ? { ...sortState } : null;
+    }
+    return data;
   }
   set columnSort(columns) {
     const oldValue = this.columnSort;
     let changed = false;
-    for (const column of columns) {
-      const columnState = this.getOrCreateColumnState(column.field);
-      if (columnState && (columnState.sort?.order !== column.sort?.order || columnState.sort?.priority !== column.sort?.priority)) {
+    const entries = Object.entries(columns);
+    for (const [field, state2] of entries) {
+      const columnState = this.getOrCreateColumnState(field);
+      if (columnState && (columnState.sort?.order !== state2?.order || columnState.sort?.priority !== state2?.priority)) {
         changed = true;
-        columnState.sort = column.sort;
+        columnState.sort = state2;
       }
     }
     if (!changed) {
@@ -842,19 +849,21 @@ var YatlTable = class extends import_lit3.LitElement {
     this.requestUpdate("columnSort", oldValue);
   }
   get columnWidths() {
-    return this.columnOrder.map((field) => ({
-      field,
-      width: this.getOrCreateColumnState(field).width
-    }));
+    const data = {};
+    for (const field of this.columnOrder) {
+      data[field] = this.getOrCreateColumnState(field).width;
+    }
+    return data;
   }
   set columnWidths(columns) {
     const oldValue = this.columnWidths;
     let changed = false;
-    for (const column of columns) {
-      const columnState = this.getOrCreateColumnState(column.field);
-      if (columnState.width !== column.width) {
+    const entries = Object.entries(columns);
+    for (const [field, width] of entries) {
+      const columnState = this.getOrCreateColumnState(field);
+      if (columnState.width !== width) {
         changed = true;
-        columnState.width = column.width;
+        columnState.width = width;
       }
     }
     if (!changed) {
@@ -1006,34 +1015,35 @@ var YatlTable = class extends import_lit3.LitElement {
    */
   sort(field, order, clear = true) {
     const sortStates = this.columnSort;
-    const state2 = findColumn(field, sortStates);
-    if (!state2) {
+    let state2 = sortStates[field];
+    if (state2 === void 0) {
       throw new Error(`Cannot get options for non-existent column "${field}"`);
     }
-    if (order === state2.sort?.order) {
+    if (order === state2?.order) {
       return;
     }
     if (!this.dispatchEvent(new YatlSortEvent(field, order))) {
       return;
     }
-    if (order && !state2.sort) {
-      const priorities = sortStates.map((col) => col.sort?.priority).filter((priority2) => priority2 !== void 0);
+    if (order && !state2) {
+      const priorities = [...this._columnStateMap.values()].map((state3) => state3.sort?.priority).filter((priority2) => priority2 !== void 0);
       const maxPriority = this.columns.length + 1;
       const priority = Math.min(maxPriority, ...priorities) - 1;
-      state2.sort = { order, priority };
-    } else if (order && state2.sort) {
-      state2.sort.order = order;
+      state2 = { order, priority };
+    } else if (order && state2) {
+      state2.order = order;
     } else {
-      state2.sort = null;
+      state2 = null;
     }
+    sortStates[field] = state2;
     if (clear) {
-      for (const state3 of sortStates) {
-        if (state3.field !== field) {
-          state3.sort = null;
+      for (const otherField of this.columnOrder) {
+        if (otherField !== field) {
+          sortStates[otherField] = null;
         }
       }
     }
-    this.columnSort = [...sortStates];
+    this.columnSort = { ...sortStates };
   }
   /**
    * Sets the visibility of a specified column.
@@ -1042,18 +1052,18 @@ var YatlTable = class extends import_lit3.LitElement {
    */
   setColumnVisibility(field, visible) {
     const visibilityStates = this.columnVisibility;
-    const state2 = findColumn(field, visibilityStates);
-    if (!state2) {
+    const currentVisibility = visibilityStates[field];
+    if (currentVisibility === void 0) {
       throw new Error(`Cannot get options for non-existent column "${field}"`);
     }
-    if (state2.visible === visible) {
+    if (currentVisibility === visible) {
       return;
     }
     if (!this.dispatchEvent(new YatlColumnToggleEvent(field, visible))) {
       return;
     }
-    state2.visible = visible;
-    this.columnVisibility = [...visibilityStates];
+    visibilityStates[field] = visible;
+    this.columnVisibility = { ...visibilityStates };
   }
   /**
    * Toggles the visibility of hte specified column
@@ -1085,7 +1095,9 @@ var YatlTable = class extends import_lit3.LitElement {
   export(filename, all = false) {
     const data = all ? this.data : this.filteredData;
     const columnData = this.displayColumns;
-    const csvHeaders = columnData.filter((column) => all || this.getOrCreateColumnState(column.field).visible).map((column) => `"${column.title}"`).join(",");
+    const csvHeaders = columnData.filter(
+      (column) => all || this.getOrCreateColumnState(column.field).visible
+    ).map((column) => `"${column.title}"`).join(",");
     const csvRows = data.map((row) => {
       const list = [];
       for (const column of columnData) {
@@ -1284,9 +1296,9 @@ var YatlTable = class extends import_lit3.LitElement {
   }
   renderHeader() {
     const classes = {
-      "header": true,
-      "row": true,
-      "reorderable": this.enableColumnReorder
+      header: true,
+      row: true,
+      reorderable: this.enableColumnReorder
     };
     return import_lit3.html`
       <div part="header" class=${(0, import_class_map.classMap)(classes)}>
@@ -1353,7 +1365,7 @@ var YatlTable = class extends import_lit3.LitElement {
     `;
   }
   renderBody() {
-    if (this.columnWidths.length === 0) {
+    if (!this.hasVisibleColumn()) {
       return import_lit3.html`
         <div part="message" class="message">No visible columns.</div>
       `;
@@ -1417,11 +1429,8 @@ var YatlTable = class extends import_lit3.LitElement {
         class="table"
         style=${(0, import_style_map.styleMap)({ "--grid-template": gridTemplate })}
       >
-        ${this.renderHeader()} 
-        <slot>
-          ${this.renderBody()}
-          ${this.renderFooter()}
-        </slot>
+        ${this.renderHeader()}
+        <slot> ${this.renderBody()} ${this.renderFooter()} </slot>
       </div>
     `;
   }
@@ -1734,6 +1743,9 @@ var YatlTable = class extends import_lit3.LitElement {
       this.queryTokens.push(...this.searchTokenizer(this.searchQuery));
     }
   }
+  hasVisibleColumn() {
+    return this.columnOrder.map((field) => this.getOrCreateColumnState(field)).filter((state2) => state2.visible).length > 0;
+  }
   /**
    * Gets the width of each column in the
    * order they will appear in the grid.
@@ -1983,6 +1995,8 @@ YatlTable = __decorateClass([
   YatlStateChangeEvent,
   YatlTable,
   createRegexTokenizer,
+  isDisplayColumn,
+  isInternalColumn,
   whitespaceTokenizer
 });
 //# sourceMappingURL=index.js.map