@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/esm/components/table/table.js

@@ -1,12 +1,15 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { observable, attr, FASTElement } from '@microsoft/fast-element';
+import { definition } from '../table-cell/table-cell.definition.js';
+import '../table-cell/table-cell.styles.js';
+import '../table-cell/table-cell.template.js';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { FASTElement, attr, observable } from "@microsoft/fast-element";
-import { TableCellDefinition } from "../table-cell";
-import DOMPurify from "dompurify";
 const DOWN_ARROW = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.0025 15.2902L12.6468 12.6458C12.8421 12.4506 13.1587 12.4506 13.3539 12.6458C13.5492 12.8411 13.5492 13.1577 13.3539 13.3529L9.8856 16.8213C9.79388 16.9305 9.65628 17 9.50245 17L9.50079 17C9.4221 17 9.34341 16.9816 9.27177 16.9447C9.22664 16.9215 9.1843 16.891 9.1465 16.8533L9.13652 16.843L5.64645 13.3529C5.45118 13.1577 5.45118 12.8411 5.64645 12.6458C5.84171 12.4505 6.15829 12.4505 6.35355 12.6458L9.00245 15.2947L9.00245 3.5C9.00245 3.22386 9.22631 3 9.50245 3C9.77859 3 10.0025 3.22386 10.0025 3.5L10.0025 15.2902Z" fill="#242424"/>
 </svg>
@@ -71,136 +74,128 @@ const UP_ARROW = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xm
  * @tagname fabric-table
  * @public
  */
