@dropi/ui 0.1.20 → 0.1.21

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

@@ -1,33 +1,93 @@
 import { h } from "@stencil/core";
 /**
  * @component dropi-table
- * Data table with sortable columns, row selection, and empty state.
- * Pass columns and rows as JSON strings or arrays.
+ * Data table with sortable columns, row selection, search, column selector and pagination.
  */
 export class DropiTable {
-    /** Column definitions (array or JSON string) */
+    /** Column definitions */
     columns = [];
-    /** Row data (array or JSON string) */
+    /** Row data */
     rows = [];
-    /** Enable row selection (checkboxes) */
-    selectable = false;
+    /** Show checkbox column */
+    showCheckbox = false;
     /** Show loading skeleton */
     loading = false;
-    /** Text shown when no rows */
+    /** Empty state message */
     emptyMessage = 'No hay datos disponibles';
-    /** Stripe alternate rows */
-    striped = false;
+    /** Table title */
+    title = '';
+    /** Show search input */
+    showSearch = false;
+    /** Show column selector button */
+    showColumnSelector = false;
+    /** Show paginator */
+    showPaginator = false;
+    /** Page sizes options */
+    pageSizes = [5, 10, 25, 50];
+    /** Current page (1-based) */
+    currentPage = 1;
+    /** Total pages */
+    totalPages = 1;
+    /** Show row actions (3-dot menu or inline icons) */
+    rowActions = [];
+    // ── Angular-parity props ─────────────────────────────────────
+    /**
+     * Column definitions — matches Angular `headers: DropiTableColumn[]`.
+     * Alias of `columns`; when provided, takes precedence.
+     */
+    headers = [];
+    /**
+     * Row data — matches Angular `data: DropiTableRow[]`.
+     * Alias of `rows`; when provided, takes precedence.
+     */
+    data = [];
+    /** Pre-selected row ids (matches Angular `selectedRowIds`) */
+    selectedRowIds = null;
+    /** Child / expanded rows data (matches Angular `childData`) */
+    childData = [];
+    /** Visible child rows (matches Angular `visibleRowsChildrens`) */
+    visibleRowsChildrens = [];
+    /** Table-level configuration object (matches Angular `dropiTableConfiguration`) */
+    dropiTableConfiguration = null;
+    /** Backend pagination / filter params (matches Angular `dropiTableBackendParams`) */
+    dropiTableBackendParams = null;
+    /** Use cursor-based pagination instead of offset (matches Angular `isCursorPagination`) */
+    isCursorPagination = false;
     parsedColumns = [];
     parsedRows = [];
+    parsedPageSizes = [5, 10, 25, 50];
+    parsedRowActions = [];
     sortKey = '';
     sortDir = null;
+    sortAsc = true;
     selectedKeys = new Set();
-    /** Emitted when sort changes. e.detail = { key, dir } */
+    searchTerm = '';
+    pageSize = 5;
+    showColumnMenu = false;
+    hiddenColumns = new Set();
+    openActionRow = -1;
     dropiSort;
-    /** Emitted when selection changes. e.detail = selected row indices */
     dropiSelection;
-    /** Emitted when a row is clicked. e.detail = { row, index } */
     dropiRowClick;
+    dropiSearch;
+    dropiPageChange;
+    dropiPageSizeChange;
+    dropiAction;
+    // ── Angular-parity events ────────────────────────────────────
+    /** Matches Angular `rowsSelected` */
+    rowsSelected;
+    /** Matches Angular `actionClicked` */
+    actionClicked;
+    /** Matches Angular `onPageChange` */
+    onPageChange;
+    /** Matches Angular `onSizeChange` */
+    onSizeChange;
+    /** Matches Angular `onSortChange` */
+    onSortChange;
+    /** Matches Angular `onSearchChange` */
+    onSearchChange;
+    /** Matches Angular `expandChildren` */
+    expandChildren;
     columnsChanged(val) {
         this.parsedColumns = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -35,16 +95,54 @@ export class DropiTable {
         this.parsedRows = typeof val === 'string' ? JSON.parse(val) : (val || []);
         this.selectedKeys = new Set();
     }
+    pageSizesChanged(val) {
+        this.parsedPageSizes = typeof val === 'string' ? JSON.parse(val) : (val || [5, 10, 25, 50]);
+        this.pageSize = this.parsedPageSizes[0] ?? 5;
+    }
+    rowActionsChanged(val) {
+        this.parsedRowActions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    headersChanged(val) {
+        // `headers` is an alias for `columns`
+        const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        if (parsed.length > 0)
+            this.parsedColumns = parsed;
+    }
+    dataChanged(val) {
+        // `data` is an alias for `rows`
+        const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        if (parsed.length > 0) {
+            this.parsedRows = parsed;
+            this.selectedKeys = new Set();
+        }
+    }
     componentWillLoad() {
-        this.columnsChanged(this.columns);
-        this.rowsChanged(this.rows);
+        // headers/data take precedence over columns/rows when provided
+        const headersSrc = (Array.isArray(this.headers) ? this.headers : []).length
+            ? this.headers : this.columns;
+        const dataSrc = (Array.isArray(this.data) ? this.data : []).length
+            ? this.data : this.rows;
+        this.columnsChanged(headersSrc);
+        this.rowsChanged(dataSrc);
+        this.pageSizesChanged(this.pageSizes);
+        this.rowActionsChanged(this.rowActions);
+    }
+    get visibleColumns() {
+        return this.parsedColumns.filter(c => !this.hiddenColumns.has(c.key));
+    }
+    get filteredRows() {
+        if (!this.searchTerm)
+            return this.parsedRows;
+        const q = this.searchTerm.toLowerCase();
+        return this.parsedRows.filter(row => Object.values(row).some(v => String(v ?? '').toLowerCase().includes(q)));
     }
     get sortedRows() {
+        const rows = this.filteredRows;
         if (!this.sortKey || !this.sortDir)
-            return this.parsedRows;
+            return rows;
         const key = this.sortKey;
         const dir = this.sortDir === 'asc' ? 1 : -1;
-        return [...this.parsedRows].sort((a, b) => {
+        return [...rows].sort((a, b) => {
             const av = a[key] ?? '';
             const bv = b[key] ?? '';
             if (av < bv)
@@ -54,19 +152,28 @@ export class DropiTable {
             return 0;
         });
     }
+    get pagedRows() {
+        if (!this.showPaginator)
+            return this.sortedRows;
+        const start = (this.currentPage - 1) * this.pageSize;
+        return this.sortedRows.slice(start, start + this.pageSize);
+    }
     handleSort(col) {
         if (!col.sortable)
             return;
         if (this.sortKey === col.key) {
             this.sortDir = this.sortDir === 'asc' ? 'desc' : this.sortDir === 'desc' ? null : 'asc';
+            this.sortAsc = this.sortDir !== 'desc';
             if (this.sortDir === null)
                 this.sortKey = '';
         }
         else {
             this.sortKey = col.key;
             this.sortDir = 'asc';
+            this.sortAsc = true;
         }
         this.dropiSort.emit({ key: this.sortKey, dir: this.sortDir });
+        this.onSortChange.emit({ key: this.sortKey, dir: this.sortDir });
     }
     toggleRow(idx) {
         const next = new Set(this.selectedKeys);
@@ -75,34 +182,71 @@ export class DropiTable {
         else
             next.add(idx);
         this.selectedKeys = next;
-        this.dropiSelection.emit(Array.from(next));
+        const selected = Array.from(next);
+        this.dropiSelection.emit(selected);
+        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
     }
     toggleAll(checked) {
-        this.selectedKeys = checked
-            ? new Set(this.sortedRows.map((_, i) => i))
-            : new Set();
-        this.dropiSelection.emit(Array.from(this.selectedKeys));
+        this.selectedKeys = checked ? new Set(this.pagedRows.map((_, i) => i)) : new Set();
+        const selected = Array.from(this.selectedKeys);
+        this.dropiSelection.emit(selected);
+        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
     }
-    sortIcon(col) {
-        if (!col.sortable)
-            return null;
-        if (this.sortKey !== col.key) {
-            return h("dropi-icon", { name: "Sort", width: "12px", height: "12px", color: "Gray-Gray-300" });
+    renderCellValue(value) {
+        if (value === null || value === undefined)
+            return '—';
+        if (typeof value === 'object' && value.type) {
+            switch (value.type) {
+                case 'tag':
+                    return h("dropi-tag", { type: "secondary", state: value.typeTag, text: value.value });
+                case 'date':
+                    return (h("div", { class: "date-label" }, h("span", null, new Date(value.value).toLocaleDateString('es-CO')), !value.hideTime && h("span", null, new Date(value.value).toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' }))));
+                case 'country':
+                    return (h("div", { class: "flag-container" }, value.flag && h("dropi-country-flags", { width: "24", height: "24", country: value.flag, style: { display: 'inline-flex' } }), h("span", null, value.value)));
+                case 'textIcon':
+                    return (h("div", { class: "text-icon-label" }, h("dropi-icon", { name: value.icon, width: "24px", height: "24px", color: value.iconColor || 'Gray-Gray-500' }), value.value && h("span", null, value.value)));
+                case 'status':
+                    return (h("div", { class: "status-label" }, h("div", { class: "status-dot" }, h("div", { class: `dot dot-${(value.status || '').toLowerCase()}` }), h("span", { class: "status-text" }, value.status)), value.value && h("span", { class: "status-description" }, value.value)));
+                case 'image':
+                    return (h("div", { class: "image-label" }, h("div", { class: "img-container" }, h("img", { src: value.imageUrl, alt: value.value })), h("span", null, value.value)));
+                case 'textWrap':
+                    return h("div", { class: "text-wrap-label", style: { maxWidth: value.maxWidth || '220px' } }, value.value);
+                default:
+                    return h("span", { class: "table-labels" }, String(value.value ?? '—'));
+            }
         }
-        return this.sortDir === 'asc'
-            ? h("dropi-icon", { name: "Arrow-Up-2", width: "12px", height: "12px", color: "Primary-Primary-500" })
-            : h("dropi-icon", { name: "Arrow-Down-2", width: "12px", height: "12px", color: "Primary-Primary-500" });
+        return h("span", { class: "table-labels" }, String(value));
     }
     render() {
-        const rows = this.sortedRows;
+        const rows = this.pagedRows;
         const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
-        return (h("div", { key: '3e06da209d1f71b8a4a250f4bcd8a8213f34781d', class: "table-wrap" }, h("table", { key: '20056c30e2652f2a405eeb00954dd7b9c9b5924b', class: { 'table': true, 'table--striped': this.striped } }, h("thead", { key: '1a1ea1914f81d1ef8814f202de4d60308801dc1d' }, h("tr", { key: '22447d7fef0cf22c27c6249570c454d44b0865d3' }, this.selectable && (h("th", { key: 'd51aa876d97e01840a5adc34a5ec53f30fc2cac6', class: "table__th table__th--check" }, h("dropi-checkbox", { key: '192639cf8599dc5f3b095092a403509050e43efa', checked: allSelected, onDropiChange: (e) => this.toggleAll(e.detail) }))), this.parsedColumns.map(col => (h("th", { class: {
-                'table__th': true,
-                'table__th--sortable': !!col.sortable,
-            }, style: { width: col.width, textAlign: col.align || 'left' }, onClick: () => this.handleSort(col) }, h("span", { class: "table__th-inner" }, col.label, this.sortIcon(col))))))), h("tbody", { key: '93f65647369b59f913b381f541a18a215e8e0e9a' }, this.loading ? (Array.from({ length: 5 }).map(() => (h("tr", { class: "table__tr--skeleton" }, this.selectable && h("td", { class: "table__td" }, h("div", { class: "skeleton skeleton--sm" })), this.parsedColumns.map(() => (h("td", { class: "table__td" }, h("div", { class: "skeleton" })))))))) : rows.length === 0 ? (h("tr", null, h("td", { class: "table__td table__td--empty", colSpan: this.parsedColumns.length + (this.selectable ? 1 : 0) }, h("dropi-icon", { name: "Document", width: "24px", height: "24px", color: "Gray-Gray-300" }), h("p", null, this.emptyMessage)))) : (rows.map((row, i) => (h("tr", { class: {
-                'table__tr': true,
-                'table__tr--selected': this.selectedKeys.has(i),
-            }, onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.selectable && (h("td", { class: "table__td table__td--check", onClick: (e) => e.stopPropagation() }, h("dropi-checkbox", { checked: this.selectedKeys.has(i), onDropiChange: () => this.toggleRow(i) }))), this.parsedColumns.map(col => (h("td", { class: "table__td", style: { textAlign: col.align || 'left' } }, row[col.key] ?? '—')))))))))));
+        const hasActions = this.parsedRowActions.length > 0;
+        const cols = this.visibleColumns;
+        return (h("div", { key: '0568597a39d8f4b111c99e38a3559c0ebabe3f7d', class: "table-container" }, (this.showSearch || this.showColumnSelector || this.title) && (h("div", { key: '6b47b6eb27cb3354fae130a642515ee4efbe96e6', class: "search-container" }, this.title && h("h3", { key: 'e88c0cfccd3008cebd479069e6ebf28135aa30dc', class: "table-title" }, this.title), h("div", { key: '9798ab26988d090edd5c14c0dc62c9d0273995cf', class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (h("dropi-input", { key: 'c8871b9eae75d6fb24d4161c2e38278697d23ac0', placeholder: "Buscar", value: this.searchTerm, onOnInput: (e) => {
+                this.searchTerm = e.detail;
+                this.dropiSearch.emit(e.detail);
+                this.onSearchChange.emit(e.detail);
+            } })), this.showColumnSelector && (h("div", { key: 'dc96780a72dca620aa1ed7349f59d837a31602fc', class: "table-tools" }, h("div", { key: 'e0b71a0018af5bba4e56b51e5df98c149f547b22', class: "column-selector-container" }, h("button", { key: '3b5639c4df44eb5f15d69999dae601e639afa2e4', class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, h("dropi-icon", { key: '3c8eb5df52c0494b1080d2e5fc6cf8b219b7b56d', name: "list-table", width: "20px", height: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (h("div", { key: 'a8229fa0100fe68a4b232a06584c3de1a9a90b6f', class: "column-selector-menu" }, this.parsedColumns.map(col => (h("div", { class: "column-selector-option", onClick: () => {
+                const next = new Set(this.hiddenColumns);
+                if (next.has(col.key))
+                    next.delete(col.key);
+                else
+                    next.add(col.key);
+                this.hiddenColumns = next;
+            } }, h("dropi-checkbox", { checked: !this.hiddenColumns.has(col.key) }), h("span", null, col.label)))), h("div", { key: '6a8fa71f8540202baaa24e2facf797149efd353b', class: "column-selector-footer" }, h("div", { key: '70b646908dcd172ae459cca680b0dcc7c5663cb8', class: "column-selector-all", onClick: () => {
+                this.hiddenColumns = this.hiddenColumns.size === 0
+                    ? new Set(this.parsedColumns.map(c => c.key))
+                    : new Set();
+            } }, h("dropi-checkbox", { key: '295ad4f783c7a1737d7ad0e488881b37919c40f6', checked: this.hiddenColumns.size === 0 }), h("span", { key: '838ffe74c4c35363127e9e5daacc25da8cccf76d' }, "Mostrar / Ocultar todo"))))))))))), h("div", { key: '9cd8d7cc6ce997d53b3459065b5b8bef275ec5ea', class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, h("table", { key: 'dd65672ad724cc2becf91099383b2892022b9f25', class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, h("thead", { key: 'd509b97f349b30e08380a3d1e7470d609e854539' }, h("tr", { key: 'f5e27a7b1e191e569f2a396bcaf118e338ff36a6' }, this.showCheckbox && (h("th", { key: 'c99ac20618519207e15556b706c4872bc92edf42', class: "checkbox-header" }, h("dropi-checkbox", { key: 'affd77ad7b0fdaece95e83993d6acff582161cf5', checked: allSelected, onOnChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (h("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center' }, onClick: () => this.handleSort(col) }, h("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, h("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, h("span", null, col.label), col.sortable && (h("div", { class: "order-icons" }, h("dropi-icon", { name: "Caret-up", width: "12px", height: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), h("dropi-icon", { name: "Caret-down", width: "12px", height: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && h("th", { key: 'ad41355f347d7d94ea6de4ddfa4e23ebffd7a7b8', class: "actions-header actions" }, "Acciones"))), h("tbody", { key: '7f3dfbd3fd7aa0b29eb55c5a5825492a1ed0e063' }, this.loading ? (Array.from({ length: 5 }).map(() => (h("tr", { class: "table-row" }, this.showCheckbox && h("td", null, h("div", { class: "skeleton skeleton--sm" })), cols.map(() => h("td", null, h("div", { class: "skeleton" }))), hasActions && h("td", null))))) : rows.length === 0 ? (h("tr", null, h("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, h("div", { class: "empty-table" }, h("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (h("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (h("td", { onClick: (e) => e.stopPropagation() }, h("dropi-checkbox", { checked: this.selectedKeys.has(i), onOnChange: () => this.toggleRow(i) }))), cols.map(col => (h("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn } }, h("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (h("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 3 ? (h("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, h("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", width: "24px", height: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (h("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (h("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } }, h("dropi-icon", { name: action.icon, width: "20px", height: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (h("div", { class: "short-actions" }, this.parsedRowActions.map(action => (h("dropi-icon", { class: "action-icon", name: action.icon, width: "24px", height: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } })))))))))))))), this.showPaginator && (h("div", { key: '20e2f504d995f8875e42ceedfeb3977d777044a6', class: "pagination" }, h("div", { key: '898f69b7801af32df0bdfa9a23cfc7fc5adcac84', class: "page-size-selector" }, h("label", { key: '4871de9ed4a35fa60ac2ac824c96a278ffdf7496' }, "Mostrar"), h("select", { key: '8c2cb250c724ff0914c69135c054c25c9aa857f2', onChange: (e) => {
+                this.pageSize = Number(e.target.value);
+                this.currentPage = 1;
+                this.dropiPageSizeChange.emit(this.pageSize);
+                this.onSizeChange.emit(this.pageSize);
+            } }, this.parsedPageSizes.map(s => (h("option", { value: s, selected: this.pageSize === s }, s))))), h("dropi-paginator", { key: '82a4e645ab197a52ec7985614e53fcae749e8ed4', totalPages: this.totalPages, currentPage: this.currentPage, onPageChange: (e) => {
+                this.currentPage = e.detail;
+                this.dropiPageChange.emit(e.detail);
+                this.onPageChange.emit(e.detail);
+            } })))));
     }
     static get is() { return "dropi-table"; }
     static get encapsulation() { return "shadow"; }
@@ -136,7 +280,7 @@ export class DropiTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Column definitions (array or JSON string)"
+                    "text": "Column definitions"
                 },
                 "getter": false,
                 "setter": false,
@@ -162,7 +306,7 @@ export class DropiTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Row data (array or JSON string)"
+                    "text": "Row data"
                 },
                 "getter": false,
                 "setter": false,
@@ -170,7 +314,7 @@ export class DropiTable {
                 "attribute": "rows",
                 "defaultValue": "[]"
             },
-            "selectable": {
+            "showCheckbox": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -182,12 +326,12 @@ export class DropiTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable row selection (checkboxes)"
+                    "text": "Show checkbox column"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "selectable",
+                "attribute": "show-checkbox",
                 "defaultValue": "false"
             },
             "loading": {
@@ -222,7 +366,7 @@ export class DropiTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Text shown when no rows"
+                    "text": "Empty state message"
                 },
                 "getter": false,
                 "setter": false,
@@ -230,7 +374,47 @@ export class DropiTable {
                 "attribute": "empty-message",
                 "defaultValue": "'No hay datos disponibles'"
             },
-            "striped": {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Table title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "''"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show search input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search",
+                "defaultValue": "false"
+            },
+            "showColumnSelector": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -242,12 +426,270 @@ export class DropiTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Stripe alternate rows"
+                    "text": "Show column selector button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "striped",
+                "attribute": "show-column-selector",
+                "defaultValue": "false"
+            },
+            "showPaginator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show paginator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-paginator",
+                "defaultValue": "false"
+            },
+            "pageSizes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Page sizes options"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-sizes",
+                "defaultValue": "[5, 10, 25, 50]"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total pages"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-pages",
+                "defaultValue": "1"
+            },
+            "rowActions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show row actions (3-dot menu or inline icons)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-actions",
+                "defaultValue": "[]"
+            },
+            "headers": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column definitions \u2014 matches Angular `headers: DropiTableColumn[]`.\nAlias of `columns`; when provided, takes precedence."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "headers",
+                "defaultValue": "[]"
+            },
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row data \u2014 matches Angular `data: DropiTableRow[]`.\nAlias of `rows`; when provided, takes precedence."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "[]"
+            },
+            "selectedRowIds": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | null",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-selected row ids (matches Angular `selectedRowIds`)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "childData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Child / expanded rows data (matches Angular `childData`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "child-data",
+                "defaultValue": "[]"
+            },
+            "visibleRowsChildrens": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible child rows (matches Angular `visibleRowsChildrens`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible-rows-childrens",
+                "defaultValue": "[]"
+            },
+            "dropiTableConfiguration": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Table-level configuration object (matches Angular `dropiTableConfiguration`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropi-table-configuration",
+                "defaultValue": "null"
+            },
+            "dropiTableBackendParams": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Backend pagination / filter params (matches Angular `dropiTableBackendParams`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropi-table-backend-params",
+                "defaultValue": "null"
+            },
+            "isCursorPagination": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use cursor-based pagination instead of offset (matches Angular `isCursorPagination`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-cursor-pagination",
                 "defaultValue": "false"
             }
         };
@@ -256,9 +698,17 @@ export class DropiTable {
         return {
             "parsedColumns": {},
             "parsedRows": {},
+            "parsedPageSizes": {},
+            "parsedRowActions": {},
             "sortKey": {},
             "sortDir": {},
-            "selectedKeys": {}
+            "sortAsc": {},
+            "selectedKeys": {},
+            "searchTerm": {},
+            "pageSize": {},
+            "showColumnMenu": {},
+            "hiddenColumns": {},
+            "openActionRow": {}
         };
     }
     static get events() {
@@ -270,7 +720,7 @@ export class DropiTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when sort changes. e.detail = { key, dir }"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "{ key: string; dir: SortDir }",
@@ -291,7 +741,7 @@ export class DropiTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when selection changes. e.detail = selected row indices"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "number[]",
@@ -306,7 +756,7 @@ export class DropiTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a row is clicked. e.detail = { row, index }"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "{ row: TableRow; index: number }",
@@ -319,6 +769,177 @@ export class DropiTable {
                         }
                     }
                 }
+            }, {
+                "method": "dropiSearch",
+                "name": "dropiSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiPageChange",
+                "name": "dropiPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiPageSizeChange",
+                "name": "dropiPageSizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiAction",
+                "name": "dropiAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ row: TableRow; action: any }",
+                    "resolved": "{ row: TableRow; action: any; }",
+                    "references": {
+                        "TableRow": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-table/dropi-table.tsx",
+                            "id": "src/components/dropi-table/dropi-table.tsx::TableRow"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowsSelected",
+                "name": "rowsSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `rowsSelected`"
+                },
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                }
+            }, {
+                "method": "actionClicked",
+                "name": "actionClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `actionClicked`"
+                },
+                "complexType": {
+                    "original": "{ row: any; action: any }",
+                    "resolved": "{ row: any; action: any; }",
+                    "references": {}
+                }
+            }, {
+                "method": "onPageChange",
+                "name": "onPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `onPageChange`"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "onSizeChange",
+                "name": "onSizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `onSizeChange`"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "onSortChange",
+                "name": "onSortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `onSortChange`"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "onSearchChange",
+                "name": "onSearchChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `onSearchChange`"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "expandChildren",
+                "name": "expandChildren",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `expandChildren`"
+                },
+                "complexType": {
+                    "original": "{ row: any }",
+                    "resolved": "{ row: any; }",
+                    "references": {}
+                }
             }];
     }
     static get watchers() {
@@ -328,6 +949,18 @@ export class DropiTable {
             }, {
                 "propName": "rows",
                 "methodName": "rowsChanged"
+            }, {
+                "propName": "pageSizes",
+                "methodName": "pageSizesChanged"
+            }, {
+                "propName": "rowActions",
+                "methodName": "rowActionsChanged"
+            }, {
+                "propName": "headers",
+                "methodName": "headersChanged"
+            }, {
+                "propName": "data",
+                "methodName": "dataChanged"
             }];
     }
 }