@govtechsg/sgds-web-component 3.0.0-rc.5 → 3.0.0

package/react/components/Table/sgds-table.cjs.js

@@ -12,62 +12,26 @@ var table = require('./table.cjs.js');
 
 /**
  * @summary The use of a table is to organise a collections of data into readable rows
- *
- * @cssproperty --table-bg - Table's background color
- * @cssproperty --table-accent-bg - Table's accent background color
- * @cssproperty --table-striped-color - Text color for striped table
- * @cssproperty --table-striped-bg - Background color for striped table
- * @cssproperty --table-active-color - Active text color for hovered row
- * @cssproperty --table-active-bg - Active background color for hovered row
- * @cssproperty --table-hover-color - Hovered text color for hover table
- * @cssproperty --table-hover-bg - Hovered background color for hover table
  */
 class SgdsTable extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
         /**
-         * Adds zebra-striping using striped to table row within the <tbody>
+         * Populate row header cells using Arrays
          */
-        this.striped = false;
+        this.rowHeader = [];
         /**
-         * Add borders to all sides of table and cells
+         * Populate column header cells using Arrays only when <code>headerPosition="vertical"</code> or <code>headerPosition="both"</code>
          */
-        this.bordered = false;
-        /**
-         * Remove all borders to table and cells
-         */
-        this.borderless = false;
-        /**
-         * Add hoverable state on table rows
-         */
-        this.hover = false;
-        /**
-         * Sorting on a column is enabled by adding the sort property. The sorting algorithm is based on javascript array.sort() method. In ascending order from bottom, alphabets come first, followed by numbers, and then symbols. Similarly, in descending order from bottom, symbols come first, followed by numbers, and then alphabets.
-         */
-        this.sort = false;
-        /**
-         * When removableSort is present, the third click removes the sorting from the column.
-         */
-        this.removableSort = false;
-        /**
-         * Populate header cells using Arrays
-         */
-        this.tableHeaders = [];
+        this.columnHeader = [];
         /**
          * Populate data cells using Arrays
          */
         this.tableData = [];
-        /** @internal */
-        this.sortColumn = null;
-        /** @internal */
-        this.sortAsc = true;
-        //TODO aria-sort
-        /** @internal */
-        this.activeColumn = null;
-        /** @internal */
-        this.sortClickCount = 0;
-        /** @internal */
-        this.clickCount = 0;
+        /**
+         * Defines the placement of headers in the table (horizontal, vertical, or both)
+         */
+        this.headerPosition = "horizontal";
         /** @internal */
         this.originalTableData = [];
     }
@@ -75,93 +39,51 @@ class SgdsTable extends sgdsElement["default"] {
         super.connectedCallback();
         this.originalTableData = [...this.tableData];
     }
