@timlassiter11/yatl 0.3.22 → 1.0.1

package/dist/index.mjs

@@ -0,0 +1,1933 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/events.ts
+var YatlEvent = class extends CustomEvent {
+  constructor(name, detail, options = {}) {
+    super(name, {
+      bubbles: true,
+      composed: true,
+      cancelable: false,
+      ...options,
+      detail
+    });
+  }
+};
+var _YatlRowClickEvent = class _YatlRowClickEvent extends YatlEvent {
+  constructor(row, index, field, originalEvent) {
+    super(_YatlRowClickEvent.EVENT_NAME, {
+      row,
+      index,
+      field,
+      originalEvent
+    });
+  }
+};
+_YatlRowClickEvent.EVENT_NAME = "yatl-row-click";
+var YatlRowClickEvent = _YatlRowClickEvent;
+var _YatlChangeEvent = class _YatlChangeEvent extends YatlEvent {
+  constructor(data) {
+    super(_YatlChangeEvent.EVENT_NAME, { data });
+  }
+};
+_YatlChangeEvent.EVENT_NAME = "yatl-change";
+var YatlChangeEvent = _YatlChangeEvent;
+var _YatlSortEvent = class _YatlSortEvent extends YatlEvent {
+  constructor(field, order) {
+    super(
+      _YatlSortEvent.EVENT_NAME,
+      {
+        field,
+        order
+      },
+      {
+        cancelable: true
+      }
+    );
+  }
+};
+_YatlSortEvent.EVENT_NAME = "yatl-sort";
+var YatlSortEvent = _YatlSortEvent;
+var _YatlColumnToggleEvent = class _YatlColumnToggleEvent extends YatlEvent {
+  constructor(field, visible) {
+    super(
+      _YatlColumnToggleEvent.EVENT_NAME,
+      {
+        field,
+        visible
+      },
+      {
+        cancelable: true
+      }
+    );
+  }
+};
+_YatlColumnToggleEvent.EVENT_NAME = "yatl-column-toggle";
+var YatlColumnToggleEvent = _YatlColumnToggleEvent;
+var _YatlColumnResizeEvent = class _YatlColumnResizeEvent extends YatlEvent {
+  constructor(field, width) {
+    super(_YatlColumnResizeEvent.EVENT_NAME, {
+      field,
+      width
+    });
+  }
+};
+_YatlColumnResizeEvent.EVENT_NAME = "yatl-column-resize";
+var YatlColumnResizeEvent = _YatlColumnResizeEvent;
+var _YatlColumnReorderEvent = class _YatlColumnReorderEvent extends YatlEvent {
+  constructor(draggedColumn, droppedColumn, order) {
+    super(
+      _YatlColumnReorderEvent.EVENT_NAME,
+      {
+        draggedColumn,
+        droppedColumn,
+        order
+      },
+      {
+        cancelable: true
+      }
+    );
+  }
+};
+_YatlColumnReorderEvent.EVENT_NAME = "yatl-column-reorder";
+var YatlColumnReorderEvent = _YatlColumnReorderEvent;
+var _YatlSearchEvent = class _YatlSearchEvent extends YatlEvent {
+  constructor(query2) {
+    super(_YatlSearchEvent.EVENT_NAME, { query: query2 });
+  }
+};
+_YatlSearchEvent.EVENT_NAME = "yatl-search";
+var YatlSearchEvent = _YatlSearchEvent;
+var _YatlStateChangeEvent = class _YatlStateChangeEvent extends YatlEvent {
+  constructor(state2, triggers) {
+    super(_YatlStateChangeEvent.EVENT_NAME, { state: state2, triggers });
+    this.triggers = triggers;
+  }
+};
+_YatlStateChangeEvent.EVENT_NAME = "yatl-state-change";
+var YatlStateChangeEvent = _YatlStateChangeEvent;
+
+// src/utils.ts
+import { html } from "lit";
+var toHumanReadable = (str) => {
+  return str.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (char) => char.toUpperCase());
+};
+var createRegexTokenizer = (exp = "\\S+") => {
+  const regex = new RegExp(`"[^"]*"|${exp}`, "g");
+  return (value) => {
+    const matches = value.match(regex) || [];
+    return matches.map((token) => {
+      token = token.toLocaleLowerCase().trim();
+      if (token.startsWith('"') && token.endsWith('"')) {
+        return { value: token.slice(1, -1), quoted: true };
+      }
+      return { value: token, quoted: false };
+    });
+  };
+};
+var whitespaceTokenizer = createRegexTokenizer();
+function isValidKey(key, obj) {
+  return key in obj;
+}
+function getNestedValue(obj, path) {
+  const keys = path.split(".");
+  let current = obj;
+  for (const key of keys) {
+    if (current && isValidKey(key, current)) {
+      current = current[key];
+    } else {
+      return void 0;
+    }
+  }
+  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;
+  }
+  const sortedRanges = [...ranges].sort((a, b) => a[0] - b[0]);
+  const mergedRanges = [];
+  let currentRange = sortedRanges[0];
+  for (let i = 1; i < sortedRanges.length; i++) {
+    const nextRange = sortedRanges[i];
+    if (nextRange[0] < currentRange[1]) {
+      currentRange[1] = Math.max(currentRange[1], nextRange[1]);
+    } else {
+      mergedRanges.push(currentRange);
+      currentRange = nextRange;
+    }
+  }
+  mergedRanges.push(currentRange);
+  const result = [];
+  let lastIndex = 0;
+  for (const [start, end] of mergedRanges) {
+    const safeStart = Math.max(0, Math.min(start, text.length));
+    const safeEnd = Math.max(0, Math.min(end, text.length));
+    if (safeStart > lastIndex) {
+      result.push(text.slice(lastIndex, safeStart));
+    }
+    result.push(
+      html`<mark class="highlight">${text.slice(safeStart, safeEnd)}</mark>`
+    );
+    lastIndex = safeEnd;
+  }
+  if (lastIndex < text.length) {
+    result.push(text.slice(lastIndex));
+  }
+  return html`${result}`;
+}
+function widthsToGridTemplates(widths, defaultWidth = "1fr") {
+  return widths.map((width) => width ? `${width}px` : defaultWidth);
+}
+function isCompareable(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date;
+}
+
+// src/yatl-table.ts
+import { html as html2, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
+import "@lit-labs/virtualizer";
+
+// src/yatl-table.styles.ts
+import { css } from "lit";
+var yatl_table_styles_default = css`
+  /* Style declarations */
+  :host {
+    /* Typography */
+    --yatl-font-family: var(
+      --yatl-table-font,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Helvetica,
+      Arial,
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji'
+    );
+    --yatl-font-size: var(--yatl-table-font-size, 0.875rem);
+    --yatl-line-height: var(--yatl-table-line-height, 1.25rem);
+
+    /* Spacing */
+    --yatl-cell-padding: var(--yatl-table-cell-padding, 10px 16px);
+    --yatl-header-padding: var(--yatl-table-header-padding, 12px 16px);
+
+    /* Colors */
+    --yatl-bg: var(--yatl-table-bg, #ffffff);
+    --yatl-text: var(--yatl-table-text, #0f172a);
+    --yatl-text-muted: var(--yatl-table-text-muted, #64748b);
+    --yatl-border-color: var(--yatl-table-border-color, #e2e8f0);
+
+    --yatl-header-bg: var(--yatl-table-header-bg, #f8fafc);
+    --yatl-header-text: var(--yatl-table-header-text, #475569);
+
+    --yatl-row-hover-bg: var(--yatl-table-row-hover-bg, #f1f5f9);
+    --yatl-row-selected-bg: var(--yatl-table-row-selected-bg, #e0f2fe);
+
+    /* Resize grab handle width */
+    --yatl-resizer-width: 10px;
+    /* z-index for the header */
+    --header-z-index: 2;
+    /* Drop target background color */
+    --header-drop-color: rgba(255, 255, 255, 0.1);
+
+    font-family: var(--yatl-font-family);
+    font-size: var(--yatl-font-size);
+    color: var(--yatl-text);
+  }
+
+  :host(.dark) {
+    --yatl-table-bg: #1e293b;
+    --yatl-table-text: #f1f5f9;
+    --yatl-table-text-muted: #94a3b8;
+    --yatl-table-border-color: #334155;
+
+    --yatl-table-header-bg: #0f172a;
+    --yatl-table-header-text: #cbd5e1;
+
+    --yatl-table-row-hover-bg: #334155;
+    --yatl-table-row-selected-bg: #1e3a8a;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --yatl-bg: var(--yatl-table-bg, #1e293b);
+      --yatl-text: var(--yatl-table-text, #f1f5f9);
+      --yatl-text-muted: var(--yatl-table-text-muted, #94a3b8);
+      --yatl-border-color: var(--yatl-table-border-color, #334155);
+
+      --yatl-header-bg: var(--yatl-table-header-bg, #0f172a);
+      --yatl-header-text: var(--yatl-table-header-text, #cbd5e1);
+
+      --yatl-row-hover-bg: var(--yatl-table-row-hover-bg, #334155);
+      --yatl-row-selected-bg: var(--yatl-table-row-selected-bg, #1e3a8a);
+    }
+  }
+
+  :host {
+    font-family: system-ui, sans-serif;
+  }
+
+  .table {
+    background-color: var(--yatl-bg);
+    border: 1px solid var(--yatl-border-color);
+    border-radius: 6px;
+  }
+
+  .header.row {
+    background-color: var(--yatl-header-bg);
+    border-bottom: 1px solid var(--yatl-border-color);
+    font-weight: 600;
+    color: var(--yatl-header-text);
+  }
+
+  .row {
+    background-color: var(--yatl-bg);
+    border-bottom: 1px solid var(--yatl-border-color);
+    transition: background-color 50ms;
+    position: relative;
+  }
+
+  .row:last-child {
+    border-bottom: none;
+  }
+
+  .header .cell::after,
+  .row:not(.header)::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-color: transparent;
+    transition: background-color 50ms;
+    z-index: 1;
+  }
+
+  .header .cell:hover::after,
+  .row:not(.header):hover::after {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  .cell {
+    align-items: center;
+    padding: var(--yatl-cell-padding);
+  }
+
+  .header .cell {
+    padding: var(--yatl-header-padding);
+  }
+
+  .footer {
+    padding: 8px 12px;
+    background-color: var(--yatl-header-bg);
+    border-top: 1px solid var(--yatl-border-color);
+    color: var(--yatl-text-muted);
+    font-size: 0.8em;
+  }
+
+  .resizer::after {
+    height: 60%;
+    width: 1px;
+    background-color: color-mix(in srgb, currentColor 30%, transparent);
+    transition: background-color 0.2s;
+  }
+
+  .resizer:hover::after {
+    background-color: currentColor;
+    width: 2px;
+  }
+
+  .drop-indicator {
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  .message {
+    font-size: large;
+  }
+
+  /* Layout stuff
+  * Most of this is functional and needed
+  * for the table to work properly. 
+  * Modify with caution!
+  */
+  :host {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  .table {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    min-height: 0;
+    overflow: auto;
+    box-sizing: border-box;
+  }
+
+  .header {
+    z-index: var(--header-z-index);
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+  }
+
+  .header-content {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 0.5rem;
+  }
+
+  .sort-icon {
+    position: relative;
+    width: 1ch;
+    align-self: stretch;
+    padding: 0;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .sort-icon::after {
+    content: '';
+    position: absolute;
+  }
+
+  .sort-icon.descending::after {
+    content: '\\2191';
+  }
+
+  .sort-icon.ascending::after {
+    content: '\\2193';
+  }
+
+  .resizer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: var(--yatl-resizer-width);
+    cursor: col-resize;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .resizer::after {
+    content: '';
+    display: block;
+  }
+
+  .drop-indicator {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: calc(var(--header-z-index) + 1);
+  }
+
+  .drop-indicator.active {
+    display: block;
+  }
+
+  .sortable {
+    cursor: pointer;
+  }
+
+  /* Footer */
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+
+    position: sticky;
+    bottom: 0;
+    z-index: var(--header-z-index);
+  }
+
+  /* Generic table parts */
+  .row {
+    display: grid;
+    grid-template-columns: var(--grid-template);
+    min-width: 100%;
+    width: fit-content;
+  }
+
+  .cell {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .message {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .truncate {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+// src/yatl-table.ts
+var STATE_SAVE_DEBOUNCE = 1e3;
+var DEFAULT_STORAGE_OPTIONS = {
+  storage: "local",
+  saveColumnSortOrders: true,
+  saveColumnVisibility: true,
+  saveColumnWidths: true,
+  saveColumnOrder: true
+};
+var SAVE_TRIGGERS = /* @__PURE__ */ new Set([
+  "searchQuery",
+  "filters",
+  "columns",
+  "columnSort",
+  "columnOrder",
+  "columnVisibility",
+  "columnWidths",
+  "storageOptions"
+]);
+var MATCH_WEIGHTS = {
+  EXACT: 100,
+  PREFIX: 50,
+  SUBSTRING: 10
+};
+var YatlTable = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    // #region --- State Data ---
+    // Property data
+    this._enableSearchTokenization = false;
+    this._enableSearchScoring = false;
+    this._columns = [];
+    this._columnStates = [];
+    this._columnOrder = [];
+    this._storageOptions = null;
+    this._data = [];
+    this._searchQuery = "";
+    this._searchIncludedFields = [];
+    this._searchTokenizer = whitespaceTokenizer;
+    this._filters = null;
+    this._filteredData = [];
+    // Flag if we have already restored the state or not.
+    this.hasRestoredState = false;
+    // save state debounce timer
+    this.saveTimer = 0;
+    // Flags set when something changes that
+    // requires the filter or sort logic to re-run.
+    this.filterDirty = false;
+    this.sortDirty = false;
+    // The last time the data was updated.
+    // For displaying in the footer only.
+    this.dataLastUpdate = null;
+    // Maps rows to their metadata
+    this.rowMetadata = /* @__PURE__ */ new WeakMap();
+    // List of tokens created from the current query
+    this.queryTokens = null;
+    // Column resize state
+    this.resizeState = null;
+    // Column drag & drop state
+    this.dragColumn = null;
+    this.enableVirtualScroll = false;
+    this.enableSearchHighlight = true;
+    this.enableColumnReorder = true;
+    this.enableFooter = false;
+    this.nullValuePlaceholder = "-";
+    this.emptyMessage = "No records to display";
+    this.noResultsMessage = "No matching records found";
+    this.rowParts = null;
+    // #endregion
+    // #region --- Event Handlers ---
+    this.handleHeaderClicked = (event, column) => {
+      const target = event.target;
+      if (!column.sortable || target.classList.contains("resizer")) {
+        return;
+      }
+      const multiSort = event.shiftKey;
+      const state2 = this.getColumnState(column.field);
+      if (!state2?.sort) {
+        this.sort(column.field, "asc", !multiSort);
+      } else if (state2.sort.order === "asc") {
+        this.sort(column.field, "desc", !multiSort);
+      } else if (state2.sort.order) {
+        this.sort(column.field, null, !multiSort);
+      }
+    };
+    this.handleCellClick = (event, row, field) => {
+      if (window.getSelection()?.toString()) return;
+      const rowIndex = this.rowMetadata.get(row).index;
+      this.dispatchEvent(new YatlRowClickEvent(row, rowIndex, field, event));
+    };
+    this.handleResizeMouseMove = (event) => {
+      if (!this.resizeState?.active) return;
+      requestAnimationFrame(() => {
+        if (!this.resizeState?.active) return;
+        const deltaX = event.pageX - this.resizeState.startX;
+        const newWidth = Math.max(50, this.resizeState.startWidth + deltaX);
+        this.resizeState.currentWidths[this.resizeState.columnIndex] = `${newWidth}px`;
+        this.tableElement.style.setProperty(
+          "--grid-template",
+          this.resizeState.currentWidths.join(" ")
+        );
+      });
+    };
+    this.handleResizeMouseUp = (_event) => {
+      window.removeEventListener("mousemove", this.handleResizeMouseMove);
+      window.removeEventListener("mouseup", this.handleResizeMouseUp);
+      document.body.style.cursor = "";
+      if (this.resizeState?.active) {
+        const finalWidth = parseFloat(
+          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));
+      }
+      this.resizeState = null;
+    };
+    this.handleDragColumnStart = (event, field) => {
+      const target = event.target;
+      if (target?.classList.contains("resizer")) {
+        event.preventDefault();
+        return;
+      }
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", field);
+        this.dragColumn = field;
+      }
+    };
+    this.handleDragColumnEnter = (event) => {
+      const cell = event.currentTarget;
+      cell.querySelector(".drop-indicator")?.classList.add("active");
+    };
+    this.handleDragColumnLeave = (event) => {
+      const cell = event.currentTarget;
+      const enteringElement = event.relatedTarget;
+      if (cell.contains(enteringElement)) {
+        return;
+      }
+      cell.querySelector(".drop-indicator")?.classList.remove("active");
+    };
+    this.handleDragColumnOver = (event) => {
+      event.preventDefault();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "move";
+      }
+    };
+    this.handleDragColumnDrop = (event, field) => {
+      if (!this.dragColumn || this.dragColumn === field) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const newColumnOrder = [...this.columnOrder];
+      const dragIndex = newColumnOrder.findIndex((col) => col === this.dragColumn);
+      const dropIndex = newColumnOrder.findIndex((col) => col === field);
+      if (dragIndex > -1 && dropIndex > -1) {
+        const [draggedColumn] = newColumnOrder.splice(dragIndex, 1);
+        const droppedColumn = findColumn(field, this.columns);
+        if (!droppedColumn) return;
+        newColumnOrder.splice(dropIndex, 0, draggedColumn);
+        const reorderEvent = new YatlColumnReorderEvent(
+          draggedColumn,
+          droppedColumn.field,
+          newColumnOrder
+        );
+        if (!this.dispatchEvent(reorderEvent)) {
+          return;
+        }
+        this.columnOrder = [...newColumnOrder];
+      }
+    };
+    this.handleDragColumnEnd = () => {
+      this.dragColumn = null;
+      this.tableElement.querySelectorAll(".drop-indicator.active").forEach((element) => element.classList.remove("active"));
+    };
+  }
+  get enableSearchTokenization() {
+    return this._enableSearchTokenization;
+  }
+  set enableSearchTokenization(enable) {
+    if (this._enableSearchTokenization === enable) {
+      return;
+    }
+    const oldValue = this._enableSearchTokenization;
+    this._enableSearchTokenization = enable;
+    this.updateInternalQuery();
+    this.filterDirty = true;
+    this.requestUpdate("enableSearchTokenization", oldValue);
+  }
+  get enableSearchScoring() {
+    return this._enableSearchScoring;
+  }
+  set enableSearchScoring(enable) {
+    if (this._enableSearchScoring === enable) {
+      return;
+    }
+    const oldValue = this._enableSearchScoring;
+    this._enableSearchScoring = enable;
+    this.filterDirty = true;
+    this.requestUpdate("enableSearchScoring", oldValue);
+  }
+  get columns() {
+    return this._columns;
+  }
+  set columns(columns) {
+    if (this._columns === columns) {
+      return;
+    }
+    const oldValue = this._columns;
+    this._columns = columns;
+    this.filterDirty = true;
+    this.requestUpdate("columns", oldValue);
+  }
+  get columnOrder() {
+    const finalOrder = /* @__PURE__ */ new Set();
+    for (const field of this._columnOrder) {
+      const col = findColumn(field, this.columns);
+      if (col) {
+        finalOrder.add(field);
+      }
+    }
+    for (const col of this.columns) {
+      if (!finalOrder.has(col.field)) {
+        finalOrder.add(col.field);
+      }
+    }
+    return [...finalOrder];
+  }
+  set columnOrder(columns) {
+    if (this._columnOrder === columns) {
+      return;
+    }
+    const oldValue = this._columnOrder;
+    this._columnOrder = [...columns];
+    this.requestUpdate("columnOrder", oldValue);
+  }
+  get columnVisibility() {
+    return this.columnOrder.map((field) => ({
+      field,
+      visible: this.getColumnState(field).visible
+    }));
+  }
+  set columnVisibility(columns) {
+    const oldValue = this.columnVisibility;
+    let changed = false;
+    for (const column of columns) {
+      const state2 = this.getColumnState(column.field);
+      if (state2 && state2.visible !== column.visible) {
+        changed = true;
+        state2.visible = column.visible;
+      }
+    }
+    if (!changed) {
+      return;
+    }
+    this.requestUpdate("columnVisibility", oldValue);
+  }
+  get columnSort() {
+    return this.columnOrder.map((field) => ({
+      field,
+      sort: this.getColumnState(field).sort
+    }));
+  }
+  set columnSort(columns) {
+    const oldValue = this.columnSort;
+    let changed = false;
+    for (const column of columns) {
+      const state2 = this.getColumnState(column.field);
+      if (state2 && (state2.sort?.order !== column.sort?.order || state2.sort?.priority !== column.sort?.priority)) {
+        changed = true;
+        state2.sort = column.sort;
+      }
+    }
+    if (!changed) {
+      return;
+    }
+    this.sortDirty = true;
+    this.requestUpdate("columnSort", oldValue);
+  }
+  get columnWidths() {
+    return this.columnOrder.map((field) => ({
+      field,
+      width: this.getColumnState(field).width
+    }));
+  }
+  set columnWidths(columns) {
+    const oldValue = this.columnWidths;
+    let changed = false;
+    for (const column of columns) {
+      const state2 = this.getColumnState(column.field);
+      if (state2 && state2.width !== column.width) {
+        changed = true;
+        state2.width = column.width;
+      }
+    }
+    if (!changed) {
+      return;
+    }
+    this.requestUpdate("columnWidths", oldValue);
+  }
+  get searchQuery() {
+    return this._searchQuery;
+  }
+  set searchQuery(query2) {
+    if (this._searchQuery === query2) {
+      return;
+    }
+    const oldValue = this._searchQuery;
+    this._searchQuery = query2;
+    this.updateInternalQuery();
+    this.filterDirty = true;
+    this.requestUpdate("searchQuery", oldValue);
+  }
+  get searchIncludedFields() {
+    return this._searchIncludedFields;
+  }
+  set searchIncludedFields(fields) {
+    if (this._searchIncludedFields === fields) {
+      return;
+    }
+    const oldValue = this._searchIncludedFields;
+    this._searchIncludedFields = fields;
+    this.filterDirty = true;
+    this.requestUpdate("searchIncludedFields", oldValue);
+  }
+  get searchTokenizer() {
+    return this._searchTokenizer;
+  }
+  set searchTokenizer(tokenizer) {
+    if (this._searchTokenizer === tokenizer) {
+      return;
+    }
+    const oldValue = this._searchTokenizer;
+    this._searchTokenizer = tokenizer;
+    this.filterDirty = true;
+    this.requestUpdate("searchTokenizer", oldValue);
+  }
+  get filters() {
+    return this._filters;
+  }
+  set filters(filters) {
+    if (this._filters === filters) {
+      return;
+    }
+    const oldValue = this._filters;
+    this._filters = filters;
+    this.filterDirty = true;
+    this.requestUpdate("filters", oldValue);
+  }
+  get storageOptions() {
+    return this._storageOptions;
+  }
+  set storageOptions(options) {
+    if (this._storageOptions === options) {
+      return;
+    }
+    const oldValue = this._storageOptions;
+    this._storageOptions = options;
+    if (!this.hasRestoredState) {
+      this.loadStateFromStorage();
+    }
+    this.requestUpdate("storageOptions", oldValue);
+  }
+  get data() {
+    return this._data;
+  }
+  set data(value) {
+    const oldValue = this._data;
+    this._data = value;
+    this.dataLastUpdate = /* @__PURE__ */ new Date();
+    this.createMetadata();
+    this.filterDirty = true;
+    this.requestUpdate("data", oldValue);
+  }
+  get filteredData() {
+    if (this.filterDirty) {
+      this.filterRows();
+    } else if (this.sortDirty) {
+      this.sortRows();
+    }
+    this.filterDirty = false;
+    this.sortDirty = false;
+    return [...this._filteredData];
+  }
+  // #endregion
+  // #region --- Public Methods ---
+  /**
+   * Gets a copy of the current state of the table.
+   */
+  getState() {
+    return {
+      searchQuery: this.searchQuery,
+      filters: this.filters,
+      columnOrder: this.columnOrder,
+      columns: this.columns.map((column) => {
+        const state2 = this.getColumnState(column.field);
+        return {
+          field: column.field,
+          visible: state2.visible,
+          sort: state2.sort,
+          width: state2.width
+        };
+      })
+    };
+  }
+  /**
+   * Restores the table to the provided state.
+   * @param state - The state to restore the table to.
+   */
+  restoreState(state2) {
+    if ("searchQuery" in state2 && state2.searchQuery !== void 0) {
+      this.searchQuery = state2.searchQuery;
+    }
+    if ("filters" in state2 && state2.filters !== void 0) {
+      this.filters = state2.filters;
+    }
+    if ("columnOrder" in state2 && state2.columnOrder !== void 0) {
+      this.columnOrder = state2.columnOrder;
+    }
+    if ("columns" in state2 && state2.columns !== void 0) {
+      const newColumnStates = [];
+      for (const newState of state2.columns) {
+        const currentState = this.getColumnState(newState.field);
+        newColumnStates.push(currentState);
+        if (!newState) {
+          continue;
+        }
+        if ("visible" in newState && newState.visible !== void 0) {
+          currentState.visible = newState.visible;
+        }
+        if ("sort" in newState && newState.sort !== void 0) {
+          currentState.sort = newState.sort;
+        }
+        if ("width" in newState && newState.width !== void 0) {
+          currentState.width = newState.width;
+        }
+      }
+      this._columnStates = newColumnStates;
+      this.requestUpdate();
+    }
+  }
+  /**
+   * Sorts the table by a specified column and order.
+   * If `order` is `null`, the sort on this column is removed.
+   * @param field - The field name of the column to sort by.
+   * @param order - The sort order: 'asc', 'desc', or `null` to remove sorting for this column.
+   * @param clear - Clear all other sorting
+   */
+  sort(field, order, clear = true) {
+    const sortStates = this.columnSort;
+    const state2 = findColumn(field, sortStates);
+    if (!state2) {
+      throw new Error(`Cannot get options for non-existent column "${field}"`);
+    }
+    if (order === state2.sort?.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);
+      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;
+    } else {
+      state2.sort = null;
+    }
+    if (clear) {
+      for (const state3 of sortStates) {
+        if (state3.field !== field) {
+          state3.sort = null;
+        }
+      }
+    }
+    this.columnSort = sortStates;
+  }
+  /**
+   * Sets the visibility of a specified column.
+   * @param field - The field name of the column.
+   * @param visible - `true` to show the column, `false` to hide it.
+   */
+  setColumnVisibility(field, visible) {
+    const visibilityStates = this.columnVisibility;
+    const state2 = findColumn(field, visibilityStates);
+    if (!state2) {
+      throw new Error(`Cannot get options for non-existent column "${field}"`);
+    }
+    if (state2.visible === visible) {
+      return;
+    }
+    if (!this.dispatchEvent(new YatlColumnToggleEvent(field, visible))) {
+      return;
+    }
+    state2.visible = visible;
+    this.columnVisibility = visibilityStates;
+  }
+  /**
+   * Toggles the visibility of hte specified column
+   * @param field - The field name of the column to toggle.
+   */
+  toggleColumnVisibility(field) {
+    const state2 = this.getColumnState(field);
+    this.setColumnVisibility(field, !state2);
+  }
+  /**
+   * Shows the specified column
+   * @param field - The field name of the column to show.
+   */
+  showColumn(field) {
+    this.setColumnVisibility(field, true);
+  }
+  /**
+   * Hides the specified column
+   * @param field - The field name of the column to hide.
+   */
+  hideColumn(field) {
+    this.setColumnVisibility(field, false);
+  }
+  /**
+   * Export the current visible table data to a CSV file.
+   * @param filename - The name of the file to save.
+   * @param all - If `true`, exports all original data (ignoring filters). If `false` (default), exports only the currently visible (filtered and sorted) rows.
+   */
+  export(filename, all = false) {
+    const data = all ? this.data : this.filteredData;
+    const rows = [...data.values()];
+    const columnData = this.columnData;
+    const csvHeaders = columnData.filter((col) => all || col.state?.visible).map((col) => `"${col.options.title}"`).join(",");
+    const csvRows = rows.map((row) => {
+      const list = [];
+      for (const col of columnData) {
+        let value = getNestedValue(row, col.field);
+        if (all || col.state.visible) {
+          if (typeof col.options.valueFormatter === "function") {
+            value = col.options.valueFormatter(value, row);
+          }
+          value = String(value).replace('"', '""');
+          list.push(`"${value}"`);
+        }
+      }
+      return list.join(",");
+    }).join("\n");
+    const csvContent = csvHeaders + "\n" + csvRows;
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8," });
+    const a = document.createElement("a");
+    a.style.display = "none";
+    a.href = URL.createObjectURL(blob);
+    a.download = `${filename}.csv`;
+    document.body.append(a);
+    a.click();
+    a.remove();
+  }
+  scrollToRow(row) {
+    const index = this.data.findIndex((v) => v === row);
+    if (typeof index === "number") {
+      return this.scrollToOriginalIndex(index);
+    } else {
+      throw new Error("Row not in table");
+    }
+  }
+  /**
+   * 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).
+   */
+  scrollToOriginalIndex(index) {
+    const rowData = this.data[index];
+    if (rowData) {
+      const filteredIndex = this.filteredData.indexOf(rowData);
+      if (filteredIndex >= 0) {
+        return this.scrollToFilteredIndex(filteredIndex);
+      } else {
+        throw new Error("Cannot scroll to filtered out row");
+      }
+    } else {
+      throw new RangeError(`Row index ${index} out of range`);
+    }
+  }
+  async scrollToFilteredIndex(index) {
+    const rowData = this.filteredData[index];
+    if (!rowData) {
+      throw new RangeError(`Row index ${index} out of range`);
+    }
+    await this.updateComplete;
+    if (this.virtualizer) {
+      this.virtualizer.element(index)?.scrollIntoView({
+        block: "start",
+        behavior: "instant"
+      });
+    } else {
+      const row = this.tableElement.querySelector(
+        `.row[data-filtered-index="${index}"]`
+      );
+      row?.scrollIntoView({
+        block: "start",
+        behavior: "smooth"
+      });
+    }
+  }
+  async scrollToPx(px) {
+    await this.updateComplete;
+    if (this.virtualizer) {
+      this.virtualizer.scrollTop = px;
+    } else {
+      this.tableElement.scrollTop = px;
+    }
+  }
+  /**
+   * Finds the first row
+   * @param field
+   * @param value
+   * @returns
+   */
+  findRow(field, value) {
+    return this.data.find((row) => {
+      const rowValue = getNestedValue(row, field);
+      return rowValue === value;
+    });
+  }
+  /**
+   * Finds the original index of the first row where the specified field matches the given value.
+   * This searches through the original, unfiltered dataset.
+   * @param field - The field name within the row data to search.
+   * @param value - The value to match against the field's content.
+   * @returns The original index of the found row, or -1 if no match is found.
+   * @example
+   * ```ts
+   * const index = dataTable.indexOf('id', 12345);
+   * if (index >= 0) {
+   *  dataTable.updateRow({description: "Updated description"}, index);
+   * }
+   * ```
+   */
+  findRowIndex(field, value) {
+    const row = this.findRow(field, value);
+    if (row) {
+      return this.rowMetadata.get(row).index;
+    }
+    return -1;
+  }
+  /**
+   * Updates the data of a row at a specific original index.
+   * @param index - The original index of the row to update.
+   * @param data - An object containing the new data to assign to the row. Existing fields will be updated, and new fields will be added.
+   *
+   * @example
+   * ```ts
+   * const index = dataTable.indexOf('id', 12345);
+   * if (index >= 0) {
+   *  dataTable.updateRow(index, {description: "Updated description"});
+   * }
+   * ```
+   */
+  updateRow(index, data) {
+    const current_row = this.data[index];
+    if (current_row) {
+      Object.assign(current_row, data);
+      this.requestUpdate("data");
+    }
+  }
+  /**
+   * Deletes a row at a specific original index from the table.
+   * @param index - The original index of the row to delete.
+   */
+  deleteRow(index) {
+    this.data = this.data.toSpliced(index, 1);
+  }
+  // #endregion
+  // #region --- Render Methods ---
+  renderColumnSortIcon(column, state2) {
+    return column.sortable ? html2`<div
+          part="header-sort-icon"
+          class=${classMap({
+      "sort-icon": true,
+      ascending: state2.sort?.order === "asc",
+      descending: state2.sort?.order === "desc"
+    })}
+        ></div>` : nothing;
+  }
+  renderColumnResizer(column, _state) {
+    return column.resizable ? html2`<div
+          part="header-resizer"
+          class="resizer"
+          @click=${(event) => event.stopPropagation()}
+          @mousedown=${(event) => this.handleResizeMouseDown(event, column.field)}
+        ></div>` : nothing;
+  }
+  renderHeaderCell(field) {
+    const column = findColumn(field, this.columns);
+    const state2 = this.getColumnState(column.field);
+    if (state2.visible == false) {
+      return nothing;
+    }
+    return html2`
+      <div
+        part="cell header-cell"
+        class=${classMap({
+      cell: true,
+      sortable: column.sortable ?? false
+    })}
+        draggable=${ifDefined(this.enableColumnReorder ? true : void 0)}
+        data-field=${column.field}
+        @dragstart=${(event) => this.handleDragColumnStart(event, column.field)}
+        @dragenter=${this.handleDragColumnEnter}
+        @dragleave=${this.handleDragColumnLeave}
+        @dragover=${this.handleDragColumnOver}
+        @drop=${(event) => this.handleDragColumnDrop(event, column.field)}
+        @dragend=${this.handleDragColumnEnd}
+        @click=${(event) => this.handleHeaderClicked(event, column)}
+      >
+        <div class="header-content">
+          <span class="header-title truncate" part="header-title">
+            ${column.title ?? toHumanReadable(column.field)}
+          </span>
+          ${this.renderColumnSortIcon(column, state2)}
+        </div>
+        ${this.renderColumnResizer(column, state2)}
+        <div part="drop-indicator" class="drop-indicator"></div>
+      </div>
+    `;
+  }
+  renderHeader() {
+    return html2`
+      <div part="header" class="header row">
+        ${this.columnOrder.map((field) => this.renderHeaderCell(field))}
+      </div>
+    `;
+  }
+  renderCellContents(value, column, row) {
+    if (column.cellRenderer) {
+      return column.cellRenderer(value, column.field, row);
+    }
+    if (value == null) {
+      return this.nullValuePlaceholder;
+    }
+    const indices = this.rowMetadata.get(row).highlightIndices;
+    return this.enableSearchHighlight && indices ? highlightText(String(value), indices[column.field]) : value;
+  }
+  renderCell(field, row) {
+    const column = findColumn(field, this.columns);
+    const state2 = this.getColumnState(column.field);
+    if (!state2.visible) {
+      return nothing;
+    }
+    let value = getNestedValue(row, column.field);
+    let userParts = column.cellParts?.call(this, value, column.field, row);
+    if (Array.isArray(userParts)) {
+      userParts = userParts.join(" ");
+    }
+    if (typeof column.valueFormatter === "function") {
+      value = column.valueFormatter(value, row);
+    }
+    return html2`
+      <div
+        part="cell body-cell cell-${column.field} ${userParts}"
+        data-field=${column.field}
+        class="cell"
+        title=${ifDefined(value ? String(value) : void 0)}
+        @click=${(event) => this.handleCellClick(event, row, column.field)}
+      >
+        <span class="truncate">
+          ${this.renderCellContents(value, column, row)}
+        </span>
+      </div>
+    `;
+  }
+  renderRow(row, index) {
+    const metadata = this.rowMetadata.get(row);
+    let userParts = this.rowParts?.(row) ?? "";
+    if (Array.isArray(userParts)) {
+      userParts = userParts.join(" ");
+    }
+    return html2`
+      <div
+        part=${"row " + userParts}
+        class="row"
+        data-index=${metadata.index}
+        data-filtered-index=${index}
+      >
+        ${this.columnOrder.map((field) => this.renderCell(field, row))}
+      </div>
+    `;
+  }
+  renderBody() {
+    if (this.columnWidths.length === 0) {
+      return html2`
+        <div part="message" class="message">No visible columns.</div>
+      `;
+    }
+    if (this.data.length === 0) {
+      return html2`<div part="message" class="message">
+        ${this.emptyMessage}
+      </div>`;
+    }
+    if (this.filteredData.length === 0) {
+      return html2`<div part="message" class="message">
+        ${this.noResultsMessage}
+      </div>`;
+    }
+    if (this.enableVirtualScroll) {
+      return html2`
+        <lit-virtualizer
+          .items=${this.filteredData}
+          .renderItem=${(item, index) => this.renderRow(item, index)}
+        ></lit-virtualizer>
+      `;
+    }
+    return html2`
+      ${repeat(
+      this.filteredData,
+      (item) => this.rowMetadata.get(item).index,
+      (item, index) => this.renderRow(item, index)
+    )}
+    `;
+  }
+  renderFooter() {
+    if (!this.enableFooter) {
+      return nothing;
+    }
+    const total = this.data.length;
+    const filtered = this.filteredData.length;
+    const fmt = new Intl.NumberFormat(void 0);
+    const totalStr = fmt.format(total);
+    const filteredStr = fmt.format(filtered);
+    const rowCountText = total !== filtered ? `Showing ${filteredStr} of ${totalStr} records` : `Total records: ${totalStr}`;
+    const formatter = Intl.DateTimeFormat(void 0, {
+      dateStyle: "short",
+      timeStyle: "short"
+    });
+    const lastUpdateText = this.dataLastUpdate ? formatter.format(this.dataLastUpdate) : "Never";
+    return html2`
+      <div part="footer" class="footer">
+        <slot name="footer">
+          <span part="row-count">${rowCountText}</span>
+          <span part="timestamp">${lastUpdateText}</span>
+        </slot>
+      </div>
+    `;
+  }
+  render() {
+    const gridWidths = this.getGridWidths();
+    const gridTemplate = widthsToGridTemplates(gridWidths).join(" ");
+    return html2`
+      <div
+        part="table"
+        class="table"
+        style=${styleMap({ "--grid-template": gridTemplate })}
+      >
+        ${this.renderHeader()} ${this.renderBody()} ${this.renderFooter()}
+      </div>
+    `;
+  }
+  // #endregion
+  // #region --- Lifecycle Methods ---
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    super.updated(changedProperties);
+    const stateProps = [
+      "columnOrder",
+      "columnVisibility",
+      "columnSort",
+      "columnWidths",
+      "searchQuery",
+      "filters"
+    ];
+    const changedStateProp = stateProps.filter(
+      (prop) => changedProperties.has(prop)
+    );
+    if (changedStateProp.length) {
+      this.dispatchEvent(
+        new YatlStateChangeEvent(this.getState(), changedStateProp)
+      );
+    }
+    if (this.storageOptions?.key) {
+      const shouldSave = Array.from(changedProperties.keys()).some(
+        (prop) => SAVE_TRIGGERS.has(prop)
+      );
+      if (shouldSave) {
+        this.scheduleSave();
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.addEventListener("mousemove", this.handleResizeMouseMove);
+    window.addEventListener("mouseup", this.handleResizeMouseUp);
+  }
+  // #endregion
+  // #region --- Filter Methods ---
+  /**
+   * Calculates a relevance score for a given query against a target string.
+   *
+   * This function implements a tiered matching strategy:
+   * 1.  **Exact Match**: The query exactly matches the target. This yields the highest score.
+   * 2.  **Prefix Match**: The target starts with the query. This is the next most relevant.
+   * 3.  **Substring Match**: The target contains the query somewhere. This is the least relevant.
+   *
+   * The final score is weighted and adjusted by the length difference between the query and the target
+   * to ensure that more specific matches (e.g., "apple" vs "application" for the query "apple") rank higher.
+   *
+   * @param query The search term (e.g., "app").
+   * @param target The string to be searched (e.g., "Apple" or "Application").
+   * @returns A numerical score representing the relevance of the match. Higher is better. Returns 0 if no match is found.
+   */
+  calculateSearchScore(query2, target) {
+    const results = { score: 0, ranges: [] };
+    if (!query2 || !target) {
+      return results;
+    }
+    let baseScore = 0;
+    let matchTypeWeight = 0;
+    if (target === query2) {
+      matchTypeWeight = MATCH_WEIGHTS.EXACT;
+      baseScore = query2.length;
+      results.ranges.push([0, target.length]);
+    } else if (target.startsWith(query2)) {
+      matchTypeWeight = MATCH_WEIGHTS.PREFIX;
+      baseScore = query2.length;
+      results.ranges.push([0, query2.length]);
+    } else {
+      const index = target.indexOf(query2);
+      if (index !== -1) {
+        matchTypeWeight = MATCH_WEIGHTS.SUBSTRING;
+        baseScore = query2.length;
+        let cursor = index;
+        while (cursor !== -1) {
+          results.ranges.push([cursor, cursor + query2.length]);
+          cursor = target.indexOf(query2, cursor + 1);
+        }
+      } else {
+        return results;
+      }
+    }
+    const lengthDifference = target.length - query2.length;
+    const specificityBonus = 1 / (1 + lengthDifference);
+    results.score = baseScore * matchTypeWeight * specificityBonus;
+    return results;
+  }
+  searchField(query2, value, tokens) {
+    const result = { score: 0, ranges: [] };
+    const addRangesFromValue = (searchTerm) => {
+      let idx = value.indexOf(searchTerm);
+      while (idx !== -1) {
+        result.ranges.push([idx, idx + searchTerm.length]);
+        idx = value.indexOf(searchTerm, idx + 1);
+      }
+    };
+    if (query2.quoted || !tokens) {
+      if (!this.enableSearchScoring) {
+        if (value.includes(query2.value)) {
+          result.score = 1;
+          addRangesFromValue(query2.value);
+        }
+      } else {
+        const calculation = this.calculateSearchScore(query2.value, value);
+        result.score = calculation.score;
+        result.ranges = calculation.ranges;
+      }
+      return result;
+    }
+    if (!this.enableSearchScoring) {
+      const isMatch = tokens.some((token) => token.includes(query2.value));
+      if (isMatch) {
+        result.score = 1;
+        addRangesFromValue(query2.value);
+      }
+      return result;
+    }
+    for (const token of tokens) {
+      const calculation = this.calculateSearchScore(query2.value, token);
+      if (calculation.score > 0) {
+        result.score += calculation.score;
+        addRangesFromValue(query2.value);
+      }
+    }
+    return result;
+  }
+  filterField(value, filter, filterFunction = null) {
+    if (Array.isArray(filter)) {
+      if (filter.length === 0) {
+        return true;
+      }
+      return filter.some(
+        (element) => this.filterField(value, element, filterFunction)
+      );
+    }
+    if (Array.isArray(value)) {
+      if (value.length === 0) {
+        return false;
+      }
+      return value.some(
+        (element) => this.filterField(element, filter, filterFunction)
+      );
+    }
+    if (typeof filterFunction === "function") {
+      return filterFunction(value, filter);
+    }
+    if (filter instanceof RegExp) {
+      return filter.test(String(value));
+    }
+    return filter === value;
+  }
+  filterRow(row, index) {
+    if (!this.filters) {
+      return true;
+    }
+    if (typeof this.filters === "function") {
+      return this.filters(row, index);
+    }
+    for (const field in this.filters) {
+      const filter = getNestedValue(this.filters, field);
+      const value = getNestedValue(row, field);
+      if (typeof filter === "function") {
+        if (!filter(value)) {
+          return false;
+        }
+      } else {
+        const col = findColumn(field, this.columns);
+        const filterCallback = col ? col.filter : void 0;
+        if (!this.filterField(value, filter, filterCallback)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  filterRows() {
+    const searchableFields = [...this.columnData.values()].filter((col) => col.options.searchable).map((c) => c.field);
+    const fields = [...searchableFields, ...this.searchIncludedFields];
+    this._filteredData = this.data.filter((row, index) => {
+      const metadata = this.rowMetadata.get(row);
+      metadata.searchScore = 0;
+      metadata.highlightIndices = {};
+      if (!this.filterRow(row, index)) {
+        return false;
+      }
+      if (!this.queryTokens) {
+        return true;
+      }
+      for (const field of fields) {
+        const originalValue = getNestedValue(row, field);
+        const compareValue = metadata.searchValues[field];
+        const columnTokens = metadata.searchTokens[field];
+        if (typeof originalValue !== "string" || typeof compareValue !== "string") {
+          continue;
+        }
+        const fieldResults = { score: 0, ranges: [] };
+        for (const token of this.queryTokens) {
+          const results = this.searchField(token, compareValue, columnTokens);
+          fieldResults.score += results.score;
+          fieldResults.ranges.push(...results.ranges);
+        }
+        if (fieldResults.score > 0) {
+          metadata.searchScore += fieldResults.score;
+          metadata.highlightIndices[field] = fieldResults.ranges;
+        }
+      }
+      return metadata.searchScore > 0;
+    });
+    this.filterDirty = false;
+    this.sortRows();
+    this.dispatchEvent(new YatlChangeEvent(this.data));
+  }
+  // #endregion
+  // #region --- Sort Methods ---
+  compareRows(a, b, field) {
+    let aValue, bValue;
+    const columnData = findColumn(field, this.columnData);
+    if (!columnData.state.sort) {
+      return 0;
+    }
+    const aMetadata = this.rowMetadata.get(a);
+    const bMetadata = this.rowMetadata.get(b);
+    if (columnData.state.sort?.order === "asc") {
+      aValue = aMetadata.sortValues[columnData.field];
+      bValue = bMetadata.sortValues[columnData.field];
+    } else {
+      aValue = bMetadata.sortValues[columnData.field];
+      bValue = aMetadata.sortValues[columnData.field];
+    }
+    if (typeof columnData.options.sorter === "function") {
+      const ret = columnData.options.sorter(aValue, bValue);
+      if (ret !== 0) return ret;
+    }
+    const aIsNull = aValue == null;
+    const bIsNull = bValue == null;
+    if (aIsNull && !bIsNull) return -1;
+    if (bIsNull && !aIsNull) return 1;
+    if (aValue < bValue) return -1;
+    if (aValue > bValue) return 1;
+    return 0;
+  }
+  sortRows() {
+    if (this.filterDirty) {
+      this.filterRows();
+      return;
+    }
+    const sortedColumns = this.columnData.filter((col) => col.state.visible && col.state.sort).sort((a, b) => b.state.sort.priority - a.state.sort.priority);
+    this._filteredData = this._filteredData.toSorted((a, b) => {
+      const aMetadata = this.rowMetadata.get(a);
+      const bMetadata = this.rowMetadata.get(b);
+      if (this.enableSearchScoring && this.queryTokens) {
+        const aValue = aMetadata.searchScore || 0;
+        const bValue = bMetadata.searchScore || 0;
+        if (aValue > bValue) return -1;
+        if (aValue < bValue) return 1;
+      }
+      for (const col of sortedColumns) {
+        const comp = this.compareRows(a, b, col.field);
+        if (comp !== 0) {
+          return comp;
+        }
+      }
+      return aMetadata.index - bMetadata.index;
+    });
+    this.sortDirty = false;
+  }
+  // #endregion
+  // #region --- Utilities ---
+  createMetadata() {
+    this.rowMetadata = /* @__PURE__ */ new WeakMap();
+    let index = 0;
+    for (const row of this.data) {
+      const metadata = {
+        index: index++,
+        searchTokens: {},
+        searchValues: {},
+        sortValues: {}
+      };
+      this.rowMetadata.set(row, metadata);
+      for (const column of this.columns) {
+        const value = getNestedValue(row, column.field);
+        if (typeof column.sortValue === "function") {
+          metadata.sortValues[column.field] = column.sortValue(value);
+        } else if (typeof value === "string") {
+          metadata.sortValues[column.field] = value.toLocaleLowerCase();
+        } else if (isCompareable(value)) {
+          metadata.sortValues[column.field] = value;
+        } else {
+          metadata.sortValues[column.field] = String(value);
+        }
+        if (typeof value === "string") {
+          metadata.searchValues[column.field] = value.toLocaleLowerCase();
+        }
+        if (column.searchable && column.tokenize && value) {
+          const tokenizer = column.searchTokenizer ?? this.searchTokenizer;
+          metadata.searchTokens[column.field] = tokenizer(String(value)).map(
+            (token) => token.value
+          );
+        }
+      }
+      for (const field of this.searchIncludedFields) {
+        const value = getNestedValue(row, field);
+        if (typeof value === "string") {
+          metadata.searchValues[field] = value.toLocaleLowerCase();
+        }
+      }
+    }
+  }
+  updateInternalQuery() {
+    if (this.searchQuery.length === 0) {
+      this.queryTokens = null;
+      return;
+    }
+    this.queryTokens = [
+      { value: this.searchQuery.toLocaleLowerCase(), quoted: true }
+    ];
+    if (this.enableSearchTokenization) {
+      this.queryTokens.push(...this.searchTokenizer(this.searchQuery));
+    }
+  }
+  get columnData() {
+    return this.columns.map((column) => ({
+      field: column.field,
+      options: column,
+      state: this.getColumnState(column.field)
+    }));
+  }
+  /**
+   * Gets the width of each column in the
+   * order they will appear in the grid.
+   */
+  getGridWidths() {
+    return this.columnOrder.map((field) => this.getColumnState(field)).filter((state2) => state2.visible).map((state2) => state2.width);
+  }
+  scheduleSave() {
+    window.clearTimeout(this.saveTimer);
+    this.saveTimer = window.setTimeout(() => {
+      this.saveStateToStorage();
+    }, STATE_SAVE_DEBOUNCE);
+  }
+  getColumnState(field) {
+    let state2 = findColumn(field, this._columnStates);
+    if (!state2) {
+      state2 = {
+        field,
+        visible: true,
+        sort: null,
+        width: null
+      };
+      this._columnStates.push(state2);
+    }
+    return state2;
+  }
+  // #endregion
+  // #region --- Storage Methods  ---
+  saveStateToStorage() {
+    if (!this.storageOptions) {
+      return;
+    }
+    const options = { ...DEFAULT_STORAGE_OPTIONS, ...this.storageOptions };
+    const savedTableState = {
+      columns: []
+    };
+    const tableState = this.getState();
+    if (options.saveColumnOrder) {
+      savedTableState.columnOrder = tableState.columnOrder;
+    }
+    for (const columnState of tableState.columns) {
+      const savedColumnState = {
+        field: columnState.field
+      };
+      if (options.saveColumnSortOrders) {
+        savedColumnState.sort = columnState.sort;
+      }
+      if (options.saveColumnVisibility) {
+        savedColumnState.visible = columnState.visible;
+      }
+      if (options.saveColumnWidths) {
+        savedColumnState.width = columnState.width;
+      }
+      savedTableState.columns?.push(savedColumnState);
+    }
+    const storage = options.storage === "session" ? sessionStorage : localStorage;
+    try {
+      storage.setItem(options.key, JSON.stringify(savedTableState));
+    } catch (error) {
+      console.warn("Failed to save table state", error);
+    }
+  }
+  loadStateFromStorage() {
+    if (!this.storageOptions) {
+      return;
+    }
+    const options = { ...DEFAULT_STORAGE_OPTIONS, ...this.storageOptions };
+    const json = localStorage.getItem(options.key);
+    if (!json) {
+      return;
+    }
+    try {
+      const savedTableState = JSON.parse(json);
+      const tableStateToRestore = {};
+      if (options.saveColumnOrder) {
+        tableStateToRestore.columnOrder = savedTableState.columnOrder;
+      }
+      if (savedTableState.columns) {
+        tableStateToRestore.columns = [];
+        for (const savedColumnState of savedTableState.columns) {
+          const columnStateToRestore = {
+            field: savedColumnState.field
+          };
+          if (options.saveColumnVisibility) {
+            columnStateToRestore.visible = savedColumnState.visible;
+          }
+          if (options.saveColumnWidths) {
+            columnStateToRestore.width = savedColumnState.width;
+          }
+          if (options.saveColumnSortOrders) {
+            columnStateToRestore.sort = savedColumnState.sort;
+          }
+          tableStateToRestore.columns.push(columnStateToRestore);
+        }
+      }
+      this.restoreState(tableStateToRestore);
+      this.hasRestoredState = true;
+    } catch (error) {
+      console.error("Failed to restore DataTable state:", error);
+    }
+  }
+  handleResizeMouseDown(event, field) {
+    event.preventDefault();
+    event.stopPropagation();
+    const target = event.target;
+    const header = target.closest(".cell");
+    if (!header) {
+      return;
+    }
+    const columnIndex = this.columnOrder.findIndex((col) => col === field);
+    if (columnIndex < 0) {
+      return;
+    }
+    this.tableElement.querySelectorAll(".header .cell").forEach((element) => {
+      const field2 = element.dataset.field;
+      if (field2) {
+        const state2 = this.getColumnState(field2);
+        if (state2) {
+          state2.width = element.getBoundingClientRect().width;
+        }
+      }
+    });
+    this.resizeState = {
+      active: true,
+      startX: event.pageX,
+      startWidth: header.getBoundingClientRect().width,
+      columnIndex,
+      columnField: field,
+      currentWidths: widthsToGridTemplates(this.getGridWidths())
+    };
+    this.tableElement.style.setProperty(
+      "--grid-template",
+      this.resizeState.currentWidths.join(" ")
+    );
+    window.addEventListener("mousemove", this.handleResizeMouseMove);
+    window.addEventListener("mouseup", this.handleResizeMouseUp);
+    document.body.style.cursor = "col-resize";
+  }
+  addEventListener(type, listener, options) {
+    super.addEventListener(
+      type,
+      listener,
+      options
+    );
+  }
+  removeEventListener(type, listener, options) {
+    super.removeEventListener(type, listener, options);
+  }
+  dispatchEvent(event) {
+    return super.dispatchEvent(event);
+  }
+  // #endregion
+};
+YatlTable.styles = [yatl_table_styles_default];
+__decorateClass([
+  query(".table")
+], YatlTable.prototype, "tableElement", 2);
+__decorateClass([
+  query("lit-virtualizer")
+], YatlTable.prototype, "virtualizer", 2);
+__decorateClass([
+  state()
+], YatlTable.prototype, "_filteredData", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-virtual-scroll" })
+], YatlTable.prototype, "enableVirtualScroll", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-search-highlight" })
+], YatlTable.prototype, "enableSearchHighlight", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-search-tokenization" })
+], YatlTable.prototype, "enableSearchTokenization", 1);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-search-scoring" })
+], YatlTable.prototype, "enableSearchScoring", 1);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-column-reorder" })
+], YatlTable.prototype, "enableColumnReorder", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-footer" })
+], YatlTable.prototype, "enableFooter", 2);
+__decorateClass([
+  property({ type: String, attribute: "null-value-placeholder" })
+], YatlTable.prototype, "nullValuePlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "empty-message" })
+], YatlTable.prototype, "emptyMessage", 2);
+__decorateClass([
+  property({ type: String, attribute: "no-results-message" })
+], YatlTable.prototype, "noResultsMessage", 2);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "columns", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "columnOrder", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "columnVisibility", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "columnSort", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "columnWidths", 1);
+__decorateClass([
+  property({ type: String, attribute: "search-query" })
+], YatlTable.prototype, "searchQuery", 1);
+__decorateClass([
+  property({ type: Array, attribute: "search-included-fields" })
+], YatlTable.prototype, "searchIncludedFields", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "searchTokenizer", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "filters", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "rowParts", 2);
+__decorateClass([
+  property({ type: Object, attribute: "storage-options" })
+], YatlTable.prototype, "storageOptions", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "data", 1);
+YatlTable = __decorateClass([
+  customElement("yatl-table")
+], YatlTable);
+export {
+  YatlChangeEvent,
+  YatlColumnReorderEvent,
+  YatlColumnResizeEvent,
+  YatlColumnToggleEvent,
+  YatlEvent,
+  YatlRowClickEvent,
+  YatlSearchEvent,
+  YatlSortEvent,
+  YatlStateChangeEvent,
+  YatlTable,
+  createRegexTokenizer,
+  findColumn,
+  whitespaceTokenizer
+};
+//# sourceMappingURL=index.mjs.map