@timlassiter11/yatl 1.2.5 → 1.3.0

package/dist/index.mjs

@@ -20,6 +20,8 @@ var YatlEvent = class extends Event {
     });
   }
 };
+var YatlTableControllerEvent = class extends YatlEvent {
+};
 var YatlRowClickEvent = class _YatlRowClickEvent extends YatlEvent {
   constructor(row, rowId, index, field, originalEvent) {
     super(_YatlRowClickEvent.EVENT_NAME);
@@ -32,15 +34,6 @@ var YatlRowClickEvent = class _YatlRowClickEvent extends YatlEvent {
   static {
     this.EVENT_NAME = "yatl-row-click";
   }
-  clone() {
-    return new _YatlRowClickEvent(
-      this.row,
-      this.rowId,
-      this.index,
-      this.field,
-      this.originalEvent
-    );
-  }
 };
 var YatlRowSelectRequest = class _YatlRowSelectRequest extends YatlEvent {
   constructor(rowId, selected, currentlySelectedRows) {
@@ -52,15 +45,8 @@ var YatlRowSelectRequest = class _YatlRowSelectRequest extends YatlEvent {
   static {
     this.EVENT_NAME = "yatl-row-select-request";
   }
-  clone() {
-    return new _YatlRowSelectRequest(
-      this.rowId,
-      this.selected,
-      this.currentlySelectedRows
-    );
-  }
 };
-var YatlRowSelectEvent = class _YatlRowSelectEvent extends YatlEvent {
+var YatlRowSelectEvent = class _YatlRowSelectEvent extends YatlTableControllerEvent {
   constructor(selectedIds, previouslySelectedRows) {
     super(_YatlRowSelectEvent.EVENT_NAME);
     this.selectedIds = selectedIds;
@@ -86,11 +72,8 @@ var YatlColumnSortRequest = class _YatlColumnSortRequest extends YatlEvent {
   static {
     this.EVENT_NAME = "yatl-column-sort-request";
   }
-  clone() {
-    return new _YatlColumnSortRequest(this.field, this.order, this.multisort);
-  }
 };
-var YatlColumnSortEvent = class _YatlColumnSortEvent extends YatlEvent {
+var YatlColumnSortEvent = class _YatlColumnSortEvent extends YatlTableControllerEvent {
   constructor(field, order, multisort) {
     super(_YatlColumnSortEvent.EVENT_NAME);
     this.field = field;
@@ -104,7 +87,7 @@ var YatlColumnSortEvent = class _YatlColumnSortEvent extends YatlEvent {
     return new _YatlColumnSortEvent(this.field, this.order, this.multisort);
   }
 };
-var YatlColumnToggleEvent = class _YatlColumnToggleEvent extends YatlEvent {
+var YatlColumnToggleEvent = class _YatlColumnToggleEvent extends YatlTableControllerEvent {
   constructor(field, visible) {
     super(_YatlColumnToggleEvent.EVENT_NAME);
     this.field = field;
@@ -117,7 +100,7 @@ var YatlColumnToggleEvent = class _YatlColumnToggleEvent extends YatlEvent {
     return new _YatlColumnToggleEvent(this.field, this.visible);
   }
 };
-var YatlColumnResizeEvent = class _YatlColumnResizeEvent extends YatlEvent {
+var YatlColumnResizeEvent = class _YatlColumnResizeEvent extends YatlTableControllerEvent {
   constructor(field, width) {
     super(_YatlColumnResizeEvent.EVENT_NAME);
     this.field = field;
@@ -140,15 +123,8 @@ var YatlColumnReorderRequest = class _YatlColumnReorderRequest extends YatlEvent
   static {
     this.EVENT_NAME = "yatl-column-reorder-request";
   }
-  clone() {
-    return new _YatlColumnReorderRequest(
-      this.movedColumn,
-      this.originalIndex,
-      this.newIndex
-    );
-  }
 };
-var YatlColumnReorderEvent = class _YatlColumnReorderEvent extends YatlEvent {
+var YatlColumnReorderEvent = class _YatlColumnReorderEvent extends YatlTableControllerEvent {
   constructor(order) {
     super(_YatlColumnReorderEvent.EVENT_NAME);
     this.order = order;
@@ -160,7 +136,20 @@ var YatlColumnReorderEvent = class _YatlColumnReorderEvent extends YatlEvent {
     return new _YatlColumnReorderEvent(this.order);
   }
 };
-var YatlTableSearchEvent = class _YatlTableSearchEvent extends YatlEvent {
+var YatlCellEditEvent = class _YatlCellEditEvent extends YatlEvent {
+  constructor(row, rowId, field, originalValue, currentValue) {
+    super(_YatlCellEditEvent.EVENT_NAME);
+    this.row = row;
+    this.rowId = rowId;
+    this.field = field;
+    this.originalValue = originalValue;
+    this.currentValue = currentValue;
+  }
+  static {
+    this.EVENT_NAME = "yatl-cell-edit";
+  }
+};
+var YatlTableSearchEvent = class _YatlTableSearchEvent extends YatlTableControllerEvent {
   constructor(query2) {
     super(_YatlTableSearchEvent.EVENT_NAME);
     this.query = query2;
@@ -172,7 +161,7 @@ var YatlTableSearchEvent = class _YatlTableSearchEvent extends YatlEvent {
     return new _YatlTableSearchEvent(this.query);
   }
 };
-var YatlTableViewChangeEvent = class _YatlTableViewChangeEvent extends YatlEvent {
+var YatlTableViewChangeEvent = class _YatlTableViewChangeEvent extends YatlTableControllerEvent {
   constructor(data) {
     super(_YatlTableViewChangeEvent.EVENT_NAME);
     this.data = data;
@@ -184,7 +173,7 @@ var YatlTableViewChangeEvent = class _YatlTableViewChangeEvent extends YatlEvent
     return new _YatlTableViewChangeEvent(this.data);
   }
 };
-var YatlTableStateChangeEvent = class _YatlTableStateChangeEvent extends YatlEvent {
+var YatlTableStateChangeEvent = class _YatlTableStateChangeEvent extends YatlTableControllerEvent {
   constructor(state2, triggers) {
     super(_YatlTableStateChangeEvent.EVENT_NAME);
     this.state = state2;
@@ -198,6 +187,139 @@ var YatlTableStateChangeEvent = class _YatlTableStateChangeEvent extends YatlEve
   }
 };
 
+// src/editors/input-editor.ts
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+
+// src/editors/base.ts
+var BaseEditor = class {
+  constructor(options) {
+    this.options = options;
+  }
+  reset() {
+    this.currentValue = void 0;
+  }
+  canEdit(field, row) {
+    return this.options?.canEdit?.(field, row) ?? true;
+  }
+  save(originalValue, field, row, _controller) {
+    if (this.currentValue === void 0 || this.currentValue === originalValue) {
+      return;
+    }
+    if (!this.options?.onSave) {
+      return this.currentValue;
+    }
+    return this.options.onSave(originalValue, this.currentValue, field, row);
+  }
+};
+
+// src/editors/input-editor.ts
+var InputEditor = class extends BaseEditor {
+  constructor(options) {
+    super(options);
+    this.options = options;
+    this.handleChange = (event) => {
+      const target = event.target;
+      const { type, max, min } = this.options ?? {};
+      if (type === "checkbox") {
+        this.currentValue = target.checked;
+      } else if (type === "date" || type === "datetime-local") {
+        this.currentValue = target.valueAsDate;
+      } else if (type === "number") {
+        let value = target.valueAsNumber;
+        if (isNaN(value)) {
+          value = null;
+        } else {
+          if (typeof max === "number" && value > max) {
+            target.valueAsNumber = max;
+            value = max;
+          } else if (typeof min === "number" && value < min) {
+            target.valueAsNumber = min;
+            value = min;
+          }
+          this.currentValue = value;
+        }
+      } else {
+        this.currentValue = target.value;
+      }
+    };
+  }
+  render(value, _field, _row, _controller) {
+    return html`
+      <input
+        .value=${live(String(value ?? ""))}
+        type=${ifDefined(this.options?.type)}
+        minlength=${ifDefined(this.options?.minlength)}
+        maxlength=${ifDefined(this.options?.maxlength)}
+        min=${ifDefined(this.options?.min)}
+        max=${ifDefined(this.options?.max)}
+        step=${ifDefined(this.options?.step)}
+        pattern=${ifDefined(this.options?.pattern)}
+        placeholder=${ifDefined(this.options?.placeholder)}
+        autofocus
+        @input=${this.handleChange}
+      />
+    `;
+  }
+};
+
+// src/editors/number-editor.ts
+var NumberEditor = class extends InputEditor {
+  constructor(options) {
+    super({
+      type: "number",
+      ...options
+    });
+  }
+};
+
+// src/editors/select-editor.ts
+import { html as html2 } from "lit";
+import { live as live2 } from "lit/directives/live.js";
+import { repeat } from "lit/directives/repeat.js";
+var SelectEditor = class extends BaseEditor {
+  constructor(options) {
+    super(options);
+    this.options = options;
+    this.handleChange = (event) => {
+      const target = event.target;
+      this.currentValue = target.value;
+    };
+  }
+  render(value, field, row, controller) {
+    const values = controller.getColumnFilterValues(field, false);
+    return html2`
+      <select .value=${live2(String(value))} @change=${this.handleChange}>
+        ${repeat(
+      values.keys(),
+      (option) => option,
+      (option) => this.renderOption(option, option === value)
+    )}
+      </select>
+    `;
+  }
+  renderOption(option, select) {
+    const [value, display] = this.options?.labelRenderer?.(option) ?? [
+      String(option),
+      String(option)
+    ];
+    return html2`
+      <option value=${value} ?selected=${select}>${display}</option>
+    `;
+  }
+};
+
+// src/editors/text-editor.ts
+var TextEditor = class extends InputEditor {
+  constructor(options) {
+    super({
+      type: "text",
+      ...options
+    });
+  }
+};
+
 // src/utils/columns.ts
 function findColumn(columns, field) {
   return columns.find((c) => c.field === field);
@@ -310,7 +432,7 @@ var TypedEventTarget = class extends EventTarget {
 };
 
 // src/table/utils.ts
-import { html } from "lit";
+import { html as html3 } from "lit";
 function highlightText(text, ranges) {
   if (!text || !ranges || ranges.length === 0) {
     return text;
@@ -337,25 +459,25 @@ function highlightText(text, ranges) {
       result.push(text.slice(lastIndex, safeStart));
     }
     result.push(
-      html`<mark class="highlight">${text.slice(safeStart, safeEnd)}</mark>`
+      html3`<mark class="highlight">${text.slice(safeStart, safeEnd)}</mark>`
     );
     lastIndex = safeEnd;
   }
   if (lastIndex < text.length) {
     result.push(text.slice(lastIndex));
   }
-  return html`${result}`;
+  return html3`${result}`;
 }
 var toHumanReadable = (str) => {
   return str.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (char) => char.toUpperCase());
 };
 
 // src/table/table.ts
-import { html as html2, LitElement, nothing } from "lit";
+import { html as html4, 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 { ifDefined as ifDefined2 } from "lit/directives/if-defined.js";
+import { repeat as repeat2 } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 import "@lit-labs/virtualizer";
 import { virtualizerRef } from "@lit-labs/virtualizer/virtualize.js";
@@ -399,7 +521,7 @@ function createRankMap(values, locale) {
 // src/table-controller/table-controller.ts
 var STATE_SAVE_DEBOUNCE = 1e3;
 var DEFAULT_STORAGE_OPTIONS = {
-  storage: "local",
+  storage: window.localStorage,
   saveColumnSortOrders: true,
   saveColumnVisibility: true,
   saveColumnWidths: true,
@@ -419,8 +541,8 @@ var YatlTableController = class extends TypedEventTarget {
     // #region State Data
     // Property data
     this.hosts = /* @__PURE__ */ new Set();
-    this._enableSearchTokenization = false;
-    this._enableSearchScoring = false;
+    this._tokenizedSearch = false;
+    this._scoredSearch = false;
     // Original options passed by the user
     this._columns = [];
     // Options mapped by field for faster lookup
@@ -464,10 +586,10 @@ var YatlTableController = class extends TypedEventTarget {
       this.attach(host);
     }
     if (options) {
-      if (options.enableSearchScoring !== void 0)
-        this.enableSearchScoring = options.enableSearchScoring;
-      if (options.enableSearchTokenization !== void 0)
-        this.enableSearchTokenization = options.enableSearchTokenization;
+      if (options.scoredSearch !== void 0)
+        this.scoredSearch = options.scoredSearch;
+      if (options.tokenizedSearch !== void 0)
+        this.tokenizedSearch = options.tokenizedSearch;
       if (options.searchTokenizer !== void 0)
         this.searchTokenizer = options.searchTokenizer;
       if (options.rowIdCallback !== void 0)
@@ -482,46 +604,6 @@ var YatlTableController = class extends TypedEventTarget {
   }
   // #endregion
   // #region Properties
-  /**
-   * Enables tokenized search behavior.
-   * When enabled, the search query is split into individual tokens using the
-   * `searchTokenizer` function (defaults to splitting on whitespace).
-   * A row is considered a match if **ANY** of the tokens appear in the searchable fields.
-   * @default false
-   */
-  get enableSearchTokenization() {
-    return this._enableSearchTokenization;
-  }
-  set enableSearchTokenization(enable) {
-    if (this._enableSearchTokenization === enable) {
-      return;
-    }
-    this._enableSearchTokenization = enable;
-    this.updateInternalQuery();
-    this.filterDirty = true;
-    this.requestUpdate("enableSearchTokenization");
-  }
-  /**
-   * Enables weighted relevance scoring for search results.
-   * When enabled, exact matches and prefix matches are ranked higher than substring matches.
-   * Rows are sorted by their relevance score descending.
-   * @default false
-   */
-  get enableSearchScoring() {
-    return this._enableSearchScoring;
-  }
-  set enableSearchScoring(enable) {
-    if (this._enableSearchScoring === enable) {
-      return;
-    }
-    this._enableSearchScoring = enable;
-    this.filterDirty = true;
-    this.requestUpdate("enableSearchScoring");
-  }
-  /**
-   * The definitions for the columns to be rendered.
-   * This defines the field mapping, titles, sortability, and other static options.
-   */
   get columns() {
     return [...this._columns];
   }
@@ -563,10 +645,43 @@ var YatlTableController = class extends TypedEventTarget {
     }
     this.requestUpdate("columnStates");
   }
-  /**
-   * The current text string used to filter the table data.
-   * Setting this property triggers a new search and render cycle.
-   */
+  get data() {
+    return [...this._data];
+  }
+  set data(data) {
+    if (this._data === data) {
+      return;
+    }
+    this._data = [...data];
+    this.createMetadata();
+    this._dataUpdateTimestamp = /* @__PURE__ */ new Date();
+    this.filterDirty = true;
+    this.requestUpdate("data");
+  }
+  get filteredData() {
+    if (this.filterDirty) {
+      this.filterRows();
+    } else if (this.sortDirty) {
+      this.sortRows();
+    }
+    this.filterDirty = false;
+    this.sortDirty = false;
+    return [...this._filteredData];
+  }
+  get dataUpdateTimestamp() {
+    return this._dataUpdateTimestamp;
+  }
+  get filters() {
+    return this._filters;
+  }
+  set filters(filters) {
+    if (this._filters === filters) {
+      return;
+    }
+    this._filters = filters;
+    this.filterDirty = true;
+    this.requestUpdate("filters");
+  }
   get searchQuery() {
     return this._searchQuery;
   }
@@ -579,11 +694,29 @@ var YatlTableController = class extends TypedEventTarget {
     this.filterDirty = true;
     this.requestUpdate("searchQuery");
   }
-  /**
-   * A function that splits the search query into tokens.
-   * Only used if `enableSearchTokenization` is true.
-   * @default whitespaceTokenizer
-   */
+  get tokenizedSearch() {
+    return this._tokenizedSearch;
+  }
+  set tokenizedSearch(enable) {
+    if (this._tokenizedSearch === enable) {
+      return;
+    }
+    this._tokenizedSearch = enable;
+    this.updateInternalQuery();
+    this.filterDirty = true;
+    this.requestUpdate("tokenizedSearch");
+  }
+  get scoredSearch() {
+    return this._scoredSearch;
+  }
+  set scoredSearch(enable) {
+    if (this._scoredSearch === enable) {
+      return;
+    }
+    this._scoredSearch = enable;
+    this.filterDirty = true;
+    this.requestUpdate("scoredSearch");
+  }
   get searchTokenizer() {
     return this._searchTokenizer;
   }
@@ -595,38 +728,6 @@ var YatlTableController = class extends TypedEventTarget {
     this.filterDirty = true;
     this.requestUpdate("searchTokenizer");
   }
-  /**
-   * An optional set of criteria to filter the visible rows.
-   * This runs **before** the global search query is applied.
-   * * You can provide:
-   * 1. A **Partial Object**: matches rows where specific keys equal specific values (AND logic).
-   * 2. A **Callback Function**: returns `true` to keep the row, `false` to hide it.
-   * * @example
-   * // 1. Object Syntax (Simple Exact Match)
-   * // Shows rows where status is 'active' AND role is 'admin'
-   * table.filters = { status: 'active', role: 'admin' };
-   * * @example
-   * // 2. Callback Syntax (Complex Logic)
-   * // Shows rows where age is over 21 OR they are a VIP
-   * table.filters = (row) => row.age > 21 || row.isVip;
-   */
-  get filters() {
-    return this._filters;
-  }
-  set filters(filters) {
-    if (this._filters === filters) {
-      return;
-    }
-    this._filters = filters;
-    this.filterDirty = true;
-    this.requestUpdate("filters");
-  }
-  /**
-   * The row selection method to use.
-   * * single - Only a single row can be selected at a time
-   * * multi - Multiple rows can be selected at a time
-   * * null - Disable row selection
-   */
   get rowSelectionMethod() {
     return this._rowSelectionMethod;
   }
@@ -637,11 +738,6 @@ var YatlTableController = class extends TypedEventTarget {
     this._rowSelectionMethod = selection;
     this.requestUpdate("rowSelectionMethod");
   }
-  /**
-   * List of currently selected row indexes.
-   * * **NOTE**: These indexes are based off the of
-   * the original data array index, *not* the filtered data.
-   */
   get selectedRowIds() {
     let selectedRows = [...this._selectedRowIds];
     if (this.rowSelectionMethod === "single") {
@@ -658,23 +754,6 @@ var YatlTableController = class extends TypedEventTarget {
     this._selectedRowIds = new Set(rows);
     this.requestUpdate("selectedRowIds");
   }
-  /**
-   * Configuration options for automatically saving and restoring table state
-   * (column width, order, visibility, etc.) to browser storage.
-   */
-  get storageOptions() {
-    return this._storageOptions ? { ...this._storageOptions } : null;
-  }
-  set storageOptions(options) {
-    if (this._storageOptions === options) {
-      return;
-    }
-    this._storageOptions = options ? { ...options } : null;
-    if (!this.hasRestoredState) {
-      this.loadStateFromStorage();
-      this.requestUpdate("storageOptions");
-    }
-  }
   get rowIdCallback() {
     return this._rowIdCallback;
   }
@@ -689,32 +768,18 @@ var YatlTableController = class extends TypedEventTarget {
     }
     this.requestUpdate("rowIdCallback");
   }
-  /**
-   * The array of data objects to be displayed.
-   * Objects must satisfy the `WeakKey` constraint (objects only, no primitives).
-   */
-  get data() {
-    return [...this._data];
-  }
-  set data(data) {
-    this._data = [...data];
-    this.createMetadata();
-    this._dataUpdateTimestamp = /* @__PURE__ */ new Date();
-    this.filterDirty = true;
-    this.requestUpdate("data");
+  get storageOptions() {
+    return this._storageOptions ? { ...this._storageOptions } : null;
   }
-  get filteredData() {
-    if (this.filterDirty) {
-      this.filterRows();
-    } else if (this.sortDirty) {
-      this.sortRows();
+  set storageOptions(options) {
+    if (this._storageOptions === options) {
+      return;
+    }
+    this._storageOptions = options ? { ...options } : null;
+    if (!this.hasRestoredState) {
+      this.loadStateFromStorage();
+      this.requestUpdate("storageOptions");
     }
-    this.filterDirty = false;
-    this.sortDirty = false;
-    return [...this._filteredData];
-  }
-  get dataUpdateTimestamp() {
-    return this._dataUpdateTimestamp;
   }
   attach(host) {
     this.hosts.add(host);
@@ -791,9 +856,14 @@ var YatlTableController = class extends TypedEventTarget {
       if (column?.valueFormatter) {
         value = column.valueFormatter(value, row);
       }
-      if (value != null || includeNull) {
-        const valueCount = values.get(value) ?? 0;
-        values.set(value, valueCount + 1);
+      if (!Array.isArray(value)) {
+        value = [value];
+      }
+      for (const item of value) {
+        if (item != null || includeNull) {
+          const valueCount = values.get(item) ?? 0;
+          values.set(item, valueCount + 1);
+        }
       }
     }
     return values;
@@ -1028,8 +1098,7 @@ var YatlTableController = class extends TypedEventTarget {
   updateRow(rowId, data) {
     const row = this.idToRowMap.get(rowId);
     if (row) {
-      Object.assign(row, data);
-      this.requestUpdate("data");
+      this.updateRowData(row, data);
     }
   }
   /**
@@ -1048,8 +1117,7 @@ var YatlTableController = class extends TypedEventTarget {
   updateRowAtIndex(index, data) {
     const row = this.data[index];
     if (row) {
-      Object.assign(row, data);
-      this.requestUpdate("data");
+      this.updateRowData(row, data);
     }
   }
   /**
@@ -1128,6 +1196,9 @@ var YatlTableController = class extends TypedEventTarget {
         new YatlTableStateChangeEvent(this.getTableState(), triggers)
       );
     }
+    if (props.includes("data")) {
+      this.filterDirty = true;
+    }
     for (const host of this.hosts) {
       host.requestUpdate();
     }
@@ -1193,7 +1264,7 @@ var YatlTableController = class extends TypedEventTarget {
       }
     };
     if (query2.quoted || !tokens) {
-      if (!this.enableSearchScoring) {
+      if (!this.scoredSearch) {
         if (value.includes(query2.value)) {
           result.score = 1;
           addRangesFromValue(query2.value);
@@ -1205,7 +1276,7 @@ var YatlTableController = class extends TypedEventTarget {
       }
       return result;
     }
-    if (!this.enableSearchScoring) {
+    if (!this.scoredSearch) {
       const isMatch = tokens.some((token) => token.includes(query2.value));
       if (isMatch) {
         result.score = 1;
@@ -1340,7 +1411,7 @@ var YatlTableController = class extends TypedEventTarget {
     this._filteredData = this._filteredData.toSorted((a, b) => {
       const aMetadata = this.rowMetadata.get(a);
       const bMetadata = this.rowMetadata.get(b);
-      if (this.enableSearchScoring && this.queryTokens) {
+      if (this.scoredSearch && this.queryTokens) {
         const aValue = aMetadata.searchScore || 0;
         const bValue = bMetadata.searchScore || 0;
         if (aValue > bValue) return -1;
@@ -1403,6 +1474,11 @@ var YatlTableController = class extends TypedEventTarget {
       }
     }
   }
+  updateRowData(row, data) {
+    Object.assign(row, data);
+    this.createMetadata();
+    this.requestUpdate("data");
+  }
   updateInternalQuery() {
     if (this.searchQuery.length === 0) {
       this.queryTokens = null;
@@ -1411,7 +1487,7 @@ var YatlTableController = class extends TypedEventTarget {
     this.queryTokens = [
       { value: this.searchQuery.toLocaleLowerCase(), quoted: true }
     ];
-    if (this.enableSearchTokenization) {
+    if (this.tokenizedSearch) {
       this.queryTokens.push(...this.searchTokenizer(this.searchQuery));
     }
   }
@@ -1453,7 +1529,7 @@ var YatlTableController = class extends TypedEventTarget {
       }
       savedTableState.columns?.push(savedColumnState);
     }
-    const storage = options.storage === "session" ? sessionStorage : localStorage;
+    const storage = options.storage ?? window.localStorage;
     try {
       storage.setItem(options.key, JSON.stringify(savedTableState));
     } catch (error) {
@@ -1465,7 +1541,8 @@ var YatlTableController = class extends TypedEventTarget {
       return;
     }
     const options = { ...DEFAULT_STORAGE_OPTIONS, ...this.storageOptions };
-    const json = localStorage.getItem(options.key);
+    const storage = options.storage ?? window.localStorage;
+    const json = storage.getItem(options.key);
     if (!json) {
       return;
     }
@@ -1554,7 +1631,7 @@ var table_styles_default = css`
     );
 
     --table-header-text: var(--yatl-table-header-text, var(--yatl-text-1));
-    --table-header-bg: var(--yatl-table-header-bg, var(--yatl-surface-lowered));
+    --table-header-bg: var(--yatl-table-header-bg, var(--yatl-surface-2));
     --table-header-hover-bg: var(
       --yatl-table-header-hover-bg,
       color-mix(in srgb, var(--yatl-color-mix) 4%, var(--table-header-bg))
@@ -1656,6 +1733,20 @@ var table_styles_default = css`
       justify-content: flex-end;
     }
 
+    .cell.is-editing {
+      padding: 0;
+    }
+
+    .cell.is-editing > * {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      outline: none;
+      padding: var(--yatl-spacing-m);
+      border: 1px solid var(--yatl-color-brand);
+      border-radius: var(--yatl-radius-xs);
+    }
+
     .table.resizing * {
       cursor: col-resize !important;
     }
@@ -1683,8 +1774,17 @@ var table_styles_default = css`
       transition: background-color 0.2s;
     }
 
+    .cell-wrapper:has(.cell-index) {
+      overflow: visible;
+      background-color: var(--table-header-bg);
+      height: calc(100% + var(--table-border-width));
+    }
+
     .row-number-cell {
       background-color: var(--table-header-bg);
+      border-right-width: var(--table-border-width);
+      border-right-color: var(--table-border-color);
+      border-right-style: solid;
     }
 
     .message {
@@ -1731,11 +1831,10 @@ var table_styles_default = css`
   }
 
   /* Layout stuff
-  * Most of this is functional and needed
-  * for the table to work properly. 
-  * Modify with caution!
-  */
-  /* stylelint-disable-next-line no-duplicate-selectors */
+   * Most of this is functional and needed
+   * for the table to work properly. 
+   * Modify with caution!
+   */
   :host {
     display: block;
     width: 100%;
@@ -1916,6 +2015,21 @@ var table_styles_default = css`
     white-space: nowrap;
     overflow: hidden;
   }
+
+  @media print {
+    .table {
+      color: black;
+      width: 100%;
+    }
+
+    .row {
+      break-inside: avoid;
+    }
+
+    .cell {
+      border: 1px solid black;
+    }
+  }
 `;
 
 // src/table/table.ts
@@ -1923,22 +2037,20 @@ var YatlTable = class extends LitElement {
   constructor() {
     super(...arguments);
     // #region --- State Data ---
-    // Property data
     this.resizeState = null;
     // Column drag & drop state
     this.dragColumn = null;
     this.useYatlUi = false;
-    // #endregion
-    // #region --- Properties ---
+    this.editingState = null;
     this._controller = new YatlTableController(this);
     this.striped = false;
-    this.sortable = true;
-    this.resizable = true;
-    this.enableVirtualScroll = false;
-    this.enableSearchHighlight = true;
-    this.enableColumnReorder = true;
-    this.enableRowNumberColumn = true;
-    this.enableFooter = true;
+    this.sortable = false;
+    this.resizable = false;
+    this.reorderable = false;
+    this.rowNumbers = false;
+    this.virtualScroll = false;
+    this.hideFooter = false;
+    this.disableEditing = false;
     this.nullValuePlaceholder = "-";
     this.emptyMessage = "No records to display";
     this.noResultsMessage = "No matching records found";
@@ -1956,7 +2068,7 @@ var YatlTable = class extends LitElement {
       "yatl-table-view-change"
     ];
     this.redispatchControllerEvent = (event) => {
-      if (event instanceof YatlEvent) {
+      if (event instanceof YatlTableControllerEvent) {
         this.dispatchEvent(event.clone());
       }
     };
@@ -1986,7 +2098,13 @@ var YatlTable = class extends LitElement {
       this.sort(column.field, sortOrder, !multiSort);
     };
     this.handleCellClick = (event, row, field) => {
-      if (window.getSelection()?.toString()) return;
+      if (this.editingState || window.getSelection()?.toString()) {
+        return;
+      }
+      const target = event.target;
+      if (target.tagName === "A" || target.tagName === "BUTTON" || target.tagName === "YATL-BUTTON") {
+        return;
+      }
       const rowId = this.controller.getRowId(row);
       const rowIndex = this.controller.getRowIndex(row);
       this.dispatchEvent(
@@ -2100,6 +2218,8 @@ var YatlTable = class extends LitElement {
       return this.virtualizer[virtualizerRef];
     }
   }
+  // #endregion
+  // #region --- Properties ---
   get controller() {
     return this._controller;
   }
@@ -2115,36 +2235,12 @@ var YatlTable = class extends LitElement {
     oldController.detach(this);
     controller.attach(this);
     this._controller = controller;
-    this.requestUpdate("controller", oldController);
-  }
-  get enableSearchTokenization() {
-    return this.controller.enableSearchTokenization;
-  }
-  set enableSearchTokenization(enable) {
-    const oldValue = this.enableSearchTokenization;
-    if (oldValue === enable) {
-      return;
-    }
-    this.controller.enableSearchTokenization = enable;
-    this.requestUpdate("enableSearchTokenization", oldValue);
-  }
-  get enableSearchScoring() {
-    return this.controller.enableSearchScoring;
-  }
-  set enableSearchScoring(enable) {
-    const oldValue = this.enableSearchScoring;
-    if (oldValue === enable) {
-      return;
-    }
-    this.controller.enableSearchScoring = enable;
-    this.requestUpdate("enableSearchScoring", oldValue);
   }
   get columns() {
     return this.controller.columns;
   }
   set columns(columns) {
-    const oldValue = this.columns;
-    if (oldValue === columns) {
+    if (this.columns === columns) {
       return;
     }
     for (const column of columns) {
@@ -2153,7 +2249,6 @@ var YatlTable = class extends LitElement {
       }
     }
     this.controller.columns = columns;
-    this.requestUpdate("columns", oldValue);
   }
   /**
    * Gets a list of columns with the display role
@@ -2166,7 +2261,6 @@ var YatlTable = class extends LitElement {
     return this.controller.columnStates;
   }
   set columnStates(states) {
-    const oldValue = this.columnStates;
     let changed = false;
     for (const state2 of states) {
       const oldState = this.getColumnState(state2.field);
@@ -2180,51 +2274,76 @@ var YatlTable = class extends LitElement {
       return;
     }
     this.controller.columnStates = states;
-    this.requestUpdate("columnStates", oldValue);
   }
+  get data() {
+    return this.controller.data;
+  }
+  set data(value) {
+    this.controller.data = value;
+  }
+  get filteredData() {
+    return this.controller.filteredData;
+  }
+  get dataUpdateTimestamp() {
+    return this.controller.dataUpdateTimestamp;
+  }
+  get filters() {
+    return this.controller.filters;
+  }
+  set filters(filters) {
+    if (this.filters === filters) {
+      return;
+    }
+    this.controller.filters = filters;
+  }
+  /** @attr search-query */
   get searchQuery() {
     return this.controller.searchQuery;
   }
   set searchQuery(query2) {
-    const oldValue = this.searchQuery;
-    if (oldValue === query2) {
+    if (this.searchQuery === query2) {
       return;
     }
     this.controller.searchQuery = query2;
-    this.requestUpdate("searchQuery", oldValue);
   }
-  get searchTokenizer() {
-    return this.controller.searchTokenizer;
+  /** @attr tokenized-search */
+  get tokenizedSearch() {
+    return this.controller.tokenizedSearch;
   }
-  set searchTokenizer(tokenizer) {
-    const oldValue = this.searchTokenizer;
-    if (oldValue === tokenizer) {
+  set tokenizedSearch(enable) {
+    if (this.tokenizedSearch === enable) {
       return;
     }
-    this.controller.searchTokenizer = tokenizer;
-    this.requestUpdate("searchTokenizer", oldValue);
+    this.controller.tokenizedSearch = enable;
   }
-  get filters() {
-    return this.controller.filters;
+  /** @attr scored-search */
+  get scoredSearch() {
+    return this.controller.scoredSearch;
   }
-  set filters(filters) {
-    const oldValue = this.filters;
-    if (oldValue === filters) {
+  set scoredSearch(enable) {
+    if (this.scoredSearch === enable) {
       return;
     }
-    this.controller.filters = filters;
-    this.requestUpdate("filters", oldValue);
+    this.controller.scoredSearch = enable;
+  }
+  get searchTokenizer() {
+    return this.controller.searchTokenizer;
   }
+  set searchTokenizer(tokenizer) {
+    if (this.searchTokenizer === tokenizer) {
+      return;
+    }
+    this.controller.searchTokenizer = tokenizer;
+  }
+  /** @attr row-selection-method */
   get rowSelectionMethod() {
     return this.controller.rowSelectionMethod;
   }
   set rowSelectionMethod(selection) {
-    const oldValue = this.rowSelectionMethod;
-    if (oldValue === selection) {
+    if (this.rowSelectionMethod === selection) {
       return;
     }
     this.controller.rowSelectionMethod = selection;
-    this.requestUpdate("rowSelectionMethod", oldValue);
   }
   get selectedRowIds() {
     return this.controller.selectedRowIds;
@@ -2235,40 +2354,21 @@ var YatlTable = class extends LitElement {
       return;
     }
     this.controller.selectedRowIds = rows;
-    this.requestUpdate("selectedRows", [...oldValue]);
   }
   get storageOptions() {
     return this.controller.storageOptions;
   }
   set storageOptions(options) {
-    const oldValue = this.storageOptions;
     this.controller.storageOptions = options;
-    this.requestUpdate("storageOptions", oldValue);
   }
   get rowIdCallback() {
     return this.controller.rowIdCallback;
   }
   set rowIdCallback(callback) {
-    const oldValue = this.rowIdCallback;
-    if (oldValue === callback) {
+    if (this.rowIdCallback === callback) {
       return;
     }
     this.controller.rowIdCallback = callback;
-    this.requestUpdate("rowIdCallback", oldValue);
-  }
-  get data() {
-    return this.controller.data;
-  }
-  set data(value) {
-    const oldValue = this.data;
-    this.controller.data = value;
-    this.requestUpdate("data", oldValue);
-  }
-  get filteredData() {
-    return this.controller.filteredData;
-  }
-  get dataUpdateTimestamp() {
-    return this.controller.dataUpdateTimestamp;
   }
   // #endregion
   // #region --- Public Methods ---
@@ -2396,6 +2496,38 @@ var YatlTable = class extends LitElement {
     a.click();
     a.remove();
   }
+  async print(title) {
+    if (title) {
+      document.title = title;
+    }
+    const printSheet = new CSSStyleSheet();
+    printSheet.replaceSync(`
+      @media print {
+        body > *:not(.yatl-printable) { 
+          display: none !important; 
+        }
+        
+        body { 
+          height: auto !important; 
+          overflow: visible !important; 
+          background: white !important;
+        }
+      }
+    `);
+    const documentStyleSheets = document.adoptedStyleSheets;
+    document.adoptedStyleSheets = [...documentStyleSheets, printSheet];
+    const printTable = document.createElement("yatl-table");
+    printTable.classList.add("yatl-printable");
+    printTable.controller = this.controller;
+    printTable.virtualScroll = false;
+    document.body.append(printTable);
+    await printTable.updateComplete;
+    requestAnimationFrame(() => {
+      window.print();
+      printTable.remove();
+      document.adoptedStyleSheets = documentStyleSheets;
+    });
+  }
   scrollToRow(row) {
     const index = this.data.findIndex((v) => v === row);
     if (typeof index === "number") {
@@ -2537,7 +2669,7 @@ var YatlTable = class extends LitElement {
   // #endregion
   // #region Render Methods
   renderColumnSortIcon(column, state2) {
-    return column.sortable ?? this.sortable ? html2`<div
+    return column.sortable ?? this.sortable ? html4`<div
           part="header-sort-icon"
           class=${classMap({
       "sort-icon": true,
@@ -2547,7 +2679,7 @@ var YatlTable = class extends LitElement {
         ></div>` : nothing;
   }
   renderColumnResizer(column, _state) {
-    return column.resizable ?? this.resizable ? html2`
+    return column.resizable ?? this.resizable ? html4`
           <div
             part="header-resizer"
             class="resizer"
@@ -2571,15 +2703,16 @@ var YatlTable = class extends LitElement {
       cell: true,
       sortable: column.sortable ?? this.sortable
     };
-    return this.renderCellWrapper(html2`
+    return this.renderCellWrapper(html4`
       <div
-        role=${ifDefined(role)}
-        aria-hidden=${ifDefined(hidden)}
+        role=${ifDefined2(role)}
+        aria-hidden=${ifDefined2(hidden)}
         aria-sort=${ariaSort}
         aria-label=${title}
         part="cell header-cell"
         class=${classMap(classes)}
-        draggable=${ifDefined(this.enableColumnReorder ? true : void 0)}
+        title=${title}
+        draggable=${ifDefined2(this.reorderable ? true : void 0)}
         data-field=${column.field}
         @dragstart=${(event) => this.handleDragColumnStart(event, column.field)}
         @dragenter=${this.handleDragColumnEnter}
@@ -2602,20 +2735,20 @@ var YatlTable = class extends LitElement {
   }
   renderRowNumberHeader() {
     return this.renderCellWrapper(
-      html2`<div part="cell-index" class="cell-index"></div>`
+      html4`<div part="cell-index" class="cell-index"></div>`
     );
   }
   renderSelectionHeader() {
     return this.renderCellWrapper(
-      html2`<div part="cell-selector" class="cell-selector"></div>`
+      html4`<div part="cell-selector" class="cell-selector"></div>`
     );
   }
   renderHeader() {
     const classes = {
       header: true,
-      reorderable: this.enableColumnReorder
+      reorderable: this.reorderable
     };
-    return html2`
+    return html4`
       <div role="rowgroup" part="header" class=${classMap(classes)}>
         <div role="row" class="row header-row" part="row header-row">
           ${this.renderRowNumberHeader()} ${this.renderSelectionHeader()}
@@ -2632,7 +2765,7 @@ var YatlTable = class extends LitElement {
       return this.nullValuePlaceholder;
     }
     const indices = this.controller.getRowHighlightIndicies(row);
-    return this.enableSearchHighlight && indices ? highlightText(String(value), indices[column.field]) : value;
+    return indices ? highlightText(String(value), indices[column.field]) : value;
   }
   renderCell(column, row) {
     let value = getNestedValue(row, column.field);
@@ -2640,22 +2773,37 @@ var YatlTable = class extends LitElement {
     if (Array.isArray(userParts)) {
       userParts = userParts.join(" ");
     }
-    const isNumber = typeof value === "bigint" || typeof value === "number";
+    const inputType = this.getInputTypeFromValue(value);
     const classes = {
       cell: true,
-      "is-number": isNumber
+      "is-number": inputType === "number"
     };
+    const rowId = this.controller.getRowId(row);
+    const field = column.field;
+    if (column.editor && !this.disableEditing && this.editingState && this.editingState.id === rowId && this.editingState.field === field) {
+      return this.renderCellWrapper(html4`
+        <div
+          role="cell"
+          part="cell body-cell cell-${column.field}"
+          class=${classMap({ ...classes, "is-editing": true })}
+          data-field=${column.field}
+        >
+          ${column.editor.render(value, field, row, this.controller)}
+        </div>
+      `);
+    }
     if (typeof column.valueFormatter === "function") {
       value = column.valueFormatter(value, row);
     }
-    return this.renderCellWrapper(html2`
+    return this.renderCellWrapper(html4`
       <div
         role="cell"
         part="cell body-cell cell-${column.field} ${userParts}"
         data-field=${column.field}
         class=${classMap(classes)}
-        title=${ifDefined(value ? String(value) : void 0)}
-        @click=${(event) => this.handleCellClick(event, row, column.field)}
+        title=${ifDefined2(value ? String(value) : void 0)}
+        @click=${(event) => this.handleCellClick(event, row, field)}
+        @dblclick=${() => this.handleCellDoubleClick(row, field)}
       >
         <span class="truncate">
           ${this.renderCellContents(value, column, row)}
@@ -2664,12 +2812,12 @@ var YatlTable = class extends LitElement {
     `);
   }
   renderCheckbox(row, selected) {
-    return this.useYatlUi ? html2`<yatl-checkbox
+    return this.useYatlUi ? html4`<yatl-checkbox
           part="row-checkbox"
           class="row-checkbox"
           .checked=${selected}
           @change=${(event) => this.handleRowSelectionClicked(event, row)}
-        ></yatl-checkbox>` : html2`<input
+        ></yatl-checkbox>` : html4`<input
           part="row-checkbox"
           class="row-checkbox"
           type="checkbox"
@@ -2678,7 +2826,7 @@ var YatlTable = class extends LitElement {
         />`;
   }
   renderRowSelectorCell(row, selected) {
-    return this.renderCellWrapper(html2`
+    return this.renderCellWrapper(html4`
       <div part="cell body-cell" class="cell body-cell">
         <div part="row-selector-cell" class="row-selector-cell">
           <label> ${this.renderCheckbox(row, selected)} </label>
@@ -2687,7 +2835,7 @@ var YatlTable = class extends LitElement {
     `);
   }
   renderRowNumberCell(rowNumber) {
-    return this.renderCellWrapper(html2`
+    return this.renderCellWrapper(html4`
       <div part="cell body-cell" class="cell body-cell">
         <div part="row-number-cell" class="row-number-cell">${rowNumber}</div>
       </div>
@@ -2706,7 +2854,7 @@ var YatlTable = class extends LitElement {
       "row-odd": renderIndex % 2 !== 0
     };
     const rowIndex = renderIndex + 1;
-    return html2`
+    return html4`
       <div
         role="row"
         aria-rowindex=${rowIndex}
@@ -2722,22 +2870,22 @@ var YatlTable = class extends LitElement {
   }
   renderBodyContents() {
     if (!this.hasVisibleColumn()) {
-      return html2`
+      return html4`
         <div part="message" class="message">No visible columns.</div>
       `;
     }
     if (this.data.length === 0) {
-      return html2`
+      return html4`
         <div part="message" class="message">${this.emptyMessage}</div>
       `;
     }
     if (this.filteredData.length === 0) {
-      return html2`
+      return html4`
         <div part="message" class="message">${this.noResultsMessage}</div>
       `;
     }
-    if (this.enableVirtualScroll) {
-      return html2`
+    if (this.virtualScroll) {
+      return html4`
         <lit-virtualizer
           .items=${this.filteredData}
           .renderItem=${(item, index) => this.renderRow(item, index)}
@@ -2745,8 +2893,8 @@ var YatlTable = class extends LitElement {
         </lit-virtualizer>
       `;
     }
-    return html2`
-      ${repeat(
+    return html4`
+      ${repeat2(
       this.filteredData,
       (item) => this.controller.getRowId(item),
       (item, index) => this.renderRow(item, index)
@@ -2754,7 +2902,7 @@ var YatlTable = class extends LitElement {
     `;
   }
   renderFooter() {
-    if (!this.enableFooter) {
+    if (this.hideFooter) {
       return nothing;
     }
     const total = this.data.length;
@@ -2768,7 +2916,7 @@ var YatlTable = class extends LitElement {
       timeStyle: "short"
     });
     const lastUpdateText = this.dataUpdateTimestamp ? formatter.format(this.dataUpdateTimestamp) : "Never";
-    return html2`
+    return html4`
       <div part="footer" class="footer">
         <slot name="footer">
           <span part="row-count">${rowCountText}</span>
@@ -2782,7 +2930,7 @@ var YatlTable = class extends LitElement {
     const style = {
       "--grid-template": gridTemplate
     };
-    return html2`
+    return html4`
       <div
         role="table"
         aria-label="Data Table"
@@ -2802,13 +2950,15 @@ var YatlTable = class extends LitElement {
     `;
   }
   renderCellWrapper(content) {
-    return html2` <div class="cell-wrapper">${content}</div> `;
+    return html4` <div class="cell-wrapper">${content}</div> `;
   }
   // #endregion
   // #region --- Lifecycle Methods ---
   connectedCallback() {
     super.connectedCallback();
     this.addControllerListeners(this.controller);
+    this.addEventListener("mousedown", this.handleMouseDown);
+    this.addEventListener("keydown", this.handleCellInputKeypress);
     if (!this.useYatlUi) {
       customElements.whenDefined("yatl-checkbox").then(() => {
         this.useYatlUi = true;
@@ -2818,8 +2968,21 @@ var YatlTable = class extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeControllerListeners(this.controller);
-    window.addEventListener("mousemove", this.handleResizeMouseMove);
-    window.addEventListener("mouseup", this.handleResizeMouseUp);
+    this.removeEventListener("mousedown", this.handleMouseDown);
+    this.removeEventListener("keydown", this.handleCellInputKeypress);
+    window.removeEventListener("mousemove", this.handleResizeMouseMove);
+    window.removeEventListener("mouseup", this.handleResizeMouseUp);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.editor && document.activeElement !== this.editor) {
+      setTimeout(() => {
+        this.editor?.focus();
+        if (this.editor instanceof HTMLInputElement) {
+          this.editor.select();
+        }
+      });
+    }
   }
   addControllerListeners(controller) {
     for (const name of this.eventNames) {
@@ -2840,7 +3003,7 @@ var YatlTable = class extends LitElement {
    */
   getGridWidths() {
     const widths = [];
-    if (this.enableRowNumberColumn) {
+    if (this.rowNumbers) {
       widths.push("var(--yatl-row-number-column-width, 48px)");
     } else {
       widths.push("0");
@@ -2857,7 +3020,7 @@ var YatlTable = class extends LitElement {
         if (hasPixelWidth) {
           widths.push(`${state2.width}px`);
         } else {
-          widths.push("minmax(0, 1fr)");
+          widths.push("minmax(50px, 1fr)");
         }
       } else {
         if (hasPixelWidth) {
@@ -2869,6 +3032,121 @@ var YatlTable = class extends LitElement {
     }
     return widths;
   }
+  getInputTypeFromValue(value) {
+    const valueType = typeof value;
+    if (valueType === "bigint" || valueType === "number") {
+      return "number";
+    }
+    if (valueType === "boolean") {
+      return "boolean";
+    }
+    if (value instanceof Date) {
+      return "date";
+    }
+    return "text";
+  }
+  getNextEditableField(row, currentField) {
+    let index = 0;
+    if (currentField) {
+      index = this.displayColumns.findIndex((c) => c.field === currentField);
+      if (index < 0) {
+        index = 0;
+      } else {
+        index++;
+      }
+    }
+    for (const col of this.displayColumns.slice(index)) {
+      if (col.editor && col.editor.canEdit(col.field, row)) {
+        return col.field;
+      }
+    }
+  }
+  async saveEdits() {
+    if (!this.editingState) {
+      return;
+    }
+    const { id: rowId, field, originalValue } = this.editingState;
+    const column = this.getDisplayColumn(field);
+    const row = this.getRow(rowId);
+    if (!column?.editor || !row) {
+      return;
+    }
+    let value;
+    const result = column.editor.save(
+      originalValue,
+      field,
+      row,
+      this.controller
+    );
+    if (result instanceof Promise) {
+      value = await result;
+    } else {
+      value = result;
+    }
+    if (value !== void 0) {
+      const updateData = {};
+      setNestedValue(updateData, field, value);
+      this.updateRow(rowId, updateData);
+      this.dispatchEvent(
+        new YatlCellEditEvent(row, rowId, field, originalValue, value)
+      );
+    }
+  }
+  handleCellDoubleClick(row, field) {
+    const column = this.getDisplayColumn(field);
+    if (!column || !column.editor || !column.editor.canEdit(field, row)) {
+      return;
+    }
+    column.editor.reset();
+    const value = getNestedValue(row, field);
+    this.editingState = {
+      id: this.controller.getRowId(row),
+      field,
+      originalValue: value
+    };
+  }
+  handleCellInputKeypress(event) {
+    if (!this.editingState) {
+      return;
+    }
+    if (event.key === "Escape") {
+      this.editingState = null;
+    } else if (event.key === "Enter") {
+      this.saveEdits();
+      this.editingState = null;
+    } else if (event.key === "Tab") {
+      this.saveEdits();
+      const { id: rowId } = this.editingState;
+      const row = this.getRow(rowId);
+      let nextColumn = this.getNextEditableField(row, this.editingState.field);
+      if (nextColumn) {
+        return this.handleCellDoubleClick(row, nextColumn);
+      }
+      let rowIndex = this.filteredData.indexOf(row);
+      if (rowIndex < 0) {
+        return;
+      }
+      rowIndex++;
+      if (rowIndex >= this.filteredData.length) {
+        rowIndex = 0;
+      }
+      const nextRow = this.filteredData[rowIndex];
+      nextColumn = this.getNextEditableField(nextRow);
+      if (!nextColumn) {
+        return;
+      }
+      this.handleCellDoubleClick(nextRow, nextColumn);
+      event.preventDefault();
+    }
+  }
+  handleMouseDown(event) {
+    const containsEditing = event.composedPath().filter((e) => e instanceof HTMLElement).some((e) => e.classList.contains("is-editing"));
+    if (this.editingState && !containsEditing) {
+      console.log("saving");
+      this.saveEdits();
+      this.editingState = null;
+    }
+  }
   handleResizeMouseDown(event, field) {
     event.preventDefault();
     event.stopPropagation();
@@ -2918,89 +3196,100 @@ __decorateClass([
 __decorateClass([
   query("lit-virtualizer")
 ], YatlTable.prototype, "virtualizer", 2);
+__decorateClass([
+  query(".cell.is-editing > *")
+], YatlTable.prototype, "editor", 2);
 __decorateClass([
   state()
 ], YatlTable.prototype, "useYatlUi", 2);
+__decorateClass([
+  state()
+], YatlTable.prototype, "editingState", 2);
 __decorateClass([
   property({ attribute: false })
 ], YatlTable.prototype, "controller", 1);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], YatlTable.prototype, "striped", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "sortable" })
-], YatlTable.prototype, "sortable", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "resizable" })
-], YatlTable.prototype, "resizable", 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-row-number-column" })
-], YatlTable.prototype, "enableRowNumberColumn", 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, "columnStates", 1);
-__decorateClass([
-  property({ type: String, attribute: "search-query" })
-], YatlTable.prototype, "searchQuery", 1);
 __decorateClass([
   property({ attribute: false })
-], YatlTable.prototype, "searchTokenizer", 1);
+], YatlTable.prototype, "data", 1);
 __decorateClass([
   property({ attribute: false })
 ], YatlTable.prototype, "filters", 1);
+__decorateClass([
+  property({ type: String, attribute: "search-query" })
+], YatlTable.prototype, "searchQuery", 1);
+__decorateClass([
+  property({ type: Boolean, attribute: "tokenized-search" })
+], YatlTable.prototype, "tokenizedSearch", 1);
+__decorateClass([
+  property({ type: Boolean, attribute: "scored-search" })
+], YatlTable.prototype, "scoredSearch", 1);
 __decorateClass([
   property({ attribute: false })
-], YatlTable.prototype, "rowParts", 2);
+], YatlTable.prototype, "searchTokenizer", 1);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, attribute: "row-selection-method" })
 ], YatlTable.prototype, "rowSelectionMethod", 1);
 __decorateClass([
   property({ attribute: false })
 ], YatlTable.prototype, "selectedRowIds", 1);
 __decorateClass([
-  property({ type: Object, attribute: "storage-options" })
+  property({ attribute: false })
 ], YatlTable.prototype, "storageOptions", 1);
 __decorateClass([
   property({ attribute: false })
 ], YatlTable.prototype, "rowIdCallback", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], YatlTable.prototype, "striped", 2);
+__decorateClass([
+  property({ type: Boolean })
+], YatlTable.prototype, "sortable", 2);
+__decorateClass([
+  property({ type: Boolean })
+], YatlTable.prototype, "resizable", 2);
+__decorateClass([
+  property({ type: Boolean })
+], YatlTable.prototype, "reorderable", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "row-numbers" })
+], YatlTable.prototype, "rowNumbers", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "virtual-scroll" })
+], YatlTable.prototype, "virtualScroll", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-footer" })
+], YatlTable.prototype, "hideFooter", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "disable-editing" })
+], YatlTable.prototype, "disableEditing", 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, "data", 1);
+], YatlTable.prototype, "rowParts", 2);
 YatlTable = __decorateClass([
   customElement("yatl-table")
 ], YatlTable);
 export {
+  InputEditor,
+  NumberEditor,
+  SelectEditor,
+  TextEditor,
   TypedEventTarget,
+  YatlCellEditEvent,
   YatlColumnReorderEvent,
   YatlColumnReorderRequest,
   YatlColumnResizeEvent,
@@ -3013,6 +3302,7 @@ export {
   YatlRowSelectRequest,
   YatlTable,
   YatlTableController,
+  YatlTableControllerEvent,
   YatlTableSearchEvent,
   YatlTableStateChangeEvent,
   YatlTableViewChangeEvent,