@ramesesinc/platform-core 0.1.0

package/dist/components/table/DataTable.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+export interface ColumnDefinition {
+    id?: string;
+    title?: string | React.ReactNode;
+    width?: string | number;
+    align?: "left" | "center" | "right";
+    render?: (value: any, row: any, rowIndex: number) => React.ReactNode;
+    formatter?: (value: any, row?: any) => string;
+    colspan?: number;
+    rowspan?: number;
+    headerRow?: number;
+    datatype?: "string" | "number" | "date" | "boolean" | "currency" | "expr";
+    subrow?: number;
+    visible?: boolean;
+    sortable?: boolean;
+    expr?: string;
+    primary?: boolean;
+    component?: string | null;
+}
+export interface DataTableProps {
+    data?: any[];
+    columns?: ColumnDefinition[];
+    loading?: boolean;
+    emptyMessage?: string;
+    striped?: boolean;
+    bordered?: boolean;
+    hover?: boolean;
+    dense?: boolean;
+    stickyHeader?: boolean;
+    maxHeight?: string | number;
+    rowKey?: string;
+    onRowClick?: (row: any, rowIndex: number) => void;
+    onCellClick?: (value: any, row: any, column: ColumnDefinition, rowIndex: number, colIndex: number) => void;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedKeys: string[]) => void;
+    selectable?: boolean;
+    className?: string;
+    rowClassName?: (row: any, rowIndex: number) => string;
+    cellRenderer?: (value: any, row: any, column: ColumnDefinition) => React.ReactNode;
+    headerRenderer?: (column: ColumnDefinition) => React.ReactNode;
+    multiRowHeader?: ColumnDefinition[][];
+    rowActions?: (row: any, rowIndex: number) => React.ReactNode;
+    rowsPerItem?: number;
+}
+export declare const DataTable: React.FC<DataTableProps>;
+export default DataTable;

package/dist/components/table/DataTable.js