-    handleHeaderClick(columnIndex) {
-        var _a;
-        if (this.sort) {
-            if (this.sortColumn === columnIndex) {
-                this.sortAsc = !this.sortAsc;
-            }
-            else {
-                this.sortColumn = columnIndex;
-                this.sortAsc = true;
-            }
-            this.tableData = [...this.tableData].sort((a, b) => {
-                const aValue = a[columnIndex];
-                const bValue = b[columnIndex];
-                if (typeof aValue === "string" && typeof bValue === "string") {
-                    return this.sortAsc ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
-                }
-                else {
-                    return this.sortAsc ? aValue - bValue : bValue - aValue;
-                }
-            });
-            // update the active column
-            if (this.activeColumn === columnIndex) {
-                this.clickCount++;
-                if (this.clickCount === 3 && this.removableSort) {
-                    this.activeColumn = null;
-                    this.clickCount = 0;
-                    this.tableData = [...this.originalTableData];
-                }
-            }
-            else {
-                this.activeColumn = columnIndex;
-                this.clickCount = 1;
-            }
-            // add the .active class to the clicked header cell
-            const thElements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("th");
-            thElements.forEach((thElement, index) => {
-                if (index === columnIndex) {
-                    thElement.classList.add("active");
-                }
-                else {
-                    thElement.classList.remove("active");
-                }
-            });
+    _renderTable() {
+        if (this.headerPosition === "horizontal") {
+            return lit.html `
+        <thead>
+          <tr>
+            ${this.rowHeader.map((header, index) => lit.html ` <th>${header}</th> `)}
+          </tr>
+        </thead>
+        <tbody>
+          ${this.tableData.map(row => lit.html `
+              <tr>
+                ${row.map((cell) => lit.html `<td>${cell}</td>`)}
+              </tr>
+            `)}
+        </tbody>
+      `;
         }
-    }
-    getIcon(columnIndex) {
-        if (this.activeColumn !== columnIndex) {
-            return lit.html `<svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-arrow-down-up ms-2 align-self-center"
-        viewBox="0 0 16 16"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z"
-        />
-      </svg>`;
+        if (this.headerPosition === "both") {
+            return lit.html `
+        <thead>
+          <tr>
+            <th></th>
+            ${this.rowHeader.map((header, index) => lit.html ` <th>${header}</th> `)}
+          </tr>
+        </thead>
+        <tbody>
+          ${this.tableData.map((row, index) => lit.html `
+              <tr>
+                <th>${this.columnHeader[index]}</th>
+                ${row.map((cell) => lit.html `<td>${cell}</td>`)}
+              </tr>
+            `)}
+        </tbody>
+      `;
         }
-        else {
-            return this.sortAsc
-                ? lit.html `<svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-sort-up-alt ms-2 align-self-center"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z"
-            />
-          </svg>`
-                : lit.html `<svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-sort-down ms-2 align-self-center"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"
-            />
-          </svg>`;
+        if (this.headerPosition === "vertical") {
+            const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));
+            return lit.html `
+        ${flippedTableData.map((row, index) => lit.html `
+            <tr>
+              <th>${this.columnHeader[index]}</th>
+              ${row.map((cell) => lit.html `<td>${cell}</td>`)}
+            </tr>
+          `)}
+      `;
         }
     }
     render() {
@@ -176,93 +98,29 @@ class SgdsTable extends sgdsElement["default"] {
         })}
         tabindex="0"
       >
-        <table
-          class="table sgds ${classMap_js.classMap({
-            [`table-striped`]: this.striped,
-            [`table-bordered`]: this.bordered,
-            [`table-borderless`]: this.borderless,
-            [`table-hover`]: this.hover,
-            [`table-${this.size}`]: this.size,
-            [`table-${this.variant}`]: this.variant
-        })}"
-        >
-          <thead>
-            <tr>
-              ${this.tableHeaders.map((header, index) => lit.html `
-                  <th
-                    class="${classMap_js.classMap({
-            "sortable-header": this.sort,
-            active: this.activeColumn === index
-        })}"
-                    @click=${() => this.handleHeaderClick(index)}
-                    //TODO aria-sort 
-                  >
-                    ${header} ${this.sort ? this.getIcon(index) : null}
-                  </th>
-                `)}
-            </tr>
-          </thead>
-          <tbody>
-            ${this.tableData.map(row => lit.html `
-                <tr>
-                  ${row.map((cell) => lit.html `<td>${cell}</td>`)}
-                </tr>
-              `)}
-          </tbody>
+        <table class="table">
+          ${this._renderTable()}
         </table>
       </div>
     `;
     }
 }
 SgdsTable.styles = [...sgdsElement["default"].styles, table["default"]];
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsTable.prototype, "striped", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsTable.prototype, "bordered", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsTable.prototype, "borderless", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsTable.prototype, "hover", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
-], SgdsTable.prototype, "size", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
-], SgdsTable.prototype, "variant", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsTable.prototype, "sort", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsTable.prototype, "removableSort", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsTable.prototype, "responsive", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Array })
-], SgdsTable.prototype, "tableHeaders", void 0);
+], SgdsTable.prototype, "rowHeader", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Array })
-], SgdsTable.prototype, "tableData", void 0);
+], SgdsTable.prototype, "columnHeader", void 0);
 tslib.__decorate([
-    decorators_js.state()
-], SgdsTable.prototype, "sortColumn", void 0);
-tslib.__decorate([
-    decorators_js.state()
-], SgdsTable.prototype, "sortAsc", void 0);
-tslib.__decorate([
-    decorators_js.state()
-], SgdsTable.prototype, "activeColumn", void 0);
-tslib.__decorate([
-    decorators_js.state()
-], SgdsTable.prototype, "sortClickCount", void 0);
+    decorators_js.property({ type: Array })
+], SgdsTable.prototype, "tableData", void 0);
 tslib.__decorate([
-    decorators_js.state()
-], SgdsTable.prototype, "clickCount", void 0);
+    decorators_js.property({ type: String, reflect: true })
+], SgdsTable.prototype, "headerPosition", void 0);
 tslib.__decorate([
     decorators_js.state()
 ], SgdsTable.prototype, "originalTableData", void 0);

package/react/components/Table/sgds-table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-table.cjs.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./table.css\";\n/**\n * @summary The use of a table is to organise a collections of data into readable rows\n *\n * @cssproperty --table-bg - Table's background color\n * @cssproperty --table-accent-bg - Table's accent background color\n * @cssproperty --table-striped-color - Text color for striped table\n * @cssproperty --table-striped-bg - Background color for striped table\n * @cssproperty --table-active-color - Active text color for hovered row\n * @cssproperty --table-active-bg - Active background color for hovered row\n * @cssproperty --table-hover-color - Hovered text color for hover table\n * @cssproperty --table-hover-bg - Hovered background color for hover table\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Adds zebra-striping using striped to table row within the <tbody>\n   */\n  @property({ type: Boolean, reflect: true }) striped = false;\n\n  /**\n   * Add borders to all sides of table and cells\n   */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /**\n   * Remove all borders to table and cells\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Add hoverable state on table rows\n   */\n  @property({ type: Boolean, reflect: true }) hover = false;\n\n  /**\n   * Add <code>.table-sm</code> to make table more compact\n   */\n  @property({ type: String, reflect: true }) size: string;\n\n  /**\n   * Use contextual classes to add colors to table\n   */\n  @property({ type: String, reflect: true }) variant: string;\n\n  /**\n   * Sorting on a column is enabled by adding the sort property. The sorting algorithm is based on javascript array.sort() method. In ascending order from bottom, alphabets come first, followed by numbers, and then symbols. Similarly, in descending order from bottom, symbols come first, followed by numbers, and then alphabets.\n   */\n  @property({ type: Boolean, reflect: true }) sort = false;\n\n  /**\n   * When removableSort is present, the third click removes the sorting from the column.\n   */\n  @property({ type: Boolean, reflect: true }) removableSort = false;\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate header cells using Arrays\n   */\n  @property({ type: Array }) tableHeaders: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /** @internal */\n  @state() sortColumn: number | null = null;\n\n  /** @internal */\n  @state() sortAsc = true;\n\n  //TODO aria-sort\n\n  /** @internal */\n  @state() activeColumn: number | null = null;\n\n  /** @internal */\n  @state() sortClickCount = 0;\n\n  /** @internal */\n  @state() clickCount = 0;\n\n  /** @internal */\n  @state() originalTableData: Array<(string | number)[]> = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalTableData = [...this.tableData];\n  }\n\n  handleHeaderClick(columnIndex: number) {\n    if (this.sort) {\n      if (this.sortColumn === columnIndex) {\n        this.sortAsc = !this.sortAsc;\n      } else {\n        this.sortColumn = columnIndex;\n        this.sortAsc = true;\n      }\n\n      this.tableData = [...this.tableData].sort((a, b) => {\n        const aValue = a[columnIndex];\n        const bValue = b[columnIndex];\n\n        if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n          return this.sortAsc ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);\n        } else {\n          return this.sortAsc ? (aValue as number) - (bValue as number) : (bValue as number) - (aValue as number);\n        }\n      });\n\n      // update the active column\n      if (this.activeColumn === columnIndex) {\n        this.clickCount++;\n        if (this.clickCount === 3 && this.removableSort) {\n          this.activeColumn = null;\n          this.clickCount = 0;\n          this.tableData = [...this.originalTableData];\n        }\n      } else {\n        this.activeColumn = columnIndex;\n        this.clickCount = 1;\n      }\n\n      // add the .active class to the clicked header cell\n      const thElements = this.shadowRoot?.querySelectorAll(\"th\");\n      thElements.forEach((thElement, index) => {\n        if (index === columnIndex) {\n          thElement.classList.add(\"active\");\n        } else {\n          thElement.classList.remove(\"active\");\n        }\n      });\n    }\n  }\n\n  getIcon(columnIndex: number) {\n    if (this.activeColumn !== columnIndex) {\n      return html`<svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-arrow-down-up ms-2 align-self-center\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z\"\n        />\n      </svg>`;\n    } else {\n      return this.sortAsc\n        ? html`<svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-sort-up-alt ms-2 align-self-center\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z\"\n            />\n          </svg>`\n        : html`<svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-sort-down ms-2 align-self-center\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z\"\n            />\n          </svg>`;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <table\n          class=\"table sgds ${classMap({\n            [`table-striped`]: this.striped,\n            [`table-bordered`]: this.bordered,\n            [`table-borderless`]: this.borderless,\n            [`table-hover`]: this.hover,\n            [`table-${this.size}`]: this.size,\n            [`table-${this.variant}`]: this.variant\n          })}\"\n        >\n          <thead>\n            <tr>\n              ${this.tableHeaders.map(\n                (header: string, index: number) => html`\n                  <th\n                    class=\"${classMap({\n                      \"sortable-header\": this.sort,\n                      active: this.activeColumn === index\n                    })}\"\n                    @click=${() => this.handleHeaderClick(index)}\n                    //TODO aria-sort \n                  >\n                    ${header} ${this.sort ? this.getIcon(index) : null}\n                  </th>\n                `\n              )}\n            </tr>\n          </thead>\n          <tbody>\n            ${this.tableData.map(\n              row => html`\n                <tr>\n                  ${row.map((cell: string) => html`<td>${cell}</td>`)}\n                </tr>\n              `\n            )}\n          </tbody>\n        </table>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["SgdsElement","html","classMap","tableStyle","__decorate","property","state"],"mappings":"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"}
+{"version":3,"file":"sgds-table.cjs.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./table.css\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary The use of a table is to organise a collections of data into readable rows\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate row header cells using Arrays\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Populate column header cells using Arrays only when <code>headerPosition=\"vertical\"</code> or <code>headerPosition=\"both\"</code>\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table (horizontal, vertical, or both)\n   */\n  @property({ type: String, reflect: true }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /** @internal */\n  @state() originalTableData: Array<(string | number)[]> = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalTableData = [...this.tableData];\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string, index: number) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th></th>\n            ${this.rowHeader.map((header: string, index: number) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th>${this.columnHeader[index]}</th>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th>${this.columnHeader[index]}</th>\n              ${row.map((cell: string) => html`<td>${cell}</td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <table class=\"table\">\n          ${this._renderTable()}\n        </table>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["SgdsElement","html","classMap","tableStyle","__decorate","property","state"],"mappings":"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"}