@nuralyui/table 0.0.3 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/table",
-    "version": "0.0.3",
+    "version": "0.0.6",
     "description": "",
     "main": "index.js",
     "type": "module",
@@ -11,5 +11,19 @@
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Labidi Aymen",
-    "license": "ISC"
+    "license": "ISC",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "bundle.js",
+        "*.js",
+        "*.d.ts",
+        "*.js.map"
+    ]
 }

package/react.js

@@ -2,7 +2,7 @@ import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 import { HyTable } from './table.component.js';
 export const HyTableComponent = createComponent({
-    tagName: 'hy-table',
+    tagName: 'nr-table',
     elementClass: HyTable,
     react: React,
     events: {

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/table/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAe,CAAC;IAC9C,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,OAAO;IACrB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,QAAQ,EAAE,WAAW;QACrB,UAAU,EAAE,aAAa;QACzB,eAAe,EAAE,kBAAkB;KACpC;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { HyTable } from './table.component.js';\n\nexport const HyTableComponent = createComponent({\n  tagName: 'hy-table',\n  elementClass: HyTable,\n  react: React,\n  events: {\n    rowClick: 'row-click',\n    sortChange: 'sort-change',\n    selectionChange: 'selection-change',\n  },\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/table/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAe,CAAC;IAC9C,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,OAAO;IACrB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,QAAQ,EAAE,WAAW;QACrB,UAAU,EAAE,aAAa;QACzB,eAAe,EAAE,kBAAkB;KACpC;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { HyTable } from './table.component.js';\n\nexport const HyTableComponent = createComponent({\n  tagName: 'nr-table',\n  elementClass: HyTable,\n  react: React,\n  events: {\n    rowClick: 'row-click',\n    sortChange: 'sort-change',\n    selectionChange: 'selection-change',\n  },\n});\n"]}

package/table.component.d.ts

@@ -1,39 +1,112 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 import { LitElement, PropertyValueMap } from 'lit';
-import './components/hy-table-actions.js';
-import './components/hy-table-filter.js';
-import './components/hy-table-pagination.js';
-import './components/hy-table-content.js';
 import { IHeader, SelectionMode, Sizes, SortAttribute } from './table.types.js';
-export declare class HyTable extends LitElement {
+import '../select/select.component.js';
+import '../icon/icon.component.js';
+import { TableHost } from './interfaces/index.js';
+declare const HyTable_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * Advanced table component with sorting, filtering, pagination, and selection capabilities.
+ *
+ * @example
+ * ```html
+ * <nr-table
+ *   .headers=${headers}
+ *   .rows=${data}
+ *   size="normal"
+ *   selectionMode="multiple">
+ * </nr-table>
+ * ```
+ *
+ * @fires onPaginate - Fired when pagination changes
+ * @fires onSelect - Fired when row selection changes
+ * @fires onSearch - Fired when search/filter is applied
+ * @fires onSort - Fired when sorting is applied
+ */
+export declare class HyTable extends HyTable_base implements TableHost {
     static styles: import("lit").CSSResult;
     headers: IHeader[];
-    rows: [];
+    rows: any[];
     size: Sizes;
     withFilter: boolean;
     expandable: string | undefined;
     selectionMode: SelectionMode | undefined;
     itemPerPage: number[];
     selectedItemPerPage: number;
-    displayedRows: never[];
+    displayedRows: any[];
     selectedItems: boolean[];
     currentPage: number;
-    rowsCopy: [];
+    rowsCopy: any[];
     activeSearch: boolean;
     sortAttribute: SortAttribute;
+    expand: boolean[];
+    showFilterInput: boolean;
+    filterValue: string;
+    globalCheck?: HTMLElement;
+    requiredComponents: string[];
+    private selectionController;
+    private paginationController;
+    private sortController;
+    private filterController;
     connectedCallback(): void;
+    updated(_changedProperties: PropertyValueMap<this> | Map<PropertyKey, unknown>): void;
     willUpdate(_changedProperties: PropertyValueMap<this>): void;
-    _initSelection(): void;
-    _initPagination(): void;
+    /**
+     * Initialize or reset pagination state
+     */
+    private _initPagination;
+    /**
+     * Handle items per page change event
+     */
     _handleItemPerPage(itemPerPageEvent: CustomEvent): void;
+    /**
+     * Handle page navigation event
+     */
     _handleUpdatePage(updatePageEvent: CustomEvent): void;
+    /**
+     * Handle check all rows event
+     */
     _handleCheckAll(checkAllEvent: CustomEvent): void;
+    /**
+     * Handle check single row event
+     */
     _handleCheckOne(checkOneEvent: CustomEvent): void;
+    /**
+     * Handle select single row event (radio button mode)
+     */
     _handleSelectOne(selectOneEvent: CustomEvent): void;
+    /**
+     * Handle cancel selection action
+     */
     _handleCancelSelection(): void;
+    /**
+     * Handle search/filter input
+     */
     _handleSearch(searchEvent: CustomEvent): void;
+    /**
+     * Handle column sort order change
+     */
     _handleSortOrder(sortOrderEvent: CustomEvent): void;
-    _sort(): void;
-    _resetSort(): void;
+    /**
+     * Toggle expanded content for a row
+     */
+    private _showExpandedContent;
+    /**
+     * Toggle filter input visibility
+     */
+    private _toggleFilterInput;
+    /**
+     * Handle filter input change
+     */
+    private _handleFilterInputChange;
+    /**
+     * Render the table component with all templates
+     */
     render(): import("lit").TemplateResult<1>;
 }
+export {};
 //# sourceMappingURL=table.component.d.ts.map

package/table.component.js

@@ -1,22 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 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 styles from './table.style.js';
 import { LitElement, html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import './components/hy-table-actions.js';
-import './components/hy-table-filter.js';
-import './components/hy-table-pagination.js';
-import './components/hy-table-content.js';
-import { Sizes, SortOrder, SortValue } from './table.types.js';
-let HyTable = class HyTable extends LitElement {
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import styles from './table.style.js';
+import { EMPTY_STRING } from './table.types.js';
+// Import required components
+import '../select/select.component.js';
+import '../icon/icon.component.js';
+// Import controllers
+import { TableSelectionController, TablePaginationController, TableSortController, TableFilterController } from './controllers/index.js';
+// Import templates
+import { renderPaginationTemplate, renderContentTemplate, renderActionsTemplate, renderFilterTemplate } from './templates/index.js';
+/**
+ * Advanced table component with sorting, filtering, pagination, and selection capabilities.
+ *
+ * @example
+ * ```html
+ * <nr-table
+ *   .headers=${headers}
+ *   .rows=${data}
+ *   size="normal"
+ *   selectionMode="multiple">
+ * </nr-table>
+ * ```
+ *
+ * @fires onPaginate - Fired when pagination changes
+ * @fires onSelect - Fired when row selection changes
+ * @fires onSearch - Fired when search/filter is applied
+ * @fires onSort - Fired when sorting is applied
+ */
+let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.rows = [];
-        this.size = Sizes.Normal;
+        this.size = "normal" /* Sizes.Normal */;
         this.withFilter = false;
         this.itemPerPage = [5, 10, 15, 20];
         this.selectedItemPerPage = this.itemPerPage[0];
@@ -24,175 +51,229 @@ let HyTable = class HyTable extends LitElement {
         this.selectedItems = [];
         this.rowsCopy = [];
         this.activeSearch = false;
-        this.sortAttribute = { index: -1, order: SortOrder.Default };
+        this.sortAttribute = { index: -1, order: "default" /* SortOrder.Default */ };
+        this.expand = [];
+        this.showFilterInput = false;
+        this.filterValue = EMPTY_STRING;
+        this.requiredComponents = ['hy-select', 'nr-icon', 'nr-checkbox'];
+        // Controllers
+        this.selectionController = new TableSelectionController(this);
+        this.paginationController = new TablePaginationController(this);
+        this.sortController = new TableSortController(this);
+        this.filterController = new TableFilterController(this);
     }
     connectedCallback() {
         super.connectedCallback();
-        this._initSelection();
+        this.selectionController.initSelection();
+    }
+    updated(_changedProperties) {
+        var _a, _b;
+        if (this.globalCheck && (_changedProperties.has('selectedItems') || _changedProperties.has('currentPage') || _changedProperties.has('displayedRows'))) {
+            const checkbox = this.globalCheck;
+            // Get the selection state for the current page only
+            const startIndex = (this.currentPage - 1) * this.selectedItemPerPage;
+            const endIndex = Math.min(startIndex + this.displayedRows.length, this.selectedItems.length);
+            const currentPageSelections = this.selectedItems.slice(startIndex, endIndex);
+            if (currentPageSelections.length > 0 && currentPageSelections.every((isSelected) => isSelected)) {
+                checkbox.checked = true;
+                checkbox.indeterminate = false;
+            }
+            else if (currentPageSelections.some((isSelected) => isSelected)) {
+                checkbox.checked = false;
+                checkbox.indeterminate = true;
+            }
+            else {
+                checkbox.checked = false;
+                checkbox.indeterminate = false;
+            }
+        }
+        if (this.showFilterInput && _changedProperties.has('showFilterInput')) {
+            (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
+        }
     }
     willUpdate(_changedProperties) {
-        if (_changedProperties.has('sortAttribute') && this.sortAttribute.index > -1) {
+        if (_changedProperties.has('rows')) {
+            this.expand = Array(this.rows.length).fill(false);
+        }
+        if (_changedProperties.has('sortAttribute') && this.sortController.isSortActive()) {
             this._initPagination();
-            this._initSelection();
+            this.selectionController.initSelection();
         }
         if (_changedProperties.has('rowsCopy')) {
-            if (this.activeSearch) {
+            if (this.filterController.isSearchActive()) {
                 this._initPagination();
             }
         }
         if (_changedProperties.has('activeSearch') || _changedProperties.has('rows')) {
-            if (!this.activeSearch) {
+            if (!this.filterController.isSearchActive()) {
                 this.rowsCopy = [...this.rows];
                 this._initPagination();
             }
         }
     }
-    _initSelection() {
-        if (this.selectionMode)
-            this.selectedItems = Array(this.rows.length).fill(false);
-    }
+    /**
+     * Initialize or reset pagination state
+     */
     _initPagination() {
-        if (this.sortAttribute.index > -1) {
-            if (this.sortAttribute.order != SortOrder.Default)
-                this._sort();
-            else
-                this._resetSort();
+        if (this.sortController.isSortActive()) {
+            if (!this.sortController.isSortDefault()) {
+                this.sortController.sort();
+            }
+            else {
+                this.sortController.resetSort();
+            }
         }
-        this.displayedRows = this.rowsCopy.slice(0, this.selectedItemPerPage);
-        this.currentPage = this.rowsCopy.length > 0 ? 1 : 0;
+        this.paginationController.initPagination();
     }
+    /**
+     * Handle items per page change event
+     */
     _handleItemPerPage(itemPerPageEvent) {
-        this.selectedItemPerPage = itemPerPageEvent.detail.selectedItemPerPage;
-        this._initPagination();
+        const value = itemPerPageEvent.detail.value || itemPerPageEvent.detail.selectedItemPerPage;
+        this.paginationController.handleItemPerPageChange(Number(value));
     }
+    /**
+     * Handle page navigation event
+     */
     _handleUpdatePage(updatePageEvent) {
-        this.currentPage = updatePageEvent.detail.page;
-        this.displayedRows = this.rowsCopy.slice((updatePageEvent.detail.page - 1) * this.selectedItemPerPage, (updatePageEvent.detail.page - 1) * this.selectedItemPerPage + this.selectedItemPerPage);
-        this.dispatchEvent(new CustomEvent('onPaginate', { bubbles: true, composed: true, detail: { value: this.currentPage } }));
+        this.paginationController.handlePageChange(updatePageEvent.detail.page);
     }
+    /**
+     * Handle check all rows event
+     */
     _handleCheckAll(checkAllEvent) {
-        const everyItemChecked = checkAllEvent.detail.isEveryItemChecked;
-        this.selectedItems = everyItemChecked ? this.selectedItems.map(() => false) : this.selectedItems.map(() => true);
-        this.dispatchEvent(new CustomEvent('onSelect', { bubbles: true, composed: true, detail: { value: this.rowsCopy.filter((_, i) => this.selectedItems[i]) } }));
+        this.selectionController.handleCheckAll(checkAllEvent.detail.isEveryItemChecked);
     }
+    /**
+     * Handle check single row event
+     */
     _handleCheckOne(checkOneEvent) {
-        const indexSelected = checkOneEvent.detail.index;
-        this.selectedItems[indexSelected + (this.currentPage - 1) * this.selectedItemPerPage] = checkOneEvent.detail.value;
-        this.selectedItems = [...this.selectedItems];
-        this.dispatchEvent(new CustomEvent('onSelect', { bubbles: true, composed: true, detail: { value: this.rowsCopy.filter((_, i) => this.selectedItems[i]) } }));
+        this.selectionController.handleCheckOne(checkOneEvent.detail.index, checkOneEvent.detail.value);
     }
+    /**
+     * Handle select single row event (radio button mode)
+     */
     _handleSelectOne(selectOneEvent) {
-        const previousSelected = this.selectedItems.findIndex((isSelected) => isSelected);
-        if (previousSelected > -1) {
-            this.selectedItems[previousSelected] = false;
-        }
-        const indexSelected = selectOneEvent.detail.index;
-        this.selectedItems[indexSelected + (this.currentPage - 1) * this.selectedItemPerPage] = true;
-        this.selectedItems = [...this.selectedItems];
-        this.dispatchEvent(new CustomEvent('onSelect', { bubbles: true, composed: true, detail: { value: this.rowsCopy.filter((_, i) => this.selectedItems[i]) } }));
+        this.selectionController.handleSelectOne(selectOneEvent.detail.index);
     }
+    /**
+     * Handle cancel selection action
+     */
     _handleCancelSelection() {
-        this.selectedItems = this.selectedItems.map(() => false);
-        this.dispatchEvent(new CustomEvent('onSelect', { bubbles: true, composed: true, detail: { value: this.selectedItems } }));
+        this.selectionController.cancelSelection();
     }
+    /**
+     * Handle search/filter input
+     */
     _handleSearch(searchEvent) {
-        const searchValue = searchEvent.detail.value;
-        if (searchValue.trim().length > 0) {
-            this.activeSearch = true;
-            this.rowsCopy = this.rows.filter((rowValue) => {
-                return Object.values(rowValue).some((attributeValue) => {
-                    const stringValue = JSON.stringify(attributeValue);
-                    return stringValue.includes(searchValue);
-                });
-            });
-            this.dispatchEvent(new CustomEvent('onSearch', { bubbles: true, composed: true, detail: { value: this.rowsCopy } }));
-        }
-        else {
-            this.activeSearch = false;
-        }
+        this.filterController.handleSearch(searchEvent.detail.value);
     }
+    /**
+     * Handle column sort order change
+     */
     _handleSortOrder(sortOrderEvent) {
-        const index = sortOrderEvent.detail.index;
-        if (index != this.sortAttribute.index) {
-            this.sortAttribute.index = index;
-            this.sortAttribute.order = SortOrder.Ascending;
-        }
-        else {
-            if (this.sortAttribute.order == SortOrder.Default)
-                this.sortAttribute.order = SortOrder.Ascending;
-            else if (this.sortAttribute.order == SortOrder.Ascending)
-                this.sortAttribute.order = SortOrder.Descending;
-            else
-                this.sortAttribute.order = SortOrder.Default;
-        }
-        this.sortAttribute = Object.assign({}, this.sortAttribute);
-    }
-    _sort() {
-        if (this.rowsCopy.length) {
-            const sortOrder = this.sortAttribute.order == SortOrder.Default
-                ? SortValue.Default
-                : this.sortAttribute.order == SortOrder.Ascending
-                    ? SortValue.Ascending
-                    : SortValue.Descending;
-            this.rowsCopy.sort((a, b) => {
-                const stringifyA = JSON.stringify(a[this.headers[this.sortAttribute.index].key]);
-                const stringifyB = JSON.stringify(b[this.headers[this.sortAttribute.index].key]);
-                const result = stringifyA < stringifyB ? -1 : stringifyA > stringifyB ? 1 : 0;
-                return result * sortOrder;
-            });
-            this.dispatchEvent(new CustomEvent('onSort', { bubbles: true, composed: true, detail: { value: this.rowsCopy } }));
-        }
+        this.sortController.handleSortOrderChange(sortOrderEvent.detail.index);
+    }
+    /**
+     * Toggle expanded content for a row
+     */
+    _showExpandedContent(index) {
+        this.expand[index] = !this.expand[index];
+        this.requestUpdate();
+    }
+    /**
+     * Toggle filter input visibility
+     */
+    _toggleFilterInput() {
+        this.showFilterInput = !this.showFilterInput;
     }
-    _resetSort() {
-        this.rowsCopy.sort((copyA, copyB) => {
-            const positionInOriginalArrayA = this.rows.findIndex((originalA) => JSON.stringify(originalA) === JSON.stringify(copyA));
-            const positionInOriginalArrayB = this.rows.findIndex((originalB) => JSON.stringify(originalB) === JSON.stringify(copyB));
-            return positionInOriginalArrayA > positionInOriginalArrayB
-                ? SortValue.Ascending
-                : positionInOriginalArrayA < positionInOriginalArrayB
-                    ? SortValue.Descending
-                    : SortValue.Default;
-        });
+    /**
+     * Handle filter input change
+     */
+    _handleFilterInputChange(event) {
+        this.filterValue = event.target.value;
+        this.filterController.handleSearch(this.filterValue);
     }
+    /**
+     * Render the table component with all templates
+     */
     render() {
-        return html `${this.selectionMode && !this.withFilter && this.selectedItems.some((isSelected) => isSelected)
-            ? html `<hy-table-actions
-            .selectedItems=${this.selectedItems.filter((isSelected) => isSelected).length}
-            .size=${this.size}
-            @cancel-selection=${this._handleCancelSelection}
-          ></hy-table-actions>`
+        const numberOfPages = Math.ceil(this.rowsCopy.length / this.selectedItemPerPage);
+        const fromItem = this.currentPage > 0
+            ? this.currentPage * this.selectedItemPerPage - this.selectedItemPerPage + 1
+            : 0;
+        const toItem = this.currentPage * this.selectedItemPerPage <= this.rowsCopy.length
+            ? this.currentPage * this.selectedItemPerPage
+            : this.rowsCopy.length;
+        const enableNext = toItem < this.rowsCopy.length;
+        const enablePrevious = fromItem > 1;
+        return html `
+      ${this.selectionMode && !this.withFilter && this.selectionController.hasSelection()
+            ? renderActionsTemplate({
+                selectedItems: this.selectionController.getSelectedCount(),
+                size: this.size,
+                onCancelSelection: () => this._handleCancelSelection()
+            })
             : this.withFilter
                 ? html `
             <div class="filter-container">
-              <hy-table-filter @value-change=${this._handleSearch}></hy-table-filter>
+              ${renderFilterTemplate({
+                    showInput: this.showFilterInput,
+                    value: this.filterValue,
+                    onToggleInput: () => this._toggleFilterInput(),
+                    onChange: (e) => this._handleFilterInputChange(e)
+                })}
             </div>
           `
                 : nothing}
-      <hy-table-content
-        .headers=${this.headers}
-        .rows=${this.displayedRows}
-        .expandable=${this.expandable && !this.selectionMode ? this.expandable : nothing}
-        .selectionMode=${this.selectionMode && !this.withFilter ? this.selectionMode : nothing}
-        .selectedItems=${this.selectedItems}
-        .currentPage=${this.currentPage}
-        .itemPerPage=${this.selectedItemPerPage}
-        .sortAttribute=${this.sortAttribute}
-        .size=${this.size}
-        @check-all=${this._handleCheckAll}
-        @check-one=${this._handleCheckOne}
-        @select-one=${this._handleSelectOne}
-        @update-sort=${this._handleSortOrder}
-      ></hy-table-content>
 
-      <hy-table-pagination
-        .numberOfItems=${this.rowsCopy.length}
-        .currentPage=${this.currentPage}
-        .itemPerPage=${this.itemPerPage}
-        .selectedItemPerPage=${this.selectedItemPerPage}
-        .size=${this.size}
-        @item-per-page=${this._handleItemPerPage}
-        @update-page=${this._handleUpdatePage}
-      ></hy-table-pagination> `;
+      <div class="table-content-wrapper">
+        ${renderContentTemplate({
+            headers: this.headers,
+            rows: this.displayedRows,
+            expandable: this.expandable && !this.selectionMode ? this.expandable : undefined,
+            selectionMode: this.selectionMode && !this.withFilter ? this.selectionMode : undefined,
+            selectedItems: this.selectedItems,
+            currentPage: this.currentPage,
+            itemPerPage: this.selectedItemPerPage,
+            sortAttribute: this.sortAttribute,
+            expand: this.expand,
+            onCheckAll: () => {
+                const startIndex = (this.currentPage - 1) * this.selectedItemPerPage;
+                const endIndex = Math.min(startIndex + this.selectedItemPerPage, this.selectedItems.length);
+                const currentPageItems = this.selectedItems.slice(startIndex, endIndex);
+                const isEveryItemChecked = currentPageItems.every(i => i) && currentPageItems.length > 0;
+                this._handleCheckAll({ detail: { isEveryItemChecked } });
+            },
+            onCheckOne: (e, index) => this._handleCheckOne({ detail: { index, value: e.detail.checked } }),
+            onSelectOne: (index) => this._handleSelectOne({ detail: { index } }),
+            onUpdateSort: (index) => this._handleSortOrder({ detail: { index } }),
+            onShowExpandedContent: (index) => this._showExpandedContent(index)
+        })}
+      </div>
+
+      ${renderPaginationTemplate({
+            numberOfItems: this.rowsCopy.length,
+            itemPerPage: this.itemPerPage,
+            selectedItemPerPage: this.selectedItemPerPage,
+            currentPage: this.currentPage,
+            size: this.size,
+            numberOfPages,
+            fromItem,
+            toItem,
+            enableNext,
+            enablePrevious,
+            onItemPerPageChange: (e) => this._handleItemPerPage(e),
+            onNextPage: () => {
+                this.currentPage++;
+                this._handleUpdatePage({ detail: { page: this.currentPage } });
+            },
+            onPreviousPage: () => {
+                this.currentPage--;
+                this._handleUpdatePage({ detail: { page: this.currentPage } });
+            }
+        })}
+    `;
     }
 };
 HyTable.styles = styles;
@@ -203,7 +284,7 @@ __decorate([
     property({ type: Array })
 ], HyTable.prototype, "rows", void 0);
 __decorate([
-    property()
+    property({ type: String })
 ], HyTable.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean })
@@ -212,7 +293,7 @@ __decorate([
     property({ type: String })
 ], HyTable.prototype, "expandable", void 0);
 __decorate([
-    property()
+    property({ type: String })
 ], HyTable.prototype, "selectionMode", void 0);
 __decorate([
     state()
@@ -238,8 +319,20 @@ __decorate([
 __decorate([
     state()
 ], HyTable.prototype, "sortAttribute", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "expand", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "showFilterInput", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "filterValue", void 0);
+__decorate([
+    query('#global-check')
+], HyTable.prototype, "globalCheck", void 0);
 HyTable = __decorate([
-    customElement('hy-table')
+    customElement('nr-table')
 ], HyTable);
 export { HyTable };
 //# sourceMappingURL=table.component.js.map