@cwellt_software/cwellt-reactjs-lib 1.2.6 → 1.2.8

package/dist/index.cjs.js

@@ -1555,12 +1555,12 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *
  * @returns React component
  */
-function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection }) {
+function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection, }) {
     const [currentPage, setCurrentPage] = React.useState(1);
     const [expandedRowKey, setExpandedRowKey] = React.useState(null);
     const [sortConfig, setSortConfig] = React.useState({
         key: null,
-        direction: "asc"
+        direction: "asc",
     });
     const [localItemsPerPage, setLocalItemsPerPage] = React.useState(pageSizeOptions[0]);
     const [columnWidths, setColumnWidths] = React.useState(() => columns.reduce((acc, col) => {
@@ -1585,7 +1585,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         onExpand?.(item);
     }, [rowKey, onExpand]);
     const handleSort = React.useCallback((columnKey) => {
-        setSortConfig(prev => {
+        setSortConfig((prev) => {
             if (prev.key !== columnKey)
                 return { key: columnKey, direction: "asc" };
             if (prev.direction === "asc")
@@ -1612,7 +1612,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                 if (typeof aVal === "string" && typeof bVal === "string") {
                     const comparison = aVal.localeCompare(bVal, undefined, {
                         sensitivity: "base",
-                        numeric: true
+                        numeric: true,
                     });
                     return comparison * (sortConfig.direction === "asc" ? 1 : -1);
                 }
@@ -1628,7 +1628,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
             return;
         }
         const itemKey = item[rowKey];
-        setSelectedKeys(prev => {
+        setSelectedKeys((prev) => {
             const newSet = new Set(prev);
             if (rowSelection?.type === "single") {
                 // Single mode: only one row selected
@@ -1649,7 +1649,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                     newSet.add(itemKey);
                 }
             }
-            const selectedRows = sortedData.filter(item => newSet.has(item[rowKey]));
+            const selectedRows = sortedData.filter((item) => newSet.has(item[rowKey]));
             // Run after render to avoid "Cannot update a component while rendering another component"
             setTimeout(() => {
                 rowSelection?.onChange?.(Array.from(newSet), selectedRows);
@@ -1678,7 +1678,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         const startWidth = e.target.parentElement?.offsetWidth || 0;
         const onMouseMove = (moveEvent) => {
             const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50); // min 50px
-            setColumnWidths(prev => ({ ...prev, [key]: newWidth }));
+            setColumnWidths((prev) => ({ ...prev, [key]: newWidth }));
         };
         const onMouseUp = () => {
             window.removeEventListener("mousemove", onMouseMove);
@@ -1691,7 +1691,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         if (stickyHeader || scrollHeight) {
             return {
                 maxHeight: scrollHeight ?? 300,
-                overflowY: "auto"
+                overflowY: "auto",
             };
         }
         return {}; // no height or scroll
@@ -1707,34 +1707,26 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         if (!paginatedData || paginatedData.length === 0) {
             return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
         }
-        return paginatedData.map(item => {
+        return paginatedData.map((item) => {
             const itemKey = item[rowKey];
             if (!itemKey)
                 console.warn("Missing row key for item", item);
             const isSelected = selectedKeys.has(itemKey);
-            const dynamicClassName = typeof classNameRow === "function"
-                ? classNameRow(item)
-                : classNameRow ?? "";
+            const dynamicClassName = typeof classNameRow === "function" ? classNameRow(item) : (classNameRow ?? "");
             return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { className: `${dynamicClassName} ${hasClassNameRow(item) ? item.classNameRow : ""} ${isSelected ? "cw-table-row-selected" : ""}`, onClick: (e) => rowSelection && handleRowClick(item, e), style: {
                             cursor: rowSelection ? "pointer" : "default",
                             backgroundColor: isSelected ? "var(--cw-color-info-container)" : undefined,
                             transition: "background-color 0.2s ease",
-                        }, children: [expandedRowRender && (jsxRuntime.jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey
-                                        ? "cwi-chevron-down"
-                                        : "cwi-chevron-right"}` }) })), columns.map(col => (jsxRuntime.jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex]) : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
+                        }, children: [expandedRowRender && (jsxRuntime.jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map((col) => (jsxRuntime.jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex]) : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
         });
     };
-    return (jsxRuntime.jsxs("div", { id: id, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [jsxRuntime.jsx("div", { style: scrollContainerStyle, children: jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { style: stickyHeader
-                                ? { position: "sticky", top: 0, background: "white", zIndex: 2 }
-                                : undefined, children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map(col => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex
-                                            ? sortConfig.direction
-                                            : ""}`.trim(), style: {
+    return (jsxRuntime.jsxs("div", { id: id, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [jsxRuntime.jsx("div", { style: scrollContainerStyle, children: jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { style: stickyHeader ? { position: "sticky", top: 0, background: "white", zIndex: 2 } : undefined, children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map((col) => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex ? sortConfig.direction : ""}`.trim(), style: {
                                             cursor: col.sortable ? "pointer" : "default",
                                             userSelect: "none",
                                             width: columnWidths[col.key] ?? col.width,
                                             ...((col.width || columnWidths[col.key]) && {
                                                 minWidth: 50,
-                                                maxWidth: columnWidths[col.key] ?? col.width
+                                                maxWidth: columnWidths[col.key] ?? col.width,
                                             }),
                                         }, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsx("span", { children: col.title }), col.sortable && col.dataIndex && (jsxRuntime.jsx(CwIcon, { size: "large", iconId: sortConfig.key !== col.dataIndex
                                                             ? "sortable"
@@ -1749,7 +1741,214 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                             if (isNaN(value) || value < 1 || value > totalPages) {
                                 handlePageChange(1);
                             }
-                        }, min: 1, max: totalPages }), jsxRuntime.jsxs("span", { children: ["of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsxRuntime.jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsxRuntime.jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
+                        }, min: 1, max: totalPages }), jsxRuntime.jsxs("span", { children: ["of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsxRuntime.jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map((size) => (jsxRuntime.jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
+}
+
+/**
+ * A reusable and customizable table component (server-side pagination and sorting).
+ *
+ * @param props - Component props to configure columns, data, styles, pagination, expanded rows, and more.
+ *
+ * @example
+ * // --- Componente padre ---
+ * const columns: Column<User>[] = [
+ *   { title: "Name", dataIndex: "name", key: "name", sortable: true },
+ *   { title: "Age", dataIndex: "age", key: "age", sortable: true },
+ *   { title: "Address", dataIndex: "address", key: "address" }
+ * ];
+ *
+ * // Estado para datos, total y paginación/ordenación
+ * const [tableState, setTableState] = useState<ServerSideTableState<User>>({
+ *   page: 1,
+ *   pageSize: 5,
+ *   sortKey: null,
+ *   sortDirection: null
+ * });
+ * const [data, setData] = useState<User[]>([]);
+ * const [totalItems, setTotalItems] = useState(0);
+ * const [loading, setLoading] = useState(false);
+ *
+ * // Simulación de fetch al servidor
+ * useEffect(() => {
+ *   setLoading(true);
+ *   fetch(`/api/users?page=${tableState.page}&pageSize=${tableState.pageSize}` +
+ *     (tableState.sortKey ? `&sortKey=${tableState.sortKey}&sortDirection=${tableState.sortDirection}` : "")
+ *   )
+ *     .then(res => res.json())
+ *     .then(({ items, total }) => {
+ *       setData(items);
+ *       setTotalItems(total);
+ *     })
+ *     .finally(() => setLoading(false));
+ * }, [tableState]);
+ *
+ * <CwTableServerSide<User>
+ *   columns={columns}
+ *   data={data}
+ *   totalItems={totalItems}
+ *   pagination={true}
+ *   pageSizeOptions={[5, 10, 20]}
+ *   loading={loading}
+ *   serverState={tableState}
+ *   onChange={setTableState}
+ *   rowKey="id"
+ *   textNoData="No data available"
+ * />
+ *
+ * @returns React component
+ */
+function CwTableServerSide({ columns, data, totalItems, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection, onChange, serverState, }) {
+    const [internalState, setInternalState] = React.useState({
+        page: 1,
+        pageSize: pageSizeOptions[0],
+        sortKey: null,
+        sortDirection: null,
+    });
+    const [expandedRowKey, setExpandedRowKey] = React.useState(null);
+    const [columnWidths, setColumnWidths] = React.useState(() => columns.reduce((acc, col) => {
+        if (col.width)
+            acc[col.key] = col.width;
+        return acc;
+    }, {}));
+    const [selectedKeys, setSelectedKeys] = React.useState(new Set(rowSelection?.selectedRowKeys || []));
+    React.useEffect(() => {
+        setSelectedKeys(new Set(rowSelection?.selectedRowKeys || []));
+    }, [rowSelection?.selectedRowKeys]);
+    // Usar estado controlado o interno
+    const state = serverState ?? internalState;
+    // Notificar cambios al padre
+    const triggerChange = React.useCallback((next) => {
+        const newState = { ...state, ...next };
+        if (!serverState)
+            setInternalState(newState);
+        onChange?.(newState);
+    }, [state, serverState, onChange]);
+    const handleItemsPerPageChange = React.useCallback((e) => {
+        triggerChange({ pageSize: parseInt(e.target.value, 10), page: 1 });
+    }, [triggerChange]);
+    const handleRowExpand = React.useCallback((item) => {
+        const itemKey = item[rowKey];
+        setExpandedRowKey((prev) => (prev === itemKey ? null : itemKey));
+        onExpand?.(item);
+    }, [rowKey, onExpand]);
+    const handleSort = React.useCallback((columnKey) => {
+        let nextSortKey = columnKey;
+        let nextSortDirection = "asc";
+        if (state.sortKey === columnKey) {
+            nextSortDirection = state.sortDirection === "asc" ? "desc" : state.sortDirection === "desc" ? null : "asc";
+            if (nextSortDirection === null)
+                nextSortKey = null;
+        }
+        triggerChange({ sortKey: nextSortKey, sortDirection: nextSortDirection, page: 1 });
+    }, [state, triggerChange]);
+    const handleRowClick = React.useCallback((item, e) => {
+        if (e.target.closest(".cw-table-col-expand")) {
+            return;
+        }
+        const itemKey = item[rowKey];
+        setSelectedKeys((prev) => {
+            const newSet = new Set(prev);
+            if (rowSelection?.type === "single") {
+                if (newSet.has(itemKey)) {
+                    newSet.clear();
+                }
+                else {
+                    newSet.clear();
+                    newSet.add(itemKey);
+                }
+            }
+            else {
+                if (newSet.has(itemKey)) {
+                    newSet.delete(itemKey);
+                }
+                else {
+                    newSet.add(itemKey);
+                }
+            }
+            const selectedRows = data.filter((item) => newSet.has(item[rowKey]));
+            setTimeout(() => {
+                rowSelection?.onChange?.(Array.from(newSet), selectedRows);
+            }, 0);
+            return newSet;
+        });
+    }, [rowSelection, rowKey, data]);
+    const totalPages = React.useMemo(() => {
+        return pagination ? Math.ceil(totalItems / state.pageSize) : 1;
+    }, [totalItems, state.pageSize, pagination]);
+    const handlePageChange = (page) => {
+        if (page >= 1 && page <= totalPages)
+            triggerChange({ page });
+    };
+    const startResize = (e, key) => {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startWidth = e.target.parentElement?.offsetWidth || 0;
+        const onMouseMove = (moveEvent) => {
+            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);
+            setColumnWidths((prev) => ({ ...prev, [key]: newWidth }));
+        };
+        const onMouseUp = () => {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+        };
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+    };
+    const scrollContainerStyle = React.useMemo(() => {
+        if (stickyHeader || scrollHeight) {
+            return {
+                maxHeight: scrollHeight ?? 300,
+                overflowY: "auto",
+            };
+        }
+        return {};
+    }, [stickyHeader, scrollHeight]);
+    const getColSpan = () => columns.length + (expandedRowRender ? 1 : 0);
+    const hasClassNameRow = (item) => {
+        return typeof item === "object" && item !== null && "classNameRow" in item;
+    };
+    const renderTableBody = () => {
+        if (loading) {
+            return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: jsxRuntime.jsx("div", { children: "Loading data..." }) }) }));
+        }
+        if (!data || data.length === 0) {
+            return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
+        }
+        return data.map((item) => {
+            const itemKey = item[rowKey];
+            if (!itemKey)
+                console.warn("Missing row key for item", item);
+            const isSelected = selectedKeys.has(itemKey);
+            const dynamicClassName = typeof classNameRow === "function" ? classNameRow(item) : (classNameRow ?? "");
+            return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { className: `${dynamicClassName} ${hasClassNameRow(item) ? item.classNameRow : ""} ${isSelected ? "cw-table-row-selected" : ""}`, onClick: (e) => rowSelection && handleRowClick(item, e), style: {
+                            cursor: rowSelection ? "pointer" : "default",
+                            backgroundColor: isSelected ? "var(--cw-color-info-container)" : undefined,
+                            transition: "background-color 0.2s ease",
+                        }, children: [expandedRowRender && (jsxRuntime.jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map((col) => (jsxRuntime.jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex]) : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
+        });
+    };
+    return (jsxRuntime.jsxs("div", { id: id, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [jsxRuntime.jsx("div", { style: scrollContainerStyle, children: jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { style: stickyHeader ? { position: "sticky", top: 0, background: "white", zIndex: 2 } : undefined, children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map((col) => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${state.sortKey === col.dataIndex ? state.sortDirection : ""}`.trim(), style: {
+                                            cursor: col.sortable ? "pointer" : "default",
+                                            userSelect: "none",
+                                            width: columnWidths[col.key] ?? col.width,
+                                            ...((col.width || columnWidths[col.key]) && {
+                                                minWidth: 50,
+                                                maxWidth: columnWidths[col.key] ?? col.width,
+                                            }),
+                                        }, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsx("span", { children: col.title }), col.sortable && col.dataIndex && (jsxRuntime.jsx(CwIcon, { size: "large", iconId: state.sortKey !== col.dataIndex
+                                                            ? "sortable"
+                                                            : state.sortDirection === "asc"
+                                                                ? "sortable-asc"
+                                                                : "sortable-desc" }))] }), jsxRuntime.jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderTableBody() })] }) }), pagination && totalPages > 1 && (jsxRuntime.jsxs("footer", { className: "cw-table-pagination", children: [jsxRuntime.jsx("button", { onClick: () => handlePageChange(1), disabled: state.page === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(state.page - 1), disabled: state.page === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), jsxRuntime.jsx("input", { type: "text", inputMode: "numeric", value: state.page, onChange: (e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (!isNaN(value))
+                                handlePageChange(value);
+                        }, onBlur: (e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (isNaN(value) || value < 1 || value > totalPages) {
+                                handlePageChange(1);
+                            }
+                        }, min: 1, max: totalPages }), jsxRuntime.jsxs("span", { children: ["of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsxRuntime.jsx("select", { value: state.pageSize, onChange: handleItemsPerPageChange, children: pageSizeOptions.map((size) => (jsxRuntime.jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
 }
 
 var styles$e = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","badge":"cw-tabs-module_badge__AmVxW","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
@@ -9331,6 +9530,7 @@ exports.CwSortableList = CwSortableList;
 exports.CwSuperScheduler = CwSuperScheduler;
 exports.CwTable = CwTable;
 exports.CwTableGrouped = CwTableGrouped;
+exports.CwTableServerSide = CwTableServerSide;
 exports.CwTabs = CwTabs;
 exports.CwTextArea = CwTextArea;
 exports.CwTime = CwTime;