@ramesesinc/platform-core 0.1.0

package/dist/components/table/DataTable.tsx

@@ -0,0 +1,572 @@
+import React, { memo, ReactNode, useMemo } from "react";
+import { RowProvider } from "../../core/RowContext";
+import { render } from "../../lib/utils/ExprUtil";
+import { useTableContext } from "./TableContext";
+
+// import "./DataTable.css";
+
+// ============================================================================
+// TYPE DEFINITIONS  (unchanged from original)
+// ============================================================================
+
+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 {
+  // When used INSIDE TableProvider these can be omitted; the context drives them.
+  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;
+}
+
+interface SortConfig {
+  key: string | null;
+  direction: "asc" | "desc" | null;
+}
+
+// ============================================================================
+// HEADER sub-component – pure, only re-renders when columns change
+// ============================================================================
+
+interface TableHeaderProps {
+  visibleColumns: ColumnDefinition[];
+  selectable: boolean;
+  rowActions?: (row: any, rowIndex: number) => React.ReactNode;
+  data: any[];
+  selectedRows: string[];
+  handleSelectAll: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  sortConfig: SortConfig;
+  handleSort: (columnId: string, sortable?: boolean) => void;
+  headerRenderer?: (column: ColumnDefinition) => React.ReactNode;
+  multiRowHeader?: ColumnDefinition[][];
+}
+
+const TableHeader = memo(
+  ({
+    visibleColumns,
+    selectable,
+    rowActions,
+    data,
+    selectedRows,
+    handleSelectAll,
+    sortConfig,
+    handleSort,
+    headerRenderer,
+    multiRowHeader,
+  }: TableHeaderProps) => {
+    const getColumnKey = (column: ColumnDefinition, index: number): string => column.id || column.expr || `col-${index}`;
+
+    const getColumnTitle = (column: ColumnDefinition): React.ReactNode => column.title || column.id || "";
+
+    const renderHeader = (column: ColumnDefinition) => {
+      if (headerRenderer) return headerRenderer(column);
+      const title = getColumnTitle(column);
+      if (!title) return null;
+      return (
+        <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)}
+        >
+          {title}
+          {column.sortable && column.id && sortConfig.key === column.id && (
+            <span style={{ fontSize: "10px", color: "#3b82f6" }}>{sortConfig.direction === "asc" ? "▲" : "▼"}</span>
+          )}
+        </div>
+      );
+    };
+
+    if (multiRowHeader && multiRowHeader.length > 0) {
+      return (
+        <>
+          {multiRowHeader.map((headerRow, rowIndex) => (
+            <tr key={`header-row-${rowIndex}`}>
+              {selectable && rowIndex === 0 && (
+                <th className="dt-checkbox-cell" rowSpan={multiRowHeader.length}>
+                  <input type="checkbox" onChange={handleSelectAll} checked={data.length > 0 && selectedRows.length === data.length} />
+                </th>
+              )}
+              {headerRow.map((column, colIndex) => (
+                <th
+                  key={getColumnKey(column, colIndex)}
+                  style={{ width: column.width, textAlign: column.align || "left" }}
+                  colSpan={column.colspan}
+                  rowSpan={column.rowspan}
+                >
+                  {renderHeader(column)}
+                </th>
+              ))}
+              {rowActions && rowIndex === 0 && (
+                <th className="dt-actions-cell" rowSpan={multiRowHeader.length}>
+                  Actions
+                </th>
+              )}
+            </tr>
+          ))}
+        </>
+      );
+    }
+
+    // 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) => col.headerRow ?? 0), 0);
+      const totalHeaderRows = maxHeaderRow + 1;
+      const headerRows: JSX.Element[] = [];
+
+      for (let rowIdx = 0; rowIdx <= maxHeaderRow; rowIdx++) {
+        const colsInRow = visibleColumns.filter((col) => {
+          if (col.subrow && col.subrow > 0) return false;
+          return (col.headerRow ?? 0) === rowIdx;
+        });
+        if (colsInRow.length === 0) continue;
+
+        headerRows.push(
+          <tr key={`header-row-${rowIdx}`}>
+            {selectable && rowIdx === 0 && (
+              <th className="dt-checkbox-cell" rowSpan={totalHeaderRows}>
+                <input type="checkbox" onChange={handleSelectAll} checked={data.length > 0 && selectedRows.length === data.length} />
+              </th>
+            )}
+            {colsInRow.map((column, index) => (
+              <th
+                key={getColumnKey(column, index)}
+                style={{
+                  width: column.width,
+                  textAlign: column.align || (column.colspan ? "center" : "left"),
+                }}
+                rowSpan={column.rowspan || 1}
+                colSpan={column.colspan || 1}
+                className={column.sortable ? "sortable" : ""}
+              >
+                {renderHeader(column)}
+              </th>
+            ))}
+            {rowActions && rowIdx === 0 && (
+              <th className="dt-actions-cell" rowSpan={totalHeaderRows}>
+                Actions
+              </th>
+            )}
+          </tr>,
+        );
+      }
+      return <>{headerRows}</>;
+    }
+
+    // Simple single-row header
+    return (
+      <tr>
+        {selectable && (
+          <th className="dt-checkbox-cell">
+            <input type="checkbox" onChange={handleSelectAll} checked={data.length > 0 && selectedRows.length === data.length} />
+          </th>
+        )}
+        {visibleColumns.map((column, index) => {
+          if (column.subrow && column.subrow > 0) return null;
+          return (
+            <th
+              key={getColumnKey(column, index)}
+              style={{ width: column.width, textAlign: column.align || "left" }}
+              className={column.sortable ? "sortable" : ""}
+            >
+              {renderHeader(column)}
+            </th>
+          );
+        })}
+        {rowActions && <th className="dt-actions-cell">Actions</th>}
+      </tr>
+    );
+  },
+);
+
+// ============================================================================
+// BODY sub-component – pure, only re-renders when rows change
+// ============================================================================
+
+interface TableBodyProps {
+  sortedData: any[];
+  visibleColumns: ColumnDefinition[];
+  emptyMessage: string;
+  selectable: boolean;
+  rowActions?: (row: any, rowIndex: number) => React.ReactNode;
+  selectedRows: string[];
+  handleSelectRow: (row: any) => void;
+  handleRowClick: (row: any, rowIndex: number) => void;
+  handleCellClick: (e: React.MouseEvent, value: any, row: any, column: ColumnDefinition, rowIndex: number, colIndex: number) => void;
+  rowClassName?: (row: any, rowIndex: number) => string;
+  rowKey: string;
+  rowsPerItem: number;
+  cellRenderer?: (value: any, row: any, column: ColumnDefinition) => React.ReactNode;
+}
+
+const TableBody = memo(
+  ({
+    sortedData,
+    visibleColumns,
+    emptyMessage,
+    selectable,
+    rowActions,
+    selectedRows,
+    handleSelectRow,
+    handleRowClick,
+    handleCellClick,
+    rowClassName,
+    rowKey,
+    rowsPerItem,
+    cellRenderer,
+  }: TableBodyProps) => {
+    const generateKey = () => `RP-${Math.random().toString(36).slice(2)}`;
+    const getNestedValue = (obj: any, path?: string): any => {
+      if (!path) return null;
+      return path.split(".").reduce((acc, part) => acc && acc[part], obj);
+    };
+
+    const getRowKey = (row: any): string => row[rowKey] || JSON.stringify(row);
+    const isRowSelected = (row: any): boolean => selectedRows.includes(getRowKey(row));
+    const getColumnKey = (column: ColumnDefinition, index: number): string => 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: any, datatype = "string", row: any): string => {
+      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: any, column: ColumnDefinition, rowIndex: number) => {
+      if (column.expr) {
+        const rendered = render(column.expr, row);
+        if (column.render) return column.render(rendered, row, rowIndex);
+        return <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 (
+        <tr>
+          <td colSpan={visibleColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} style={{ textAlign: "center", padding: "24px" }}>
+            {emptyMessage}
+          </td>
+        </tr>
+      );
+    }
+
+    return (
+      <>
+        {sortedData.map((row, itemIndex) => {
+          const isSelected = isRowSelected(row);
+          const customRowClass = rowClassName ? rowClassName(row, itemIndex) : "";
+          const rows: ReactNode[] = [];
+
+          for (let subrowIndex = 0; subrowIndex < rowsPerItem; subrowIndex++) {
+            const rowClasses = [isSelected && "dt-selected", customRowClass].filter(Boolean).join(" ");
+
+            rows.push(
+              <RowProvider key={generateKey()} data={row}>
+                <tr key={`${getRowKey(row)}-subrow-${subrowIndex}`} className={rowClasses} onClick={() => handleRowClick(row, itemIndex)}>
+                  {selectable && subrowIndex === 0 && (
+                    <td className="dt-checkbox-cell" rowSpan={rowsPerItem}>
+                      <input type="checkbox" checked={isSelected} onChange={() => handleSelectRow(row)} onClick={(e) => e.stopPropagation()} />
+                    </td>
+                  )}
+                  {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 (
+                      <td
+                        key={getColumnKey(column, colIndex)}
+                        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)}
+                      >
+                        {renderCellContent(row, column, itemIndex)}
+                      </td>
+                    );
+                  })}
+                  {rowActions && subrowIndex === 0 && (
+                    <td className="dt-actions-cell" rowSpan={rowsPerItem}>
+                      {rowActions(row, itemIndex)}
+                    </td>
+                  )}
+                </tr>
+              </RowProvider>,
+            );
+          }
+          return rows;
+        })}
+      </>
+    );
+  },
+);
+
+// ============================================================================
+// DATATABLE COMPONENT
+// ============================================================================
+
+export const DataTable: React.FC<DataTableProps> = ({
+  // 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,
+}) => {
+  // Try to consume context; if not inside a provider, ctx will be null.
+  let ctxColumns: ColumnDefinition[] | undefined;
+  let ctxRows: any[] | undefined;
+  let ctxLoading: boolean | undefined;
+
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const ctx = useTableContext();
+    ctxColumns = ctx.columns;
+    ctxRows = ctx.rows;
+    ctxLoading = ctx.loading;
+  } catch {
+    // Not inside TableProvider – use props directly
+  }
+
+  // Context wins over direct props
+  const data: any[] = ctxRows ?? propData ?? [];
+  const columns: ColumnDefinition[] = propColumns ?? ctxColumns ?? [];
+  const loading = ctxLoading ?? propLoading;
+
+  // ---- Sort state ----
+  const [sortConfig, setSortConfig] = React.useState<SortConfig>({
+    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: any, path: string): any => 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: any, rowIndex: number) => onRowClick?.(row, rowIndex);
+
+  const handleCellClick = (e: React.MouseEvent, value: any, row: any, column: ColumnDefinition, rowIndex: number, colIndex: number) => {
+    e.stopPropagation();
+    onCellClick?.(value, row, column, rowIndex, colIndex);
+  };
+
+  const getRowKey = (row: any): string => row[rowKey] || JSON.stringify(row);
+
+  const handleSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!onSelectionChange) return;
+    if (e.target.checked) {
+      onSelectionChange(data.map((row) => getRowKey(row)));
+    } else {
+      onSelectionChange([]);
+    }
+  };
+
+  const handleSelectRow = (row: any) => {
+    if (!onSelectionChange) return;
+    const key = getRowKey(row);
+    if (selectedRows.includes(key)) {
+      onSelectionChange(selectedRows.filter((k) => k !== key));
+    } else {
+      onSelectionChange([...selectedRows, key]);
+    }
+  };
+
+  const handleSort = (columnId: string, sortable?: boolean) => {
+    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: React.CSSProperties = {};
+  if (maxHeight) {
+    containerStyle.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+    containerStyle.overflowY = "auto";
+  }
+
+  // ---- Render ----
+  if (loading) {
+    return (
+      <div className="dt-loading">
+        <div className="dt-spinner"></div>
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="dt-container" style={containerStyle}>
+      <table className={tableClasses}>
+        <thead>
+          {/* TableHeader only re-renders when columns or sort config changes */}
+          <TableHeader
+            visibleColumns={visibleColumns}
+            selectable={selectable}
+            rowActions={rowActions}
+            data={data}
+            selectedRows={selectedRows}
+            handleSelectAll={handleSelectAll}
+            sortConfig={sortConfig}
+            handleSort={handleSort}
+            headerRenderer={headerRenderer}
+            multiRowHeader={multiRowHeader}
+          />
+        </thead>
+        <tbody>
+          {/* TableBody only re-renders when rows change */}
+          <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}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default DataTable;

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

@@ -0,0 +1,42 @@
+/**
+ * ListHandler - Functional style implementation for managing data fetching,
+ * pagination, filtering, and sorting for DataList, DataTable, or any list-like components.
+ */
+export interface ListHandlerConfig {
+    tenant: string;
+    module: string;
+    api: string;
+    params?: Record<string, any>;
+    cols: string[];
+    rowsPerPage?: number;
+    disableTotalCount?: boolean;
+    useCursorPagination?: boolean;
+}
+export type ListActionHandler = {
+    getData: () => any[];
+    load: () => Promise<void>;
+    reset: () => Promise<void>;
+    moveNextPage: () => Promise<void>;
+    movePrevPage: () => Promise<void>;
+    moveFirstPage: () => Promise<void>;
+    moveLastPage: () => Promise<void>;
+    moveToPage: (page: number) => Promise<void>;
+    setFilter: (filter: Record<string, any>) => Promise<void>;
+    resetFilter: () => Promise<void>;
+    doSearch: (text: string) => Promise<void>;
+    sortAsc: (column: string) => Promise<void>;
+    sortDesc: (column: string) => Promise<void>;
+    setRowsPerPage: (rows: number) => Promise<void>;
+    hasNextPage: () => boolean;
+    hasPrevPage: () => boolean;
+    getTotalPageCount: () => number;
+    getTotalRecordCount: () => number;
+    getCurrentPage: () => number;
+    getCurrentSortedColumn: () => string | null;
+    getCurrentSortDirection: () => "asc" | "desc" | null;
+    getRowsPerPage: () => number;
+    getSearchText: () => string;
+    getCustomFilter: () => Record<string, any>;
+};
+export declare const ListHandler: (config: ListHandlerConfig) => ListActionHandler;
+export default ListHandler;