@carbon/ai-chat-components 0.7.0 → 0.7.1

package/es-custom/components/table/src/table.js

@@ -0,0 +1,543 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { carbonElement } from '../../../globals/decorators/carbon-element.js';
+import { tableSkeletonTemplate } from './table-skeleton.template.js';
+import { loadTableRuntime } from './table-loader.js';
+import styles from './table.scss.js';
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */
+// Width threshold for determining default page size. Tables wider than this get 10 rows, narrower get 5 rows.
+const PAGE_SIZE_WIDTH_THRESHOLD = 400;
+/**
+ * Class functionality for the Table custom element.
+ */
+let CDSAIChatTable = class CDSAIChatTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The array of cells for the header.
+         */
+        this.headers = [];
+        /**
+         * The array of rows. Each row includes an array of cells.
+         */
+        this.rows = [];
+        /**
+         * Whether or not the table content is loading. If it is then a skeleton state should be shown instead.
+         */
+        this.loading = false;
+        /**
+         * The text used for the filter placeholder.
+         */
+        this.filterPlaceholderText = "Filter table...";
+        /**
+         * The text used for the pagination's previous button tooltip.
+         */
+        this.previousPageText = "Previous page";
+        /**
+         * The text used for the pagination's next button tooltip.
+         */
+        this.nextPageText = "Next page";
+        /**
+         * The text used for the pagination's item pre page text.
+         */
+        this.itemsPerPageText = "Items per page:";
+        /**
+         * The text used for the download button's accessible label.
+         */
+        this.downloadLabelText = "Download table data";
+        /**
+         * The locale. Used by the carbon table component to change the collator for sorting.
+         */
+        this.locale = "en";
+        /**
+         * The calculated default page size based on component width.
+         * 10 for width > PAGE_SIZE_WIDTH_THRESHOLD, 5 for width <= PAGE_SIZE_WIDTH_THRESHOLD.
+         *
+         * @internal
+         */
+        this._defaultPageSize = 5;
+        /**
+         * If the table is valid or not.
+         *
+         * @internal
+         */
+        this._isValid = true;
+        /**
+         * The current page of the table we're on.
+         *
+         * @internal
+         */
+        this._currentPageNumber = 1;
+        /**
+         * How many rows are on each page of the table.
+         *
+         * @internal
+         */
+        this._currentPageSize = this.defaultPageSize;
+        /**
+         * Whether or not the number of rows per page was changed with the pagination component. If the user used the
+         * pagination controls to show all rows, the pagination component would normally hide itself because the number of is
+         * no longer greater than the page size. However the pagination component needs to persist in this case, since the
+         * user may want to change the page size again. This is used to keep track of whether the pagination controls were
+         * used to change page size, and if they have, it forces pagination component to persist.
+         *
+         * @internal
+         */
+        this._rowsPerPageChanged = false;
+        /**
+         * The rows that have not been filtered out.
+         *
+         * @internal
+         */
+        this._filterVisibleRowIDs = new Set();
+        /**
+         * All of the rows for the table with IDs.
+         *
+         * @internal
+         */
+        this._rowsWithIDs = [];
+        /**
+         * Whether or not the table should be able to be filtered.
+         *
+         * @internal
+         */
+        this._allowFiltering = false;
+        /**
+         * @internal
+         */
+        this.tableRuntime = null;
+        /**
+         * @internal
+         */
+        this.tableRuntimePromise = null;
+        /**
+         * Handles pagination events from the Carbon pagination component.
+         * Updates the visible rows when the user navigates to a different page.
+         *
+         * Note: This event sometimes fires twice due to a Carbon framework quirk,
+         * but since the page/size values are identical, it doesn't affect functionality.
+         *
+         * @param event - The page change event containing the new page number and size
+         * @public
+         *
+         * @internal
+         */
+        this._handlePageChangeEvent = (event) => {
+            this._updateVisibleRows(event.detail?.page, event.detail?.pageSize);
+            event.stopPropagation();
+        };
+        /**
+         * Handles page size change events from the pagination component.
+         * Updates the current page size and recalculates visible rows.
+         * Marks that the page size has been manually changed by the user.
+         *
+         * @param event - The page size change event containing the new page size
+         * @public
+         *
+         * @internal
+         */
+        this._handlePageSizeChangeEvent = (event) => {
+            this._rowsPerPageChanged = true;
+            this._currentPageSize = event.detail?.pageSize;
+            this._updateVisibleRows();
+            event.stopPropagation();
+        };
+        /**
+         * Handles filter and sort events from the Carbon table component.
+         * Updates the set of visible rows based on filtering/sorting results and resets to the first page.
+         *
+         * This event is triggered by:
+         * - Column sorting (clicking on sortable column headers)
+         * - Table filtering (using the search bar)
+         *
+         * @param event - The filter event containing the array of unfiltered rows
+         * @public
+         *
+         * @internal
+         */
+        this._handleFilterEvent = (event) => {
+            // Record the new set of unfiltered row ids.
+            this._filterVisibleRowIDs = new Set(event?.detail?.unfilteredRows.map((row) => row.id));
+            // Go back to the first page.
+            this._currentPageNumber = 1;
+            // Update which rows are visible.
+            this._updateVisibleRows();
+            event.stopPropagation();
+        };
+    }
+    get defaultPageSize() {
+        return this._defaultPageSize;
+    }
+    set defaultPageSize(value) {
+        this._defaultPageSize = value;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        void this.ensureTableRuntime();
+    }
+    /**
+     * Called after the element's DOM has been updated for the first time.
+     * Initializes the table page size.
+     *
+     * @param _changedProperties - Map of properties that changed during the update
+     */
+    async firstUpdated(_changedProperties) {
+        await this.updateComplete;
+        this._updateDefaultPageSize();
+        this._setPageSize();
+    }
+    /**
+     * Updates the CSS custom property `--cds-custom-chat-table-width` based on the parent element's width.
+     * Also calculates the default page size on first run based on the measured width.
+     * This method is called once during component initialization.
+     *
+     * @private
+     */
+    _updateDefaultPageSize() {
+        if (this.parentElement) {
+            let parentWidth = this.parentElement.offsetWidth;
+            // If parent width is 0, use fallback width that ensures 5-row default page size
+            if (parentWidth === 0) {
+                parentWidth = PAGE_SIZE_WIDTH_THRESHOLD - 1;
+            }
+            // Calculate default page size based on the width we just measured
+            // Only set it once, don't recalculate on resize
+            if (parentWidth > 0 && this._defaultPageSize === 5) {
+                this._defaultPageSize =
+                    parentWidth > PAGE_SIZE_WIDTH_THRESHOLD ? 10 : 5;
+                // Update _currentPageSize if it's still at the initial value
+                if (this._currentPageSize === 5) {
+                    this._currentPageSize = this._defaultPageSize;
+                }
+            }
+        }
+    }
+    /**
+     * Called before the element updates to prepare state changes.
+     * Handles validation and re-initialization of table data when headers or rows change.
+     *
+     * @param changedProperties - Map of properties that changed during the update
+     * @protected
+     */
+    willUpdate(changedProperties) {
+        // If the headers or rows has recently updated and both are defined than we should validate the table
+        // data. This will likely only happen on the web components first render cycle when the props go from undefined to
+        // defined.
+        if ((changedProperties.has("headers") || changedProperties.has("rows")) &&
+            this.headers !== undefined &&
+            this.rows !== undefined) {
+            this._calcIsTableValid();
+        }
+        // If the value of tableRows updated then initialize the internal rows arrays.
+        if (changedProperties.has("rows") && this.rows !== undefined) {
+            this._initializeRowsArrays();
+            this._setPageSize();
+        }
+    }
+    /**
+     * Validates the table structure by checking if all rows have the same number of cells as the header.
+     * Sets the internal `_isValid` state to false if any row has a mismatched cell count.
+     *
+     * A valid table requires:
+     * - All rows must have the same number of cells as there are headers
+     * - No rows can have more or fewer cells than the column count
+     *
+     * @private
+     */
+    _calcIsTableValid() {
+        const columnCount = this.headers.length;
+        // If one of the rows has a different number of cells than the number of columns in the header then set our internal
+        // valid state to false.
+        this._isValid = !this.rows.some((row) => row.cells.length !== columnCount);
+        // In the future, once we have an inlineError web component to use, we can render that when our table is not valid
+        // (as well as throwing the below error). Until then our React container is rendering the error component and
+        // throwing the error.
+        // throw new Error(
+        //   `${WA_CONSOLE_PREFIX} Number of cells in the table header does not match the number of cells in one or more of the table rows. In order to render a table there needs to be the same number of columns in the table header and all of the table rows.`,
+        // );
+    }
+    /**
+     * Initializes internal arrays used for table functionality.
+     * Creates a new array of rows with unique IDs and initializes the filter visibility tracking.
+     *
+     * This method:
+     * 1. Resets the `_rowsWithIDs` array and `_filterVisibleRowIDs` set
+     * 2. Assigns string-based IDs to each row for tracking purposes
+     * 3. Marks all rows as initially visible (not filtered out)
+     *
+     * @private
+     */
+    _initializeRowsArrays() {
+        // Reset both arrays.
+        this._rowsWithIDs = [];
+        this._filterVisibleRowIDs = new Set();
+        this.rows.forEach((row, index) => {
+            const id = index.toString();
+            this._rowsWithIDs.push({ ...row, id });
+            this._filterVisibleRowIDs.add(id);
+        });
+    }
+    /**
+     * Configures the table's page size and filtering behavior.
+     * Determines whether filtering/searching should be enabled based on the number of rows
+     * relative to the current page size.
+     *
+     * Filtering is enabled when there are more rows than can fit on a single page,
+     * allowing users to search and paginate through large datasets.
+     *
+     * @private
+     */
+    _setPageSize() {
+        // If there are more rows than the page size then enable filtering.
+        this._allowFiltering = this.rows.length > this._currentPageSize;
+        // Update the visible rows in case the page size has changed or this is the first time this web component has
+        // rendered.
+        this._updateVisibleRows();
+    }
+    async ensureTableRuntime() {
+        if (this.tableRuntime) {
+            return this.tableRuntime;
+        }
+        if (typeof window === "undefined") {
+            return null;
+        }
+        if (!this.tableRuntimePromise) {
+            this.tableRuntimePromise = loadTableRuntime();
+        }
+        try {
+            const runtime = await this.tableRuntimePromise;
+            this.tableRuntime = runtime;
+            this.requestUpdate();
+            return runtime;
+        }
+        catch (error) {
+            console.error("Failed to load table runtime", error);
+            this.tableRuntimePromise = null;
+            return null;
+        }
+    }
+    /**
+     * Controls which table rows are visible based on pagination and filtering.
+     * Uses CSS display properties to show/hide rows rather than DOM manipulation.
+     *
+     * This approach is necessary because Carbon's table component handles its own
+     * sorting and we need to preserve the DOM order it creates. The method:
+     * 1. Hides all rows initially
+     * 2. Filters to only rows that haven't been filtered out
+     * 3. Shows only the rows that belong to the current page
+     *
+     * @param page - The page number to display (1-based)
+     * @param pageSize - Number of rows per page
+     * @private
+     */
+    _updateVisibleRows(page = this._currentPageNumber, pageSize = this._currentPageSize) {
+        // Set the current page number and only show the rows for that page.
+        this._currentPageNumber = page;
+        // Grab all the rows that have been rendered. It's necessary to grab them from the page because the cds-custom-table puts
+        // the rows in a specific order when sorting and we want to preserve that order.
+        const rows = Array.from(this.renderRoot.querySelectorAll("cds-custom-table-row"));
+        // This is similar to the carbon example here https://stackblitz.com/edit/github-kbd9xw-s3y3s6?file=index.html. I
+        // originally tried creating and passing an array of the specific rows the template should render for the current
+        // page. Unfortunately doing that doesn't work with the combination of the is-sortable prop for the table and
+        // page-size prop for pagination. What would happen is old rows would persist if you were on the last page and there
+        // weren't enough rows to fill the page (even though the old rows weren't included in the new rows provided to the
+        // template). Using Carbon's example of hiding the rows with styling works so I'm extending that concept here even
+        // though, ideally, render controls the view and reacts to the state that would be determined here.
+        // Hide all the rows to start.
+        rows.forEach((row) => row.style.setProperty("display", "none"));
+        // Now filter the rows down to what is visible according to the filter.
+        const filterVisibleRows = rows.filter((row) => this._filterVisibleRowIDs.has(row.id));
+        // Now show all the rows that are within the current page.
+        const pageStart = (page - 1) * pageSize;
+        const pageEnd = page * pageSize - 1;
+        for (let index = pageStart; index <= pageEnd; index++) {
+            // If there is a row at that index then show it. If there aren't enough rows to fill the page then there won't be
+            // a row at that index.
+            filterVisibleRows[index]?.removeAttribute("style");
+        }
+    }
+    /**
+     * Handles the table download functionality by exporting all table data as a CSV file.
+     *
+     * This custom implementation is necessary because Carbon's default download feature:
+     * - Only exports selected rows (we want all data)
+     * - Only exports as JSON (we want CSV format)
+     * - Doesn't include all the data we need
+     *
+     * The method dynamically imports the CSV stringify library to avoid bundle bloat,
+     * creates a data URL to comply with CSP policies, and triggers a download.
+     *
+     * @public
+     */
+    async _handleDownload() {
+        // Don't save content from the expandable rows at this time. This could be added in the future but it's unclear how
+        // this would look in the download.
+        const tableArray = [
+            this.headers.map((cell) => cell.text),
+            ...this.rows.map((row) => row.cells.map((cell) => cell.text)),
+        ];
+        try {
+            // Lazy load the CSV stringify function only when needed
+            const { stringify } = await import('csv-stringify/browser/esm/sync');
+            // Convert table data to CSV format
+            const csvContent = stringify(tableArray);
+            // Use data URL instead of Blob to avoid CSP issues with object-src
+            const dataUrl = `data:text/csv;charset=utf-8,${encodeURIComponent(csvContent)}`;
+            // Create and trigger download using anchor element
+            const link = document.createElement("a");
+            link.setAttribute("href", dataUrl);
+            link.setAttribute("download", "table-data.csv");
+            link.style.visibility = "hidden";
+            document.body.appendChild(link);
+            // Trigger download and cleanup
+            link.click();
+            document.body.removeChild(link);
+        }
+        catch (error) {
+            console.error("Failed to download table data:", error);
+            // Fallback: could show user notification or use alternative method
+        }
+    }
+    /**
+     * Renders the table component based on current state and data.
+     *
+     * The render logic follows this priority:
+     * 1. Shows skeleton loading state if `loading` is true
+     * 2. Shows table with pagination if there are more rows than the page size OR pagination was used
+     * 3. Shows table only if all rows fit on one page
+     *
+     * The method also applies the appropriate Carbon theme class (cds-custom--g90 for dark, cds-custom--white for light)
+     * to ensure proper styling based on the `dark` property.
+     *
+     * @returns The lit-html template for the table component
+     * @public
+     */
+    render() {
+        // TODO TABLE: Once we have a web component version of the inline error state we could render that here if
+        // !this._isValid.
+        // This could be used while we wait for a md stream containing a table to complete.
+        const runtime = this.tableRuntime;
+        if (this.loading || !runtime) {
+            if (!runtime) {
+                void this.ensureTableRuntime();
+            }
+            return tableSkeletonTemplate(this._currentPageSize);
+        }
+        const { tableTemplate, tablePaginationTemplate } = runtime;
+        // If there are more rows than the page size then we need to add the pagination component. If the rows per page has
+        // been changed by the pagination component then we need to keep the pagination component around so the user can
+        // change the page size again, even if the current page size is the same as the number of table rows.
+        if (this.rows.length > this._currentPageSize || this._rowsPerPageChanged) {
+            return html `<div class="cds-custom-ai-chat-table-container">
+        ${tableTemplate(this)}
+        ${tablePaginationTemplate({
+                _currentPageSize: this._currentPageSize,
+                _currentPageNumber: this._currentPageNumber,
+                _filterVisibleRowIDs: this._filterVisibleRowIDs,
+                rows: this.rows,
+                previousPageText: this.previousPageText,
+                nextPageText: this.nextPageText,
+                itemsPerPageText: this.itemsPerPageText,
+                getPaginationSupplementalText: this.getPaginationSupplementalText,
+                getPaginationStatusText: this.getPaginationStatusText,
+                _handlePageChangeEvent: this._handlePageChangeEvent,
+                _handlePageSizeChangeEvent: this._handlePageSizeChangeEvent,
+            })}
+      </div>`;
+        }
+        // Otherwise, just render the table.
+        return html `<div class="cds-custom-ai-chat-table-container">
+      ${tableTemplate(this)}
+    </div>`;
+    }
+};
+CDSAIChatTable.styles = styles;
+__decorate([
+    property({ type: String, attribute: "table-title" })
+], CDSAIChatTable.prototype, "tableTitle", void 0);
+__decorate([
+    property({ type: String, attribute: "table-description" })
+], CDSAIChatTable.prototype, "tableDescription", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], CDSAIChatTable.prototype, "headers", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], CDSAIChatTable.prototype, "rows", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "loading" })
+], CDSAIChatTable.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, attribute: "filter-placeholder-text" })
+], CDSAIChatTable.prototype, "filterPlaceholderText", void 0);
+__decorate([
+    property({ type: String, attribute: "previous-page-text" })
+], CDSAIChatTable.prototype, "previousPageText", void 0);
+__decorate([
+    property({ type: String, attribute: "next-page-text" })
+], CDSAIChatTable.prototype, "nextPageText", void 0);
+__decorate([
+    property({ type: String, attribute: "items-per-page-text" })
+], CDSAIChatTable.prototype, "itemsPerPageText", void 0);
+__decorate([
+    property({ type: String, attribute: "download-label-text" })
+], CDSAIChatTable.prototype, "downloadLabelText", void 0);
+__decorate([
+    property({ type: String, attribute: "locale" })
+], CDSAIChatTable.prototype, "locale", void 0);
+__decorate([
+    state()
+], CDSAIChatTable.prototype, "_defaultPageSize", void 0);
+__decorate([
+    property({ type: Number, attribute: "default-page-size" })
+], CDSAIChatTable.prototype, "defaultPageSize", null);
+__decorate([
+    property({ type: Function, attribute: false })
+], CDSAIChatTable.prototype, "getPaginationSupplementalText", void 0);
+__decorate([
+    property({ type: Function, attribute: false })
+], CDSAIChatTable.prototype, "getPaginationStatusText", void 0);
+__decorate([
+    state()
+], CDSAIChatTable.prototype, "_isValid", void 0);
+__decorate([
+    state()
+], CDSAIChatTable.prototype, "_currentPageNumber", void 0);
+__decorate([
+    state()
+], CDSAIChatTable.prototype, "_currentPageSize", void 0);
+__decorate([
+    state()
+], CDSAIChatTable.prototype, "_rowsPerPageChanged", void 0);
+__decorate([
+    state()
+], CDSAIChatTable.prototype, "_filterVisibleRowIDs", void 0);
+__decorate([
+    state()
+], CDSAIChatTable.prototype, "_rowsWithIDs", void 0);
+__decorate([
+    state()
+], CDSAIChatTable.prototype, "_allowFiltering", void 0);
+CDSAIChatTable = __decorate([
+    carbonElement("cds-aichat-table")
+], CDSAIChatTable);
+var CDSAIChatTable_default = CDSAIChatTable;
+
+export { CDSAIChatTable, CDSAIChatTable_default as default };
+//# sourceMappingURL=table.js.map

