@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-table/xplor-table.js

@@ -0,0 +1,695 @@
+import { h, Host, } from "@stencil/core";
+const getIconType = (sortType) => {
+    switch (sortType) {
+        case 'asc':
+            return 'arrow-up';
+        case 'desc':
+            return 'arrow-down';
+        default:
+            return 'dash';
+    }
+};
+export class XplorTable {
+    constructor() {
+        /**
+         * The values for the input for each row when multiselect is activated.
+         */
+        this.selectedValues = [];
+        /**
+         * Toggles to show the sort button on each table head
+         */
+        this.isSortable = true;
+        /**
+         * Manually determined if the column is sortable
+         */
+        this.sortableColumns = [];
+        this.areAllSelected = false;
+        this.hasScrolled = false;
+        this.sortTypeArray = [];
+        this.selectedDateRange = 'All';
+        /**
+         * Callback function that is called when the checkbox for a row of a
+         * `multiselect` table is checked
+         */
+        this.currentPage = 1;
+        this.totalPages = 3;
+        this.handlePagination = (direction) => {
+            switch (direction) {
+                case 'first':
+                    this.currentPage = 1;
+                    break;
+                case 'prev':
+                    if (this.currentPage > 1)
+                        this.currentPage--;
+                    break;
+                case 'next':
+                    if (this.currentPage < this.totalPages)
+                        this.currentPage++;
+                    break;
+                case 'last':
+                    this.currentPage = this.totalPages;
+                    break;
+            }
+        };
+        this.handleDateRangeChange = (event) => {
+            const target = event.target;
+            this.selectedDateRange = target.value;
+        };
+        this.handleFilterReports = () => {
+            console.log('Filter reports clicked');
+        };
+        this.handleDownloadAll = () => {
+            console.log('Download all clicked');
+        };
+        // private handleDownloadReport = (index: number) => {
+        //   console.log(`Download report ${index} clicked`);
+        // };
+        this.selectAllValue = Math.random().toString(36).slice(2);
+        this.selectAll = (e) => {
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
+                return;
+            const { checked } = target;
+            this.areAllSelected = checked;
+            this.selected =
+                this.selectedValues.length > 0
+                    ? // gets all checkboxes in body
+                        Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => 
+                        // if the select all checkbox is checked, return
+                        // the value from the current input. If false, set all to false.
+                        checked ? input === null || input === void 0 ? void 0 : input.value : checked)
+                    : this.selected.map(() => checked);
+            this.onChange();
+        };
+        this.selectOne = (e, checkboxIdx) => {
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
+                return;
+            const { checked, value } = target;
+            this.areAllSelected = false;
+            this.selected = this.selected.map((v, selectedIdx) => {
+                // if the checkbox that fired the event is not the current idx
+                // return the current value
+                if (selectedIdx !== checkboxIdx)
+                    return v;
+                /**
+                 * If there are values in this.selectedValues, either return the value
+                 * for that checkbox or false, dependent on if the checkbox is checked or not.
+                 * If there are no values in this.selectedValues, return the value
+                 * to either true or false, dependent on if the checkbox is checked or not.
+                 *
+                 */
+                return this.selectedValues.length > 0
+                    ? checked
+                        ? value
+                        : checked
+                    : checked;
+            });
+            this.onChange();
+        };
+        this.onChange = () => {
+            this.tableSelect.emit({
+                selected: this.selected,
+                areAllSelected: this.areAllSelected,
+            });
+        };
+        this.onScroll = () => {
+            this.hasScrolled = this.container.scrollLeft > 0;
+        };
+        this.sortBy = (col) => {
+            this.sortTypeArray = this.sortTypeArray.map((val, idx) => {
+                if (idx !== col)
+                    return null;
+                switch (val) {
+                    case 'asc':
+                        return 'desc';
+                    case 'desc':
+                        return null;
+                    default:
+                        return 'asc';
+                }
+            });
+            const handleSort = (a, b) => {
+                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase()) {
+                    return -1;
+                }
+                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase()) {
+                    return 1;
+                }
+                return 0;
+            };
+            if (this.sortTypeArray[col] === 'asc') {
+                this.rowData.sort((a, b) => handleSort(a, b));
+            }
+            else if (this.sortTypeArray[col] === 'desc') {
+                this.rowData.sort((a, b) => handleSort(b, a));
+            }
+            else {
+                this.rowData = this.data;
+                this.sortTypeArray[col] = null;
+            }
+            this.rowData = Array.from(this.rowData);
+            this.render();
+        };
+        this.setData = () => {
+            this.rowData = this.data !== undefined ? Array.from(this.data) : [];
+        };
+    }
+    // Add this method to paginate rowData
+    getPaginatedData() {
+        const startIndex = (this.currentPage - 1) * 10;
+        const endIndex = startIndex + 10;
+        return this.rowData.slice(startIndex, endIndex);
+    }
+    watchData() {
+        this.setData();
+    }
+    componentWillLoad() {
+        this.areAllSelected = false;
+        this.setData();
+        this.selected = new Array(this.rowData.length).fill(false);
+        // Fill the Sort Type Array to default null depends on number of columns
+        this.sortTypeArray = this.columns && this.columns.map(() => null);
+    }
+    render() {
+        let className = 'xpl-table';
+        if (this.striped)
+            className += ' xpl-table--striped';
+        if (this.freeze)
+            className += ' xpl-table--freeze';
+        if (this.hasScrolled)
+            className += ' xpl-table--has-scrolled';
+        const paginatedData = this.getPaginatedData();
+        return (h(Host, { key: '2d97030af789ed65f7021cb28a7afc2419fbccd5', class: "xplor-table" }, h("div", { key: 'e790897b07a94c98f28af0c1a8d9acbc0bded6c6', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, h("div", { key: 'a1f167a0de10b05288715269bc9c469a547c6102', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+                this.container = el;
+            } }, h("div", { key: '84ab92d9467e4ac9d866a3220ccba9d63b8c8cc8', class: "mb-6" }, h("h1", { key: 'f8746a5162a38476937b83d9549a2fad2a030f8a', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), h("div", { key: '1e7188d1e0a7dd74f466dab3e6ee00189ab88e53', class: "flex flex-wrap items-center gap-4 mb-6" }, h("div", { key: 'c3f2d92bef894ccc749e1249536154147a324711', class: "flex items-center gap-2" }, h("label", { key: '6156ed236c96b1e1f7d480bc97bb0ab8b0b01a87', class: "text-sm text-gray-600 font-medium" }, "Date Range"), h("select", { key: 'da1caff2afb5a1b4786adec7fd9ca7a9480c0f57', class: "border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500",
+            // value={this.selectedDateRange}
+            onInput: this.handleDateRangeChange }, h("option", { key: '6c31c50fe2119d1f5086e3f33ddff4903a290a03', value: "All" }, "All"), h("option", { key: '17d4c7b7c52763065dab2f5dceb85ddd8d23e892', value: "Today" }, "Today"), h("option", { key: '1ec247907dc275825d6a8a105b3c841d2de131f0', value: "This Week" }, "This Week"), h("option", { key: '3fa99b268c42232eb3dccf73dd125b27608d2ba8', value: "This Month" }, "This Month"), h("option", { key: 'bfeea456dde4d67cdc12b00cdba0b694fb5fa3cf', value: "Custom" }, "Custom Range")), h("button", { key: 'f5d3badb19132f137573b4248f0ce99e95e38daa', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, h("svg", { key: 'f32657ec8d66d3e1a10cdb304406999a933ad7ee', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '4b63cca1e36df1a5cd5b598f558fc5bd88f25f17', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })))), h("button", { key: 'f5133d241b1669c8ae425a76b69a25db91bc9e69', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), h("button", { key: '4df30f93e7b019be1ad293a7e70fad80df5c42a8', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, h("svg", { key: '18dc2f9716e0f5bc095d84349f85703f38d23238', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'cbcfc4fd12a099008c3fcbf762cbfccc63b1706c', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })), "Download All"))), h("table", { key: 'cf9f942709fcc413f99891d612b1640eed94debf', class: `w-full ${className}` }, this.columns && (h("thead", { key: 'baeee3644d8fb2fd9e2d038200b24d433bbdf87b' }, this.columns.map((column, i) => {
+            const iconType = getIconType(this.sortTypeArray[i]);
+            const isColumnSortable = !!(this.isSortable &&
+                this.sortableColumns[i]);
+            return (h("th", { class: "text-left py-3 px-4 text-sm font-medium text-gray-600" }, this.multiselect && i === 0 ? (h("label", { onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    debugger;
+                    if (isColumnSortable) {
+                        this.sortBy(i);
+                    }
+                }, class: isColumnSortable
+                    ? 'cursor-pointer'
+                    : '' }, h("input", { checked: this.areAllSelected, id: "__xpl-table-th",
+                // appear indeterminate when at least one but not all
+                // are selected
+                indeterminate: !this
+                    .areAllSelected &&
+                    this.selected.some((a) => a), onClick: (e) => {
+                    e.stopPropagation();
+                    this.selectAll(e);
+                }, type: "checkbox", value: `select-all-${this.selectAllValue}` }), column, isColumnSortable &&
+                !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))) : (h("label", { onClick: () => isColumnSortable &&
+                    this.sortBy(i), class: isColumnSortable
+                    ? 'cursor-pointer'
+                    : '' }, column, isColumnSortable &&
+                !!this.sortTypeArray[i] && (h("svg", { width: "11", height: "6", viewBox: "0 0 11 6", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10.5 5.5L5.5 0.5L0.5 5.5L10.5 5.5Z", fill: "currentColor" }))
+            // <xpl-icon
+            //     icon={iconType}
+            //     size={16}
+            //     id="__xpl-icon-sort"
+            // ></xpl-icon>
+            )))));
+        }))), h("tbody", { key: 'b0715075cfba14dd9ac1e783e0c27a197e41a725' }, paginatedData.map((row, rowNum) => (h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
+                .length > 0
+                ? this
+                    .selectedValues[rowNum]
+                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell })))))))))), h("div", { key: '658aec34fd3394c205d12ab67d06c6f1bb385aa6', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, h("div", { key: 'aa7d796792186a3bd76f4201ead86e2055d65cf9', class: "flex items-center gap-2" }, h("button", { key: '7517d034c1456224fb24a0d66c3f60a446e96ef0', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '9af8fe875c042ffdd8fd7015b01703d29789a1af', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '41a1023ce1243190df484411ac9390ccd1496f10', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), h("button", { key: 'ac9f0e09603e4bd45d6aa10dd45303f8bc90f892', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: 'af67ed98c91a36076f1578e5eaa49321aa919984', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'f0e3498f7b8e784e4848c0190eaab285f1c220af', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), h("span", { key: '29ae566f6e8f3cbaad39998165529b5022073a56', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '91da8153fd11fac318ef63b768e3ce0fda3e4b63', class: "flex items-center gap-2" }, h("button", { key: 'f8e399e46605f060d09c0f1fcc5864dae84949fd', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '93a0154407f0034993b31f79f746b905d8c720ba', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '67341c2e70e6e0e51bca7f6c0f8d790577efb80c', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("button", { key: '6c4e12bf4877e44ffb5cb6cec4a91dd41c76a95d', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: 'b476cb40832e1116db85780080839fe87fc75777', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'da32eb5c65018fe776af2f65ccd433573b21822e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
+    }
+    static get is() { return "xplor-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "attribute": "columns",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The header values for each column."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "data": {
+                "type": "unknown",
+                "attribute": "data",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[][]",
+                    "resolved": "string[][]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The data for the body of the table."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "freeze": {
+                "type": "boolean",
+                "attribute": "freeze",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "multiselect": {
+                "type": "boolean",
+                "attribute": "multiselect",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles a selectable checkbox for each row in the table"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "striped": {
+                "type": "boolean",
+                "attribute": "striped",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles an optional styling of the background of each even row of the table body."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "selectedValues": {
+                "type": "unknown",
+                "attribute": "selected-values",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The values for the input for each row when multiselect is activated."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "isSortable": {
+                "type": "boolean",
+                "attribute": "is-sortable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles to show the sort button on each table head"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "sortableColumns": {
+                "type": "unknown",
+                "attribute": "sortable-columns",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean[]",
+                    "resolved": "boolean[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Manually determined if the column is sortable"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "areAllSelected": {},
+            "rowData": {},
+            "hasScrolled": {},
+            "selected": {},
+            "sortTypeArray": {},
+            "selectedDateRange": {},
+            "currentPage": {},
+            "totalPages": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tableSelect",
+                "name": "tableSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "watchData"
+            }];
+    }
+}
+////////////// ######################## ///////////////////////////////// This code is commented out as it is not currently in use.
+// import { Component, Prop, State, h } from '@stencil/core';
+// import { StyledHost } from '../x-styles/x-styles';
+// interface ReportData {
+//   submitDate: string;
+//   time: string;
+//   educatorName: string;
+//   room: string;
+// }
+// @Component({
+//   tag: 'xplor-table',
+//   styleUrl: 'xplor-table.scss',
+//   shadow: true,
+// })
+// export class XplorTable {
+//   @State() selectedDateRange: string = 'All';
+//   @State() currentPage: number = 1;
+//   @State() totalPages: number = 1;
+//   @State() sortBy: string = '';
+//   @State() sortDirection: 'asc' | 'desc' = 'asc';
+// @Prop() tablecContent: ReportData[]
+//   private reportData: ReportData[] = [
+//     {
+//       submitDate: '14/01/2025',
+//       time: '10:01:21',
+//       educatorName: 'Andi Kelman',
+//       room: '2025 Holiday Programme'
+//     },
+//     {
+//       submitDate: '10/10/2023',
+//       time: '10:44:46',
+//       educatorName: 'Andi Kelman',
+//       room: '3 Kinder 3 - 23'
+//     },
+//     {
+//       submitDate: '10/10/2023',
+//       time: '10:36:15',
+//       educatorName: 'Andi Kelman',
+//       room: '3 Kinder 3 - 23'
+//     },
+//     {
+//       submitDate: '28/03/2023',
+//       time: '15:51:51',
+//       educatorName: 'Cara Bierenkrant',
+//       room: '8 KINDER 8 - CRECHE Kinder 8 2023'
+//     }
+//   ];
+//   private handleDateRangeChange = (event: Event) => {
+//     const target = event.target as HTMLSelectElement;
+//     this.selectedDateRange = target.value;
+//   };
+//   private handleFilterReports = () => {
+//     console.log('Filter reports clicked');
+//   };
+//   private handleDownloadAll = () => {
+//     console.log('Download all clicked');
+//   };
+//   private handleDownloadReport = (index: number) => {
+//     console.log(`Download report ${index} clicked`);
+//   };
+//   private handleSort = (column: string) => {
+//     if (this.sortBy === column) {
+//       this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+//     } else {
+//       this.sortBy = column;
+//       this.sortDirection = 'asc';
+//     }
+//   };
+//   private handlePagination = (direction: 'first' | 'prev' | 'next' | 'last') => {
+//     switch (direction) {
+//       case 'first':
+//         this.currentPage = 1;
+//         break;
+//       case 'prev':
+//         if (this.currentPage > 1) this.currentPage--;
+//         break;
+//       case 'next':
+//         if (this.currentPage < this.totalPages) this.currentPage++;
+//         break;
+//       case 'last':
+//         this.currentPage = this.totalPages;
+//         break;
+//     }
+//   };
+//   private getSortIcon(column: string) {
+//     if (this.sortBy !== column) {
+//       // Unsorted
+//       return (
+//         <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>
+//         </svg>
+//       );
+//     }
+//     if (this.sortDirection === 'asc') {
+//       // Ascending
+//       return (
+//         <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 15l4-4 4 4"/>
+//         </svg>
+//       );
+//     }
+//     // Descending
+//     return (
+//       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 9l-4 4-4-4"/>
+//       </svg>
+//     );
+//   }
+//   render() {
+//     return (
+//       <StyledHost class="xplor-table">
+//         <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto">
+//           {/* Header */}
+//           <div class="mb-6">
+//             <h1 class="text-xl font-semibold text-gray-900 mb-4">Head Counts Report</h1>
+//             {/* Filter Controls */}
+//             <div class="flex flex-wrap items-center gap-4 mb-6">
+//               <div class="flex items-center gap-2">
+//                 <label class="text-sm text-gray-600 font-medium">Date Range</label>
+//                 <select 
+//                   class="border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
+//                   // value={this.selectedDateRange}
+//                   onInput={this.handleDateRangeChange}
+//                 >
+//                   <option value="All">All</option>
+//                   <option value="Today">Today</option>
+//                   <option value="This Week">This Week</option>
+//                   <option value="This Month">This Month</option>
+//                   <option value="Custom">Custom Range</option>
+//                 </select>
+//                 <button class="p-1.5 border border-gray-300 rounded hover:bg-gray-50">
+//                   <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+//                   </svg>
+//                 </button>
+//               </div>
+//               <button 
+//                 onClick={this.handleFilterReports}
+//                 class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors"
+//               >
+//                 Filter Reports
+//               </button>
+//               <button 
+//                 onClick={this.handleDownloadAll}
+//                 class="flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm"
+//               >
+//                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+//                 </svg>
+//                 Download All
+//               </button>
+//             </div>
+//           </div>
+//           {/* Table */}
+//           <div class="overflow-x-auto">
+//             <table class="w-full">
+//               <thead>
+//                 <tr class="border-b border-gray-200">
+//                   <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">
+//                     <button 
+//                       onClick={() => this.handleSort('submitDate')}
+//                       class="flex items-center gap-1 hover:text-gray-900"
+//                     >
+//                       Submit Date
+//                       {this.getSortIcon('submitDate')}
+//                     </button>
+//                   </th>
+//                   <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">
+//                     <button 
+//                       onClick={() => this.handleSort('time')}
+//                       class="flex items-center gap-1 hover:text-gray-900"
+//                     >
+//                       Time
+//                       {this.getSortIcon('time')}
+//                     </button>
+//                   </th>
+//                   <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">
+//                     <button 
+//                       onClick={() => this.handleSort('educatorName')}
+//                       class="flex items-center gap-1 hover:text-gray-900"
+//                     >
+//                       Educator Name
+//                       {this.getSortIcon('educatorName')}
+//                     </button>
+//                   </th>
+//                   <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">
+//                     <button 
+//                       onClick={() => this.handleSort('room')}
+//                       class="flex items-center gap-1 hover:text-gray-900"
+//                     >
+//                       Room(s)
+//                       {this.getSortIcon('room')}
+//                     </button>
+//                   </th>
+//                   <th class="text-center py-3 px-4 text-sm font-medium text-gray-600">
+//                     Download Report
+//                   </th>
+//                 </tr>
+//               </thead>
+//               <tbody>
+//                 {this.reportData.map((row, index) => (
+//                   <tr key={index} class="border-b border-gray-100 hover:bg-gray-50">
+//                     <td class="py-3 px-4 text-sm text-gray-900">{row.submitDate}</td>
+//                     <td class="py-3 px-4 text-sm text-gray-900">{row.time}</td>
+//                     <td class="py-3 px-4 text-sm text-gray-900">{row.educatorName}</td>
+//                     <td class="py-3 px-4 text-sm text-gray-900">{row.room}</td>
+//                     <td class="py-3 px-4 text-center">
+//                       <div class="flex items-center justify-center gap-2">
+//                         <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs">
+//                           Toggle SortBy
+//                         </span>
+//                         <button 
+//                           onClick={() => this.handleDownloadReport(index)}
+//                           class="p-1.5 text-teal-600 hover:text-teal-800 hover:bg-teal-50 rounded"
+//                         >
+//                           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+//                           </svg>
+//                         </button>
+//                       </div>
+//                     </td>
+//                   </tr>
+//                 ))}
+//               </tbody>
+//             </table>
+//           </div>
+//           {/* Pagination */}
+//           <div class="flex items-center justify-between mt-6 text-sm">
+//             <div class="flex items-center gap-2">
+//               <button 
+//                 onClick={() => this.handlePagination('first')}
+//                 class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50"
+//                 disabled={this.currentPage === 1}
+//               >
+//                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"/>
+//               </button>
+//               <button 
+//                 onClick={() => this.handlePagination('prev')}
+//                 class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50"
+//                 disabled={this.currentPage === 1}
+//               >
+//                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+//               </button>
+//             </div>
+//             <span class="text-gray-600">
+//               Page {this.currentPage} of {this.totalPages}
+//             </span>
+//             <div class="flex items-center gap-2">
+//               <button 
+//                 onClick={() => this.handlePagination('next')}
+//                 class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50"
+//                 disabled={this.currentPage === this.totalPages}
+//               >
+//                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+//               </button>
+//               <button 
+//                 onClick={() => this.handlePagination('last')}
+//                 class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50"
+//                 disabled={this.currentPage === this.totalPages}
+//               >
+//                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"/>
+//                 </svg>
+//               </button>
+//             </div>
+//           </div>
+//         </div>
+//       </StyledHost>
+//     );
+//   }
+// }
+//# sourceMappingURL=xplor-table.js.map