@@ -0,0 +1,253 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { memo, useMemo } from "react";
+import { RowProvider } from "../../core/RowContext";
+import { render } from "../../lib/utils/ExprUtil";
+import { useTableContext } from "./TableContext";
+const TableHeader = memo(({ visibleColumns, selectable, rowActions, data, selectedRows, handleSelectAll, sortConfig, handleSort, headerRenderer, multiRowHeader, }) => {
+    const getColumnKey = (column, index) => column.id || column.expr || `col-${index}`;
+    const getColumnTitle = (column) => column.title || column.id || "";
+    const renderHeader = (column) => {
+        if (headerRenderer)
+            return headerRenderer(column);
+        const title = getColumnTitle(column);
+        if (!title)
+            return null;
+        return (_jsxs("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: column.align === "center" ? "center" : column.align === "right" ? "flex-end" : "flex-start",
+                gap: "6px",
+                cursor: column.sortable ? "pointer" : "default",
+                userSelect: "none",
+            }, onClick: () => column.id && handleSort(column.id, column.sortable), children: [title, column.sortable && column.id && sortConfig.key === column.id && (_jsx("span", { style: { fontSize: "10px", color: "#3b82f6" }, children: sortConfig.direction === "asc" ? "▲" : "▼" }))] }));
+    };
+    if (multiRowHeader && multiRowHeader.length > 0) {
+        return (_jsx(_Fragment, { children: multiRowHeader.map((headerRow, rowIndex) => (_jsxs("tr", { children: [selectable && rowIndex === 0 && (_jsx("th", { className: "dt-checkbox-cell", rowSpan: multiRowHeader.length, children: _jsx("input", { type: "checkbox", onChange: handleSelectAll, checked: data.length > 0 && selectedRows.length === data.length }) })), headerRow.map((column, colIndex) => (_jsx("th", { style: { width: column.width, textAlign: column.align || "left" }, colSpan: column.colspan, rowSpan: column.rowspan, children: renderHeader(column) }, getColumnKey(column, colIndex)))), rowActions && rowIndex === 0 && (_jsx("th", { className: "dt-actions-cell", rowSpan: multiRowHeader.length, children: "Actions" }))] }, `header-row-${rowIndex}`))) }));
+    }
+    // Auto multi-row detection
+    const needsMultiRow = visibleColumns.some((col) => (col.rowspan && col.rowspan > 1) || (col.colspan && col.colspan > 1) || (col.headerRow !== undefined && col.headerRow > 0));
+    if (needsMultiRow) {
+        const maxHeaderRow = Math.max(...visibleColumns.filter((col) => !col.subrow || col.subrow === 0).map((col) => { var _a; return (_a = col.headerRow) !== null && _a !== void 0 ? _a : 0; }), 0);
+        const totalHeaderRows = maxHeaderRow + 1;
+        const headerRows = [];
+        for (let rowIdx = 0; rowIdx <= maxHeaderRow; rowIdx++) {
+            const colsInRow = visibleColumns.filter((col) => {
+                var _a;
+                if (col.subrow && col.subrow > 0)
+                    return false;
+                return ((_a = col.headerRow) !== null && _a !== void 0 ? _a : 0) === rowIdx;
+            });
+            if (colsInRow.length === 0)
+                continue;
+            headerRows.push(_jsxs("tr", { children: [selectable && rowIdx === 0 && (_jsx("th", { className: "dt-checkbox-cell", rowSpan: totalHeaderRows, children: _jsx("input", { type: "checkbox", onChange: handleSelectAll, checked: data.length > 0 && selectedRows.length === data.length }) })), colsInRow.map((column, index) => (_jsx("th", { style: {
+                            width: column.width,
+                            textAlign: column.align || (column.colspan ? "center" : "left"),
+                        }, rowSpan: column.rowspan || 1, colSpan: column.colspan || 1, className: column.sortable ? "sortable" : "", children: renderHeader(column) }, getColumnKey(column, index)))), rowActions && rowIdx === 0 && (_jsx("th", { className: "dt-actions-cell", rowSpan: totalHeaderRows, children: "Actions" }))] }, `header-row-${rowIdx}`));
+        }
+        return _jsx(_Fragment, { children: headerRows });
+    }
+    // Simple single-row header
+    return (_jsxs("tr", { children: [selectable && (_jsx("th", { className: "dt-checkbox-cell", children: _jsx("input", { type: "checkbox", onChange: handleSelectAll, checked: data.length > 0 && selectedRows.length === data.length }) })), visibleColumns.map((column, index) => {
+                if (column.subrow && column.subrow > 0)
+                    return null;
+                return (_jsx("th", { style: { width: column.width, textAlign: column.align || "left" }, className: column.sortable ? "sortable" : "", children: renderHeader(column) }, getColumnKey(column, index)));
+            }), rowActions && _jsx("th", { className: "dt-actions-cell", children: "Actions" })] }));
+});
+const TableBody = memo(({ sortedData, visibleColumns, emptyMessage, selectable, rowActions, selectedRows, handleSelectRow, handleRowClick, handleCellClick, rowClassName, rowKey, rowsPerItem, cellRenderer, }) => {
+    const generateKey = () => `RP-${Math.random().toString(36).slice(2)}`;
+    const getNestedValue = (obj, path) => {
+        if (!path)
+            return null;
+        return path.split(".").reduce((acc, part) => acc && acc[part], obj);
+    };
+    const getRowKey = (row) => row[rowKey] || JSON.stringify(row);
+    const isRowSelected = (row) => selectedRows.includes(getRowKey(row));
+    const getColumnKey = (column, index) => column.id || column.expr || `col-${index}`;
+    /*
+    const renderExpression = (expr: string, row: any): string => {
+      try {
+        return expr.replace(/\{\{(\w+(?:\.\w+)*)\}\}/g, (_match, path) => {
+          const value = getNestedValue(row, path);
+          return value != null ? String(value) : "";
+        });
+      } catch (err: any) {
+        return `Error: ${err.message}`;
+      }
+    };
+    */
+    const formatValue = (value, datatype = "string", row) => {
+        if (value === null || value === undefined)
+            return "";
+        switch (datatype) {
+            case "number":
+                return typeof value === "number" ? value.toLocaleString() : value;
+            case "currency":
+                return typeof value === "number" ? `$${value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : value;
+            case "date":
+                return value instanceof Date ? value.toLocaleDateString() : new Date(value).toLocaleDateString();
+            case "boolean":
+                return value ? "✓" : "✗";
+            default:
+                return String(value);
+        }
+    };
+    const renderCellContent = (row, column, rowIndex) => {
+        if (column.expr) {
+            const rendered = render(column.expr, row);
+            if (column.render)
+                return column.render(rendered, row, rowIndex);
+            return _jsx("span", { dangerouslySetInnerHTML: { __html: rendered } });
+        }
+        const value = column.id ? getNestedValue(row, column.id) : null;
+        if (cellRenderer)
+            return cellRenderer(value, row, column);
+        if (column.render)
+            return column.render(value, row, rowIndex);
+        if (column.formatter)
+            return column.formatter(value, row);
+        return formatValue(value, column.datatype || "string", row);
+    };
+    if (!sortedData || sortedData.length === 0) {
+        return (_jsx("tr", { children: _jsx("td", { colSpan: visibleColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0), style: { textAlign: "center", padding: "24px" }, children: emptyMessage }) }));
+    }
+    return (_jsx(_Fragment, { children: sortedData.map((row, itemIndex) => {
+            const isSelected = isRowSelected(row);
+            const customRowClass = rowClassName ? rowClassName(row, itemIndex) : "";
+            const rows = [];
+            for (let subrowIndex = 0; subrowIndex < rowsPerItem; subrowIndex++) {
+                const rowClasses = [isSelected && "dt-selected", customRowClass].filter(Boolean).join(" ");
+                rows.push(_jsx(RowProvider, { data: row, children: _jsxs("tr", { className: rowClasses, onClick: () => handleRowClick(row, itemIndex), children: [selectable && subrowIndex === 0 && (_jsx("td", { className: "dt-checkbox-cell", rowSpan: rowsPerItem, children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: () => handleSelectRow(row), onClick: (e) => e.stopPropagation() }) })), visibleColumns.map((column, colIndex) => {
+                                if (!column.id && !column.expr)
+                                    return null;
+                                if ((column.subrow || 0) !== subrowIndex)
+                                    return null;
+                                if (column.subrow && column.subrow > 0 && subrowIndex > 0)
+                                    return null;
+                                const value = column.id ? getNestedValue(row, column.id) : null;
+                                return (_jsx("td", { style: { textAlign: column.align || "left" }, className: `
+                        ${column.datatype === "number" || column.datatype === "currency" ? "dt-numeric" : ""}
+                        ${column.datatype === "boolean" ? "dt-boolean" : ""}
+                      `.trim(), onClick: (e) => handleCellClick(e, value, row, column, itemIndex, colIndex), children: renderCellContent(row, column, itemIndex) }, getColumnKey(column, colIndex)));
+                            }), rowActions && subrowIndex === 0 && (_jsx("td", { className: "dt-actions-cell", rowSpan: rowsPerItem, children: rowActions(row, itemIndex) }))] }, `${getRowKey(row)}-subrow-${subrowIndex}`) }, generateKey()));
+            }
+            return rows;
+        }) }));
+});
+// ============================================================================
+// DATATABLE COMPONENT
+// ============================================================================
+export const DataTable = ({ 
+// Direct props (fallback when used outside TableProvider)
+data: propData, columns: propColumns, loading: propLoading = false, emptyMessage = "No data available", striped = false, bordered = false, hover = true, dense = false, stickyHeader = false, maxHeight, rowKey = "id", onRowClick, onCellClick, selectedRows = [], onSelectionChange, selectable = false, className = "", rowClassName, cellRenderer, headerRenderer, multiRowHeader, rowActions, rowsPerItem = 1, }) => {
+    var _a, _b;
+    // Try to consume context; if not inside a provider, ctx will be null.
+    let ctxColumns;
+    let ctxRows;
+    let ctxLoading;
+    try {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const ctx = useTableContext();
+        ctxColumns = ctx.columns;
+        ctxRows = ctx.rows;
+        ctxLoading = ctx.loading;
+    }
+    catch (_c) {
+        // Not inside TableProvider – use props directly
+    }
+    // Context wins over direct props
+    const data = (_a = ctxRows !== null && ctxRows !== void 0 ? ctxRows : propData) !== null && _a !== void 0 ? _a : [];
+    const columns = (_b = propColumns !== null && propColumns !== void 0 ? propColumns : ctxColumns) !== null && _b !== void 0 ? _b : [];
+    const loading = ctxLoading !== null && ctxLoading !== void 0 ? ctxLoading : propLoading;
+    // ---- Sort state ----
+    const [sortConfig, setSortConfig] = React.useState({
+        key: null,
+        direction: null,
+    });
+    // ---- Derived values ----
+    const visibleColumns = useMemo(() => columns.filter((col) => {
+        if (col.visible === false)
+            return false;
+        return col.title || col.id || col.expr || col.render;
+    }), [columns]);
+    const sortedData = useMemo(() => {
+        if (!sortConfig.key)
+            return data;
+        const getNestedValue = (obj, path) => path.split(".").reduce((acc, part) => acc && acc[part], obj);
+        return [...data].sort((a, b) => {
+            const aVal = getNestedValue(a, sortConfig.key);
+            const bVal = getNestedValue(b, sortConfig.key);
+            if (aVal === bVal)
+                return 0;
+            if (aVal == null)
+                return 1;
+            if (bVal == null)
+                return -1;
+            const cmp = aVal < bVal ? -1 : 1;
+            return sortConfig.direction === "asc" ? cmp : -cmp;
+        });
+    }, [data, sortConfig]);
+    // ---- Handlers ----
+    const handleRowClick = (row, rowIndex) => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, rowIndex);
+    const handleCellClick = (e, value, row, column, rowIndex, colIndex) => {
+        e.stopPropagation();
+        onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(value, row, column, rowIndex, colIndex);
+    };
+    const getRowKey = (row) => row[rowKey] || JSON.stringify(row);
+    const handleSelectAll = (e) => {
+        if (!onSelectionChange)
+            return;
+        if (e.target.checked) {
+            onSelectionChange(data.map((row) => getRowKey(row)));
+        }
+        else {
+            onSelectionChange([]);
+        }
+    };
+    const handleSelectRow = (row) => {
+        if (!onSelectionChange)
+            return;
+        const key = getRowKey(row);
+        if (selectedRows.includes(key)) {
+            onSelectionChange(selectedRows.filter((k) => k !== key));
+        }
+        else {
+            onSelectionChange([...selectedRows, key]);
+        }
+    };
+    const handleSort = (columnId, sortable) => {
+        if (!sortable)
+            return;
+        setSortConfig((prev) => {
+            if (prev.key === columnId) {
+                if (prev.direction === "asc")
+                    return { key: columnId, direction: "desc" };
+                if (prev.direction === "desc")
+                    return { key: null, direction: null };
+            }
+            return { key: columnId, direction: "asc" };
+        });
+    };
+    // ---- CSS ----
+    const tableClasses = [
+        "data-table",
+        striped && "dt-striped",
+        bordered && "dt-bordered",
+        hover && "dt-hover",
+        dense && "dt-dense",
+        stickyHeader && "dt-sticky-header",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const containerStyle = {};
+    if (maxHeight) {
+        containerStyle.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+        containerStyle.overflowY = "auto";
+    }
+    // ---- Render ----
+    if (loading) {
+        return (_jsxs("div", { className: "dt-loading", children: [_jsx("div", { className: "dt-spinner" }), _jsx("p", { children: "Loading..." })] }));
+    }
+    return (_jsx("div", { className: "dt-container", style: containerStyle, children: _jsxs("table", { className: tableClasses, children: [_jsx("thead", { children: _jsx(TableHeader, { visibleColumns: visibleColumns, selectable: selectable, rowActions: rowActions, data: data, selectedRows: selectedRows, handleSelectAll: handleSelectAll, sortConfig: sortConfig, handleSort: handleSort, headerRenderer: headerRenderer, multiRowHeader: multiRowHeader }) }), _jsx("tbody", { children: _jsx(TableBody, { sortedData: sortedData, visibleColumns: visibleColumns, emptyMessage: emptyMessage, selectable: selectable, rowActions: rowActions, selectedRows: selectedRows, handleSelectRow: handleSelectRow, handleRowClick: handleRowClick, handleCellClick: handleCellClick, rowClassName: rowClassName, rowKey: rowKey, rowsPerItem: rowsPerItem, cellRenderer: cellRenderer }) })] }) }));
+};
+export default DataTable;