-export class Table extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Reference to the table head element.
-         * @type {HTMLTableSectionElement | null}
-         * @observable
-         */
-        this.tableHeadRef = null;
-        /**
-         * Reference to the table body element.
-         * @type {HTMLTableSectionElement | null}
-         * @observable
-         */
-        this.tableBodyRef = null;
-        /**
-         * The data for the rows of the table.
-         * @type {TableRowData[]}
-         * @observable
-         */
-        this.rows = [];
-        /**
-         * The data for the columns of the table.
-         * @type {TableColumnData[]}
-         * @observable
-         */
-        this.columns = [];
-        /**
-         * Flag indicating if the table has been rendered.
-         * @type {boolean}
-         * @observable
-         */
-        this.tableRendered = false;
-        /**
-         * The current sort direction of the table.
-         * @type {SortDirection}
-         * @observable
-         */
-        this.sortDirection = "ascending";
-        /**
-         * The key of the currently active (sorted) column.
-         * @type {string}
-         */
-        this.activeColumnKey = "";
-        // Add new property for live region
-        this.sortAnnouncer = null;
-    }
+class Table extends FASTElement {
+  constructor() {
+    super(...arguments);
     /**
-     * Handler for changes to the sortable attribute.
-     * @private
+     * Reference to the table head element.
+     * @type {HTMLTableSectionElement | null}
+     * @observable
      */
-    sortableChanged() {
-        if (this.sortable) {
-            this.renderTableHead();
-        }
-    }
+    this.tableHeadRef = null;
     /**
-     * Handler for changes to the rows property.
-     * @private
+     * Reference to the table body element.
+     * @type {HTMLTableSectionElement | null}
+     * @observable
      */
-    rowsChanged() {
-        if (this.rows && this.rows.length > 0) {
-            this.renderTableRows();
-        }
-    }
+    this.tableBodyRef = null;
     /**
-     * Handler for changes to the columns property.
-     * @private
+     * The data for the rows of the table.
+     * @type {TableRowData[]}
+     * @observable
      */
-    columnsChanged() {
-        if (this.columns && this.columns.length > 0) {
-            this.renderTableHead();
-        }
-    }
+    this.rows = [];
     /**
-     * Renders the complete table by rendering both head and rows.
-     * @public
+     * The data for the columns of the table.
+     * @type {TableColumnData[]}
+     * @observable
      */
-    renderTable() {
-        this.renderTableHead();
-        this.renderTableRows();
-    }
+    this.columns = [];
     /**
-     * Handler for changes to the tableRendered property.
-     * Emits a tableRendered event when rendering is complete.
-     * @private
+     * Flag indicating if the table has been rendered.
+     * @type {boolean}
+     * @observable
      */
-    tableRenderedChanged() {
-        if (this.tableRendered) {
-            this.$emit("tableRendered", this);
-        }
-        this.tableRendered = false;
-    }
+    this.tableRendered = false;
     /**
-     * Toggles the sort direction between ascending and descending.
-     * @public
+     * The current sort direction of the table.
+     * @type {SortDirection}
+     * @observable
      */
-    toggleSortDirection() {
-        this.sortDirection =
-            this.sortDirection === "ascending" ? "descending" : "ascending";
-    }
+    this.sortDirection = "ascending";
     /**
-     * Sorts the table rows based on the active column and sort direction.
-     * @param {SortDirection} [direction] - The direction to sort ("ascending" | "descending" | undefined). If undefined, uses the current sortDirection.
-     * @public
+     * The key of the currently active (sorted) column.
+     * @type {string}
      */
-    sortRows(direction) {
-        this.rows.sort((a, b) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-            if ("descending" === direction) {
-                return ((_c = (_b = (_a = a[this.activeColumnKey]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : "") <
-                    ((_f = (_e = (_d = b[this.activeColumnKey]) === null || _d === void 0 ? void 0 : _d.label) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : "")
-                    ? 1
-                    : -1;
-            }
-            else {
-                return ((_j = (_h = (_g = a[this.activeColumnKey]) === null || _g === void 0 ? void 0 : _g.label) === null || _h === void 0 ? void 0 : _h[0]) !== null && _j !== void 0 ? _j : "") >
-                    ((_m = (_l = (_k = b[this.activeColumnKey]) === null || _k === void 0 ? void 0 : _k.label) === null || _l === void 0 ? void 0 : _l[0]) !== null && _m !== void 0 ? _m : "")
-                    ? 1
-                    : -1;
-            }
-        });
+    this.activeColumnKey = "";
+    // Add new property for live region
+    this.sortAnnouncer = null;
+  }
+  /**
+   * Handler for changes to the sortable attribute.
+   * @private
+   */
+  sortableChanged() {
+    if (this.sortable) {
+      this.renderTableHead();
     }
-    /**
-     * Creates and initializes the live region for sort announcements.
-     * @private
-     */
-    initializeSortAnnouncer() {
-        const container = document.createElement("div");
-        container.style.cssText = `
+  }
+  /**
+   * Handler for changes to the rows property.
+   * @private
+   */
+  rowsChanged() {
+    if (this.rows && this.rows.length > 0) {
+      this.renderTableRows();
+    }
+  }
+  /**
+   * Handler for changes to the columns property.
+   * @private
+   */
+  columnsChanged() {
+    if (this.columns && this.columns.length > 0) {
+      this.renderTableHead();
+    }
+  }
+  /**
+   * Renders the complete table by rendering both head and rows.
+   * @public
+   */
+  renderTable() {
+    this.renderTableHead();
+    this.renderTableRows();
+  }
+  /**
+   * Handler for changes to the tableRendered property.
+   * Emits a tableRendered event when rendering is complete.
+   * @private
+   */
+  tableRenderedChanged() {
+    if (this.tableRendered) {
+      this.$emit("tableRendered", this);
+    }
+    this.tableRendered = false;
+  }
+  /**
+   * Toggles the sort direction between ascending and descending.
+   * @public
+   */
+  toggleSortDirection() {
+    this.sortDirection = this.sortDirection === "ascending" ? "descending" : "ascending";
+  }
+  /**
+   * Sorts the table rows based on the active column and sort direction.
+   * @param {SortDirection} [direction] - The direction to sort ("ascending" | "descending" | undefined). If undefined, uses the current sortDirection.
+   * @public
+   */
+  sortRows(direction) {
+    this.rows.sort((a, b) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+      if ("descending" === direction) {
+        return ((_c = (_b = (_a = a[this.activeColumnKey]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : "") < ((_f = (_e = (_d = b[this.activeColumnKey]) === null || _d === void 0 ? void 0 : _d.label) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : "") ? 1 : -1;
+      } else {
+        return ((_j = (_h = (_g = a[this.activeColumnKey]) === null || _g === void 0 ? void 0 : _g.label) === null || _h === void 0 ? void 0 : _h[0]) !== null && _j !== void 0 ? _j : "") > ((_m = (_l = (_k = b[this.activeColumnKey]) === null || _k === void 0 ? void 0 : _k.label) === null || _l === void 0 ? void 0 : _l[0]) !== null && _m !== void 0 ? _m : "") ? 1 : -1;
+      }
+    });
+  }
+  /**
+   * Creates and initializes the live region for sort announcements.
+   * @private
+   */
+  initializeSortAnnouncer() {
+    const container = document.createElement("div");
+    container.style.cssText = `
       position: absolute;
       top: 0;
       left: 0;
@@ -209,297 +204,288 @@ export class Table extends FASTElement {
       overflow: hidden;
       pointer-events: none;
     `;
-        this.sortAnnouncer = document.createElement("div");
-        this.sortAnnouncer.setAttribute("aria-live", "assertive");
-        this.sortAnnouncer.setAttribute("aria-atomic", "true");
-        this.sortAnnouncer.setAttribute("role", "status");
-        this.sortAnnouncer.setAttribute("class", "visually-hidden");
-        container.appendChild(this.sortAnnouncer);
-        if (this.shadowRoot) {
-            this.shadowRoot.insertBefore(container, this.shadowRoot.firstChild);
-        }
-        else {
-            this.insertBefore(container, this.firstChild);
-        }
+    this.sortAnnouncer = document.createElement("div");
+    this.sortAnnouncer.setAttribute("aria-live", "assertive");
+    this.sortAnnouncer.setAttribute("aria-atomic", "true");
+    this.sortAnnouncer.setAttribute("role", "status");
+    this.sortAnnouncer.setAttribute("class", "visually-hidden");
+    container.appendChild(this.sortAnnouncer);
+    if (this.shadowRoot) {
+      this.shadowRoot.insertBefore(container, this.shadowRoot.firstChild);
+    } else {
+      this.insertBefore(container, this.firstChild);
     }
-    /**
-     * Announces the current sort state to screen readers.
-     * @param {string} columnLabel - The label of the sorted column.
-     * @param {SortDirection} direction - The sort direction.
-     * @private
-     */
-    announceSortChange(columnLabel, direction) {
+  }
+  /**
+   * Announces the current sort state to screen readers.
+   * @param {string} columnLabel - The label of the sorted column.
+   * @param {SortDirection} direction - The sort direction.
+   * @private
+   */
+  announceSortChange(columnLabel, direction) {
+    if (this.sortAnnouncer) {
+      this.sortAnnouncer.textContent = "";
+      void this.sortAnnouncer.offsetWidth;
+      setTimeout(() => {
         if (this.sortAnnouncer) {
-            this.sortAnnouncer.textContent = "";
-            void this.sortAnnouncer.offsetWidth;
-            setTimeout(() => {
-                if (this.sortAnnouncer) {
-                    const message = `Table sorted by ${columnLabel} in ${direction} order`;
-                    this.sortAnnouncer.textContent = message;
-                }
-            }, 50);
-        }
-    }
-    /**
-     * Handles column sorting when a column header is clicked.
-     * @param {Event} event - The click event.
-     * @param {string} columnKey - The key of the column to sort by.
-     * @public
-     */
-    sortByColumn(event, columnKey) {
-        this.activeColumnKey = columnKey;
-        const column = this.columns.find((col) => col.columnKey === columnKey);
-        if (column) {
-            this.announceSortChange(column.label, this.sortDirection);
-        }
-        this.sortRows(this.sortDirection);
-        // re-render the table
-        this.renderTableHead();
-        this.renderTableRows();
-        this.$emit("sortChanged", { direction: this.sortDirection, columnKey });
-    }
-    /**
-     * Creates an SVG icon element from an SVG string.
-     * @param {typeof UP_ARROW | typeof DOWN_ARROW} icon - The SVG string to convert.
-     * @returns {HTMLElement} The created SVG element.
-     * @private
-     */
-    createSVGIcon(icon) {
-        const sanitizedIcon = DOMPurify.sanitize(icon);
-        const parser = new DOMParser();
-        const svgDoc = parser.parseFromString(icon, "image/svg+xml");
-        return svgDoc.documentElement;
-    }
-    /**
-     * Renders a sortable column header with appropriate attributes and event handlers.
-     * @param {TableColumnData} column - The column data.
-     * @param {HTMLDivElement} div - The div element within the header cell.
-     * @param {HTMLTableCellElement} th - The table header cell element.
-     * @private
-     */
-    renderSortableColumn(column, th) {
-        th.setAttribute("role", "columnheader");
-        th.setAttribute("aria-sort", this.activeColumnKey === column.columnKey ? this.sortDirection : "none");
-        if (this.sortable) {
-            // Always render a button for sortable columns
-            const button = document.createElement("button");
-            button.type = "button";
-            button.className = "table-sort-button";
-            button.textContent = column.label;
-            // Add sort icon if this is the active column
-            if (this.activeColumnKey === column.columnKey) {
-                const arrowIcon = this.sortDirection === "ascending" ? UP_ARROW : DOWN_ARROW;
-                const svg = this.createSVGIcon(arrowIcon);
-                button.appendChild(svg);
-            }
-            // Add event listeners
-            button.addEventListener("click", (event) => {
-                // Set the active column to the one clicked
-                if (this.activeColumnKey !== column.columnKey) {
-                    this.sortDirection = "ascending"; // or your default
-                }
-                else {
-                    this.toggleSortDirection();
-                }
-                this.sortByColumn(event, column.columnKey);
-            });
-            // Replace any existing content and append the button
-            th.innerHTML = "";
-            th.appendChild(button);
-        }
-        else {
-            th.textContent = column.label;
+          const message = `Table sorted by ${columnLabel} in ${direction} order`;
+          this.sortAnnouncer.textContent = message;
         }
+      }, 50);
     }
-    /**
-     * Adds focus, blur, click and keyboard event handlers to a header cell.
-     * @param {HTMLTableCellElement} th - The table header cell element.
-     * @param {TableColumnData} column - The column data.
-     * @private
-     */
-    addHeaderCellEventHandlers(th, column) {
-        th.addEventListener("focus", () => {
-            th.setAttribute("data-table-cell-focus", "true");
-        });
-        // add blur event to div
-        th.addEventListener("blur", () => {
-            th.setAttribute("data-table-cell-focus", "false");
-        });
-        // add click event to div
-        th.addEventListener("click", (event) => {
-            this.toggleSortDirection();
-            this.sortByColumn(event, column.columnKey);
-        });
-        th.addEventListener("keydown", (event) => {
-            if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                this.toggleSortDirection();
-                this.sortByColumn(event, column.columnKey);
-            }
-        });
+  }
+  /**
+   * Handles column sorting when a column header is clicked.
+   * @param {Event} event - The click event.
+   * @param {string} columnKey - The key of the column to sort by.
+   * @public
+   */
+  sortByColumn(event, columnKey) {
+    this.activeColumnKey = columnKey;
+    const column = this.columns.find(col => col.columnKey === columnKey);
+    if (column) {
+      this.announceSortChange(column.label, this.sortDirection);
     }
-    /**
-     * Renders the table header section with column headers.
-     * @private
-     */
-    renderTableHead() {
-        if (this.tableHeadRef && this.columns) {
-            const fragment = document.createDocumentFragment();
-            this.columns.forEach((column) => {
-                const th = document.createElement("th");
-                this.renderSortableColumn(column, th);
-                fragment.appendChild(th);
-            });
-            this.tableHeadRef.innerHTML = "";
-            this.tableHeadRef.appendChild(fragment);
+    this.sortRows(this.sortDirection);
+    // re-render the table
+    this.renderTableHead();
+    this.renderTableRows();
+    this.$emit("sortChanged", {
+      direction: this.sortDirection,
+      columnKey
+    });
+  }
+  /**
+   * Creates an SVG icon element from an SVG string.
+   * @param {typeof UP_ARROW | typeof DOWN_ARROW} icon - The SVG string to convert.
+   * @returns {HTMLElement} The created SVG element.
+   * @private
+   */
+  createSVGIcon(icon) {
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(icon, "image/svg+xml");
+    return svgDoc.documentElement;
+  }
+  /**
+   * Renders a sortable column header with appropriate attributes and event handlers.
+   * @param {TableColumnData} column - The column data.
+   * @param {HTMLDivElement} div - The div element within the header cell.
+   * @param {HTMLTableCellElement} th - The table header cell element.
+   * @private
+   */
+  renderSortableColumn(column, th) {
+    th.setAttribute("role", "columnheader");
+    th.setAttribute("aria-sort", this.activeColumnKey === column.columnKey ? this.sortDirection : "none");
+    if (this.sortable) {
+      // Always render a button for sortable columns
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "table-sort-button";
+      button.textContent = column.label;
+      // Add sort icon if this is the active column
+      if (this.activeColumnKey === column.columnKey) {
+        const arrowIcon = this.sortDirection === "ascending" ? UP_ARROW : DOWN_ARROW;
+        const svg = this.createSVGIcon(arrowIcon);
+        button.appendChild(svg);
+      }
+      // Add event listeners
+      button.addEventListener("click", event => {
+        // Set the active column to the one clicked
+        if (this.activeColumnKey !== column.columnKey) {
+          this.sortDirection = "ascending"; // or your default
+        } else {
+          this.toggleSortDirection();
         }
+        this.sortByColumn(event, column.columnKey);
+      });
+      // Replace any existing content and append the button
+      th.innerHTML = "";
+      th.appendChild(button);
+    } else {
+      th.textContent = column.label;
     }
-    /**
-     * Appends content to a destination element.
-     * @param {object} args - The arguments for appending content.
-     * @param {HTMLElement} args.dest - The destination element.
-     * @param {HTMLElement | string | SVGElement} args.content - The content to append.
-     * @returns {Promise<void>}
-     * @private
-     */
-    async appendContent(args) {
-        if (typeof args.content === "string") {
-            args.dest.innerHTML += args.content;
-        }
-        else if (args.content instanceof HTMLElement ||
-            args.content instanceof SVGElement) {
-            args.dest.appendChild(args.content);
-        }
+  }
+  /**
+   * Adds focus, blur, click and keyboard event handlers to a header cell.
+   * @param {HTMLTableCellElement} th - The table header cell element.
+   * @param {TableColumnData} column - The column data.
+   * @private
+   */
+  addHeaderCellEventHandlers(th, column) {
+    th.addEventListener("focus", () => {
+      th.setAttribute("data-table-cell-focus", "true");
+    });
+    // add blur event to div
+    th.addEventListener("blur", () => {
+      th.setAttribute("data-table-cell-focus", "false");
+    });
+    // add click event to div
+    th.addEventListener("click", event => {
+      this.toggleSortDirection();
+      this.sortByColumn(event, column.columnKey);
+    });
+    th.addEventListener("keydown", event => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.toggleSortDirection();
+        this.sortByColumn(event, column.columnKey);
+      }
+    });
+  }
+  /**
+   * Renders the table header section with column headers.
+   * @private
+   */
+  renderTableHead() {
+    if (this.tableHeadRef && this.columns) {
+      const fragment = document.createDocumentFragment();
+      this.columns.forEach(column => {
+        const th = document.createElement("th");
+        this.renderSortableColumn(column, th);
+        fragment.appendChild(th);
+      });
+      this.tableHeadRef.innerHTML = "";
+      this.tableHeadRef.appendChild(fragment);
     }
-    /**
-     * Renders custom content for a table cell using render functions.
-     * @param {object} args - The arguments for rendering custom content.
-     * @param {TableColumnData} args.column - The column data.
-     * @param {HTMLElement} args.cell - The table cell element.
-     * @param {any} args.row - The row data.
-     * @returns {Promise<void>}
-     * @private
-     */
-    async renderCustomContent(args) {
-        if (args.column.render && args.column.render.length > 0) {
-            for (const [index, renderFunction] of args.column.render.entries()) {
-                const content = await renderFunction(args.row[args.column.columnKey].renderData[index]);
-                await this.appendContent({
-                    content,
-                    dest: args.cell
-                });
-            }
-        }
+  }
+  /**
+   * Appends content to a destination element.
+   * @param {object} args - The arguments for appending content.
+   * @param {HTMLElement} args.dest - The destination element.
+   * @param {HTMLElement | string | SVGElement} args.content - The content to append.
+   * @returns {Promise<void>}
+   * @private
+   */
+  async appendContent(args) {
+    if (typeof args.content === "string") {
+      args.dest.innerHTML += args.content;
+    } else if (args.content instanceof HTMLElement || args.content instanceof SVGElement) {
+      args.dest.appendChild(args.content);
     }
-    /**
-     * Renders the default text content for a table cell.
-     * @param {object} args - The arguments for rendering text content.
-     * @param {TableColumnData} args.column - The column data.
-     * @param {HTMLElement} args.cell - The table cell element.
-     * @param {any} args.row - The row data.
-     * @returns {Promise<void>}
-     * @private
-     */
-    async renderTextContent(args) {
-        const defaultSlot = document.createElement("span");
-        defaultSlot.textContent = args.row[args.column.columnKey].label;
+  }
+  /**
+   * Renders custom content for a table cell using render functions.
+   * @param {object} args - The arguments for rendering custom content.
+   * @param {TableColumnData} args.column - The column data.
+   * @param {HTMLElement} args.cell - The table cell element.
+   * @param {any} args.row - The row data.
+   * @returns {Promise<void>}
+   * @private
+   */
+  async renderCustomContent(args) {
+    var _a, _b;
+    if (args.column.render && args.column.render.length > 0) {
+      for (const [index, renderFunction] of args.column.render.entries()) {
+        const content = await renderFunction((_b = (_a = args.row[args.column.columnKey]) === null || _a === void 0 ? void 0 : _a.renderData) === null || _b === void 0 ? void 0 : _b[index]);
         await this.appendContent({
-            dest: args.cell,
-            content: defaultSlot
-        });
-    }
-    /**
-     * Renders a single table row cell.
-     * @param {object} args - The arguments for rendering a row.
-     * @param {TableColumnData} args.column - The column data.
-     * @param {any} args.row - The row data.
-     * @param {HTMLElement} args.dest - The destination element (table row).
-     * @returns {Promise<void>}
-     * @private
-     */
-    async renderRow(args) {
-        const cell = document.createElement("fabric-table-cell");
-        await this.renderCustomContent({
-            column: args.column,
-            cell,
-            row: args.row
+          content,
+          dest: args.cell
         });
-        await this.renderTextContent({
-            column: args.column,
-            cell,
-            row: args.row
-        });
-        args.dest.appendChild(cell);
+      }
     }
-    /**
-     * Renders all rows in the table body.
-     * @returns {Promise<void>}
-     * @private
-     */
-    async renderTableRows() {
-        var _a;
-        if (this.tableBodyRef && this.rows) {
-            const fragment = document.createDocumentFragment();
-            for (const row of this.rows) {
-                const tr = document.createElement("tr");
-                tr.setAttribute("role", "row");
-                for (const column of this.columns) {
-                    await this.renderRow({ column, row, dest: tr });
-                }
-                fragment.appendChild(tr);
-            }
-            // delete the old table body
-            this.tableBodyRef.innerHTML = "";
-            (_a = this.tableBodyRef) === null || _a === void 0 ? void 0 : _a.appendChild(fragment);
+  }
+  /**
+   * Renders the default text content for a table cell.
+   * @param {object} args - The arguments for rendering text content.
+   * @param {TableColumnData} args.column - The column data.
+   * @param {HTMLElement} args.cell - The table cell element.
+   * @param {any} args.row - The row data.
+   * @returns {Promise<void>}
+   * @private
+   */
+  async renderTextContent(args) {
+    const defaultSlot = document.createElement("span");
+    defaultSlot.textContent = args.row[args.column.columnKey].label;
+    await this.appendContent({
+      dest: args.cell,
+      content: defaultSlot
+    });
+  }
+  /**
+   * Renders a single table row cell.
+   * @param {object} args - The arguments for rendering a row.
+   * @param {TableColumnData} args.column - The column data.
+   * @param {any} args.row - The row data.
+   * @param {HTMLElement} args.dest - The destination element (table row).
+   * @returns {Promise<void>}
+   * @private
+   */
+  async renderRow(args) {
+    const cell = document.createElement("fabric-table-cell");
+    await this.renderCustomContent({
+      column: args.column,
+      cell,
+      row: args.row
+    });
+    await this.renderTextContent({
+      column: args.column,
+      cell,
+      row: args.row
+    });
+    args.dest.appendChild(cell);
+  }
+  /**
+   * Renders all rows in the table body.
+   * @returns {Promise<void>}
+   * @private
+   */
+  async renderTableRows() {
+    var _a;
+    if (this.tableBodyRef && this.rows) {
+      const fragment = document.createDocumentFragment();
+      for (const row of this.rows) {
+        const tr = document.createElement("tr");
+        tr.setAttribute("role", "row");
+        for (const column of this.columns) {
+          await this.renderRow({
+            column,
+            row,
+            dest: tr
+          });
         }
+        fragment.appendChild(tr);
+      }
+      // delete the old table body
+      this.tableBodyRef.innerHTML = "";
+      (_a = this.tableBodyRef) === null || _a === void 0 ? void 0 : _a.appendChild(fragment);
     }
-    /**
-     * Lifecycle method called when the element is connected to the DOM.
-     * Defines the TableCell custom element and initializes the sort announcer.
-     * @public
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        // Initialize the sort announcer
-        this.initializeSortAnnouncer();
-        TableCellDefinition.define(customElements);
-    }
-    /**
-     * Lifecycle method called when the element is disconnected from the DOM.
-     * Cleans up the sort announcer.
-     * @public
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Clean up the sort announcer
-        if (this.sortAnnouncer) {
-            this.sortAnnouncer.remove();
-            this.sortAnnouncer = null;
-        }
+  }
+  /**
+   * Lifecycle method called when the element is connected to the DOM.
+   * Defines the TableCell custom element and initializes the sort announcer.
+   * @public
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    // Initialize the sort announcer
+    this.initializeSortAnnouncer();
+    definition.define(customElements);
+  }
+  /**
+   * Lifecycle method called when the element is disconnected from the DOM.
+   * Cleans up the sort announcer.
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // Clean up the sort announcer
+    if (this.sortAnnouncer) {
+      this.sortAnnouncer.remove();
+      this.sortAnnouncer = null;
     }
+  }
 }
-__decorate([
-    observable
-], Table.prototype, "tableHeadRef", void 0);
-__decorate([
-    observable
-], Table.prototype, "tableBodyRef", void 0);
-__decorate([
-    observable
-], Table.prototype, "rows", void 0);
-__decorate([
-    observable
-], Table.prototype, "columns", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], Table.prototype, "sortable", void 0);
-__decorate([
-    observable
-], Table.prototype, "tableRendered", void 0);
-__decorate([
-    attr({ attribute: "sort-direction" })
-], Table.prototype, "sortDirection", void 0);
-__decorate([
-    observable
-], Table.prototype, "activeColumnKey", void 0);
-//# sourceMappingURL=table.js.map
+__decorate([observable], Table.prototype, "tableHeadRef", void 0);
+__decorate([observable], Table.prototype, "tableBodyRef", void 0);
+__decorate([observable], Table.prototype, "rows", void 0);
+__decorate([observable], Table.prototype, "columns", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], Table.prototype, "sortable", void 0);
+__decorate([observable], Table.prototype, "tableRendered", void 0);
+__decorate([attr({
+  attribute: "sort-direction"
+})], Table.prototype, "sortDirection", void 0);
+__decorate([observable], Table.prototype, "activeColumnKey", void 0);
+
+export { Table };