package/es-custom/components/table/src/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../../../src/components/table/src/table.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es-custom/components/table/src/table.scss.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+var styles = css(["cds-custom-table::part(inner-container){display:grid;grid-template-columns:minmax(max-content,1fr)}"]);
+
+export { styles as default };
+//# sourceMappingURL=table.scss.js.map

package/es-custom/components/table/src/table.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/es-custom/components/table/src/table.template.d.ts

@@ -0,0 +1,10 @@
+import "@carbon/web-components/es-custom/components/data-table/index.js";
+import "@carbon/web-components/es-custom/components/checkbox/index.js";
+import "@carbon/web-components/es-custom/components/button/index.js";
+import "@carbon/web-components/es-custom/components/layer/index.js";
+import type { CDSAIChatTable } from "./table.js";
+/**
+ * Table view logic.
+ */
+declare function tableTemplate(tableElement: CDSAIChatTable): import("lit-html").TemplateResult<1>;
+export { tableTemplate };

package/es-custom/components/table/src/table.template.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es-custom/components/data-table/index.js';
+import '@carbon/web-components/es-custom/components/checkbox/index.js';
+import '@carbon/web-components/es-custom/components/button/index.js';
+import '@carbon/web-components/es-custom/components/layer/index.js';
+import { iconLoader } from '@carbon/web-components/es-custom/globals/internal/icon-loader.js';
+import Download16 from '@carbon/icons/es/download/16.js';
+import { html } from 'lit';
+import { repeat } from 'lit-html/directives/repeat.js';
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */
+/**
+ * Table view logic.
+ */
+function tableTemplate(tableElement) {
+    const { tableTitle, tableDescription, headers, filterPlaceholderText, downloadLabelText, locale, _handleDownload: handleDownload, _rowsWithIDs: tableRowsWithIDs, _allowFiltering: allowTableFiltering, _handleFilterEvent: handleFilterEvent, } = tableElement;
+    function toolbarElement() {
+        return html `<cds-custom-table-toolbar slot="toolbar">
+      <cds-custom-table-toolbar-content>
+        ${allowTableFiltering
+            ? html `<cds-custom-table-toolbar-search
+              persistent
+              placeholder=${filterPlaceholderText}
+            ></cds-custom-table-toolbar-search>`
+            : ""}
+        <cds-custom-button @click=${handleDownload} aria-label=${downloadLabelText}
+          >${iconLoader(Download16)}</cds-custom-button
+        >
+      </cds-custom-table-toolbar-content>
+    </cds-custom-table-toolbar>`;
+    }
+    function headersElement() {
+        return html `<cds-custom-table-head>
+      <cds-custom-table-header-row>
+        ${headers.map((header) => html `<cds-custom-table-header-cell
+              >${header.template ?? header.text}</cds-custom-table-header-cell
+            >`)}
+      </cds-custom-table-header-row>
+    </cds-custom-table-head>`;
+    }
+    function rowsElement() {
+        return html `<cds-custom-table-body>
+      ${repeat(tableRowsWithIDs, (row) => row.id, (row) => html `<cds-custom-table-row id=${row.id}
+            >${row.cells.map((cell) => {
+            return html `<cds-custom-table-cell
+                >${cell.template ?? cell.text}</cds-custom-table-cell
+              >`;
+        })}</cds-custom-table-row
+          >`)}
+    </cds-custom-table-body>`;
+    }
+    // TODO TABLE: There is a bug with size="sm" and is-sortable that prevents the header row from being the same size as
+    // the rest of the rows https://github.com/carbon-design-system/carbon/issues/17680. For now keep size="md" until that
+    // bug is fixed.
+    // Enable sorting if filtering is enabled.
+    return html `<cds-custom-table
+    size="md"
+    locale=${locale}
+    .isSortable=${allowTableFiltering}
+    .useZebraStyles=${true}
+    @cds-custom-table-filtered=${handleFilterEvent}
+  >
+    ${tableTitle &&
+        html `<cds-custom-table-header-title slot="title"
+      >${tableTitle}</cds-custom-table-header-title
+    >`}
+    ${tableDescription &&
+        html `<cds-custom-table-header-description slot="description"
+      >${tableDescription}</cds-custom-table-header-description
+    >`}
+    ${toolbarElement()} ${headersElement()} ${rowsElement()}
+  </cds-custom-table>`;
+}
+
+export { tableTemplate };
+//# sourceMappingURL=table.template.js.map