trotl-table 1.0.2 → 1.0.4

package/README.md

@@ -0,0 +1,126 @@
+# trotl-table
+
+A simple, flexible **Table UI** for React — with rows drag‑and‑drop, context menus, and persistence.
+
+---
+**DEMO:** [https://table.linijart.eu/](https://table.linijart.eu/)
+---
+
+## 🚀 Installation
+
+```bash
+npm install trotl-table
+
+
+⚡ Usage
+
+import React, { useState } from "react";
+import { Table } from "trotl-table";
+import "./Table.css";
+
+const columns = [
+  { header: "ID", accessor: "id" },
+  { header: "Name", accessor: "name" },
+  { header: "Email", accessor: "email" }
+];
+
+const data = [
+  { id: "1", name: "Alice", email: "alice@example.com" },
+  { id: "2", name: "Bob", email: "bob@example.com" }
+];
+
+export default function Demo() {
+  const [rows] = useState(data);
+
+  const deleteCallback = async (row) => {
+    // replace with real API call
+    await new Promise((r) => setTimeout(r, 200));
+    return { success: true };
+  };
+
+  const editCallback = (row) => {
+    console.log("edit", row);
+  };
+
+  const viewCallback = (row) => {
+    console.log("view", row);
+  };
+
+  return (
+    <Table
+      tableId="demo-grouped"
+      columns={columns}
+      data={data}
+      isGrouped={false}
+      groupKey="groupId"
+      extraSearchTerm=""
+      rowHeight={40}
+      groupHeaderHeight={40}
+      showKey={true}
+      enableDragRow={true}
+      selectedRowsCallback={(arr) => console.log("selected", arr)}
+      deleteCallback={deleteCallback}
+      editCallback={editCallback}
+      viewCallback={viewCallback}
+      buttons={["view", "edit", "delete"]}
+    />
+  );
+}
+
+
+🛠 Features
+- Row selection with context‑aware state
+- Sorting (asc/desc cycle per column)
+- Grouped rows with expandable headers
+- Search + highlight across all columns
+- Drag‑and‑drop rows with auto‑scroll support
+- Callbacks for view, edit, delete actions
+- Context API for global table management
+- Groupe tables
+
+📚 API Reference
+<Table /> Props
+- tableId: unique string ID for the table
+- columns: array of { header, accessor }
+- data: array of row objects
+- isGrouped: enable grouped mode (true/false)
+- groupKey: key to group rows by
+- extraSearchTerm: string to filter + highlight rows
+- rowHeight: row height in px
+- groupHeaderHeight: group header height in px
+- showKey: show row key (true/false)
+- enableDragRow: enable drag‑and‑drop (true/false)
+- selectedRowsCallback: callback with selected row IDs
+- editCallback: callback when editing a row
+- viewCallback: callback when viewing a row
+- deleteCallback: async callback for deleting a row
+- buttons: array of action buttons to show
+
+🌟 Context Hooks
+Use useTable to access global state:
+
+import { useTable } from "trotltable";
+
+function Toolbar({ tableId }) {
+  const { selectedRows, clearSelection } = useTable();
+
+  return (
+    <div>
+      <span>Selected: {selectedRows[tableId]?.length || 0}</span>
+      <button onClick={() => clearSelection(tableId)}>Clear</button>
+    </div>
+  );
+}
+
+🎨 Styling
+
+.highlight {
+  background-color: yellow;
+  font-weight: bold;
+}
+
+
+🏆 License
+MIT — free to use, modify, and share.
+---
+

package/dist/index.cjs.js

@@ -9832,8 +9832,10 @@ function Table({
     sorting,
     setSort
   } = ctx;
-  const tableSelected = selectedRows[tableId] || [];
-  const tableSort = sorting[tableId] || null;
+  const tableSelected = React.useMemo(() => selectedRows[tableId] || [], [selectedRows, tableId]);
+  console.log(extraSearchTerm);
+  const [localData, setLocalData] = React.useState(data);
+  React.useEffect(() => setLocalData(data), [data]);
   const listRef = React.useRef(null);
   React.useEffect(() => {
     registerTable(tableId, {
@@ -9848,39 +9850,84 @@ function Table({
     });
   }, [data.length]);
   const normalizedGroups = React.useMemo(() => {
-    return normalizeData(isGrouped ? data : [], isGrouped ? [] : data);
-  }, [data, isGrouped]);
+    return normalizeData(isGrouped ? localData : [], isGrouped ? [] : localData);
+  }, [localData, isGrouped]);
+  const filterRows = React.useCallback(rows => {
+    if (!extraSearchTerm) return rows;
+    const query = extraSearchTerm.toLowerCase();
+    return rows.filter(row => columns.some(col => {
+      const val = row[col.accessor];
+      if (val == null) return false;
+      return String(val).toLowerCase().includes(query);
+    }));
+  }, [extraSearchTerm, columns]);
+
+  // Natural-ish comparator: handles nulls, numbers, strings, ISO dates
+  const compare = (x, y, dir = "asc") => {
+    const nullCmp = () => {
+      if (x == null && y == null) return 0;
+      if (x == null) return 1; // nulls last
+      if (y == null) return -1;
+      return null;
+    };
+    const n = nullCmp();
+    if (n !== null) return n;
+
+    // Try numeric first
+    const nx = typeof x === "number" ? x : Number.isFinite(Number(x)) ? Number(x) : null;
+    const ny = typeof y === "number" ? y : Number.isFinite(Number(y)) ? Number(y) : null;
+    if (nx !== null && ny !== null) {
+      return dir === "asc" ? nx - ny : ny - nx;
+    }
+
+    // Try date (ISO or parseable strings)
+    const dx = typeof x === "string" ? Date.parse(x) : NaN;
+    const dy = typeof y === "string" ? Date.parse(y) : NaN;
+    if (!Number.isNaN(dx) && !Number.isNaN(dy)) {
+      return dir === "asc" ? dx - dy : dy - dx;
+    }
+
+    // Fallback string compare
+    const sx = String(x).toLowerCase();
+    const sy = String(y).toLowerCase();
+    if (sx < sy) return dir === "asc" ? -1 : 1;
+    if (sx > sy) return dir === "asc" ? 1 : -1;
+    return 0;
+  };
   const sortedGroupedData = React.useMemo(() => {
-    if (!tableSort?.column) return normalizedGroups;
-    const sortKey = tableSort.column;
-    const direction = tableSort.direction;
-    const sortFn = rows => {
+    const sortKey = sorting[tableId]?.column;
+    const direction = sorting[tableId]?.direction || "asc";
+    const sortRows = rows => {
       const arr = [...rows];
-      arr.sort((a, b) => {
-        const x = a[sortKey];
-        const y = b[sortKey];
-        if (x == null) return 1;
-        if (y == null) return -1;
-        const ax = typeof x === "string" ? x.toLowerCase() : x;
-        const ay = typeof y === "string" ? y.toLowerCase() : y;
-        if (ax < ay) return direction === "asc" ? -1 : 1;
-        if (ax > ay) return direction === "asc" ? 1 : -1;
-        return 0;
-      });
-      return arr;
+      if (!sortKey) return filterRows(arr); // fallback to drag order
+      arr.sort((a, b) => compare(a?.[sortKey], b?.[sortKey], direction));
+      return filterRows(arr);
     };
     return normalizedGroups.map(g => ({
       ...g,
-      rows: sortFn(g.rows)
+      rows: sortRows(g.rows || [])
     }));
-  }, [normalizedGroups, tableSort]);
+  }, [normalizedGroups, sorting, tableId, filterRows]);
   const [expandedGroups, setExpandedGroups] = React.useState({});
   const toggleGroup = gid => {
-    setExpandedGroups(p => ({
-      ...p,
-      [gid]: !p[gid]
+    setExpandedGroups(prev => ({
+      ...prev,
+      [gid]: !Boolean(prev[gid])
     }));
   };
+  React.useEffect(() => {
+    // Pre-populate expansion state for all groups
+    setExpandedGroups(prev => {
+      const next = {
+        ...prev
+      };
+      for (const g of normalizedGroups) {
+        const gid = g[groupKey] ?? g.groupId ?? g.groupName;
+        if (!(gid in next)) next[gid] = true; // default expanded
+      }
+      return next;
+    });
+  }, [normalizedGroups, groupKey]);
   const groupRowsById = React.useMemo(() => {
     const map = {};
     for (const g of sortedGroupedData) {
@@ -9892,7 +9939,8 @@ function Table({
   const [tableDataFlat, setTableDataFlat] = React.useState([]);
   const flattened = React.useMemo(() => {
     const items = [];
-    sortedGroupedData.forEach(g => {
+    // Use the sortedGroupedData here so the flattened list reflects current sorting and filtering
+    for (const g of sortedGroupedData) {
       const gid = g[groupKey] ?? g.groupId ?? g.groupName;
       const expanded = expandedGroups[gid] ?? true;
       if (isGrouped) {
@@ -9900,22 +9948,28 @@ function Table({
           type: "group",
           groupId: gid,
           groupName: g.groupName,
-          rowCount: g.rows.length,
+          rowCount: (g.rows || []).length,
           expanded
         });
       }
       if (!isGrouped || expanded) {
-        g.rows.forEach(row => items.push({
-          type: "row",
-          groupId: gid,
-          row
-        }));
+        for (const row of g.rows) {
+          items.push({
+            type: "row",
+            groupId: gid,
+            row
+          });
+        }
       }
-    });
+    }
     return items;
   }, [sortedGroupedData, expandedGroups, isGrouped, groupKey]);
-  React.useEffect(() => setTableDataFlat(flattened), [flattened]);
-  React.useEffect(() => selectedRowsCallback(tableSelected), [tableSelected]);
+  React.useEffect(() => {
+    setTableDataFlat(flattened);
+  }, [flattened]);
+
+  // useEffect(() => setTableDataFlat(flattened), [flattened]);
+  React.useEffect(() => selectedRowsCallback(tableSelected), [tableSelected, selectedRowsCallback]);
 
   // DELETE
   const [showConfirm, setShowConfirm] = React.useState(false);
@@ -9924,19 +9978,25 @@ function Table({
     if (!pendingDelete) return;
     if (deleteCallback) {
       const res = await deleteCallback(pendingDelete);
-      if (res?.success) {
-        setTableDataFlat(prev => prev.filter(i => !(i.type === "row" && i.row.id === pendingDelete.id)));
-        refreshTrigger();
-      }
-    } else {
-      setTableDataFlat(prev => prev.filter(i => !(i.type === "row" && i.row.id === pendingDelete.id)));
+      if (!res?.success) return;
     }
+    setLocalData(prev => {
+      if (isGrouped) {
+        return prev.map(g => ({
+          ...g,
+          rows: (g.rows || []).filter(r => r.id !== pendingDelete.id)
+        }));
+      } else {
+        return (prev || []).filter(r => r.id !== pendingDelete.id);
+      }
+    });
+    refreshTrigger?.();
     setShowConfirm(false);
     setPendingDelete(null);
   };
 
   // RENDER CELL
-  const highlight = text => {
+  const highlight = React.useCallback(text => {
     if (!extraSearchTerm || typeof text !== "string") return text;
     const lower = text.toLowerCase();
     const query = extraSearchTerm.toLowerCase();
@@ -9945,30 +10005,63 @@ function Table({
     return /*#__PURE__*/React.createElement(React.Fragment, null, text.slice(0, idx), /*#__PURE__*/React.createElement("span", {
       className: "highlight"
     }, text.slice(idx, idx + query.length)), text.slice(idx + query.length));
-  };
-  const renderCell = v => {
-    if (Array.isArray(v)) {
-      return v.map((x, i) => /*#__PURE__*/React.createElement("span", {
-        key: i
-      }, highlight(String(x)), i < v.length - 1 ? ", " : ""));
-    }
-    if (v && typeof v === "object") return JSON.stringify(v);
+  }, [extraSearchTerm]);
+  const renderCell = React.useCallback((v, accessor) => {
+    if (accessor === "deadlineISO") {
+      return v ? new Date(v).toLocaleString("sl-SI", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      }) : "-";
+    }
+    // existing highlight logic for other fields
     return highlight(String(v));
-  };
+  }, [highlight]);
   const showView = buttons.includes("view");
   const showEdit = buttons.includes("edit");
   const showDelete = buttons.includes("delete");
   const showActions = showView || showEdit || showDelete;
 
   // MOVE ROW
-  const moveRow = (fromIndex, toIndex) => {
-    setTableDataFlat(prev => {
-      const newData = [...prev];
-      const [removed] = newData.splice(fromIndex, 1);
-      newData.splice(toIndex, 0, removed);
-      return newData;
+  const moveRow = React.useCallback((fromIndex, toIndex) => {
+    const from = tableDataFlat[fromIndex];
+    const to = tableDataFlat[toIndex];
+    if (!from || !to || from.type !== "row" || to.type !== "row") return;
+
+    // Only reorder within the same group to keep grouping consistent
+    if (isGrouped && from.groupId !== to.groupId) return;
+    setLocalData(prev => {
+      if (isGrouped) {
+        // Reorder within the target group
+        const gid = from.groupId;
+        return prev.map(group => {
+          const groupId = group[groupKey] ?? group.groupId ?? group.groupName;
+          if (groupId !== gid) return group;
+          const rows = [...group.rows];
+          const fromPos = rows.findIndex(r => r.id === from.row.id);
+          const toPos = rows.findIndex(r => r.id === to.row.id);
+          if (fromPos === -1 || toPos === -1) return group;
+          const [moved] = rows.splice(fromPos, 1);
+          rows.splice(toPos, 0, moved);
+          return {
+            ...group,
+            rows
+          };
+        });
+      } else {
+        // Ungrouped: reorder the flat list
+        const arr = Array.isArray(prev) ? [...prev] : [];
+        const fromPos = arr.findIndex(r => r.id === from.row.id);
+        const toPos = arr.findIndex(r => r.id === to.row.id);
+        if (fromPos === -1 || toPos === -1) return prev;
+        const [moved] = arr.splice(fromPos, 1);
+        arr.splice(toPos, 0, moved);
+        return arr;
+      }
     });
-  };
+  }, [tableDataFlat, isGrouped, groupKey]);
 
   // ROW RENDERER
   const rowRenderer = React.useCallback(({
@@ -10026,13 +10119,25 @@ function Table({
     }, visualIndex), columns.map((col, i) => /*#__PURE__*/React.createElement("div", {
       key: i,
       className: "table-cell"
-    }, renderCell(row[col.accessor]))), showActions && /*#__PURE__*/React.createElement("div", {
+    }, renderCell(row[col.accessor], col.accessor))), showActions && /*#__PURE__*/React.createElement("div", {
       className: "table-cell action-cell"
     }, showView && /*#__PURE__*/React.createElement("button", {
+      className: "action-btn-table",
+      style: {
+        background: "#646cffaa"
+      },
       onClick: () => viewCallback(row)
     }, "View"), showEdit && /*#__PURE__*/React.createElement("button", {
+      className: "action-btn-table",
+      style: {
+        background: "#4caf50"
+      },
       onClick: () => editCallback(row)
     }, "Edit"), showDelete && /*#__PURE__*/React.createElement("button", {
+      className: "action-btn-table",
+      style: {
+        background: "#f44336"
+      },
       onClick: e => {
         e.stopPropagation();
         setPendingDelete(row);
@@ -10050,7 +10155,7 @@ function Table({
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, tableSelected, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, tableId, viewCallback, editCallback, enableDragRow]);
+  }, [tableDataFlat, columns, tableSelected, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, tableId, viewCallback, editCallback, enableDragRow, moveRow]);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
@@ -10090,14 +10195,14 @@ function Table({
     style: {
       cursor: "pointer"
     }
-  }, col.header, tableSort?.column === col.accessor && (tableSort.direction === "asc" ? " ↑" : " ↓"))), showActions && /*#__PURE__*/React.createElement("div", {
+  }, col.header, sorting[tableId]?.column === col.accessor && (sorting[tableId].direction === "asc" ? " ↑" : " ↓"))), showActions && /*#__PURE__*/React.createElement("div", {
     className: "table-cell action-cell"
   }, "Action"))), /*#__PURE__*/React.createElement("div", {
     className: "main-table",
     ref: listRef
-  }, tableDataFlat.filter(i => i.type === "row").length === 0 ? /*#__PURE__*/React.createElement("div", {
+  }, tableDataFlat.length === 0 ? /*#__PURE__*/React.createElement("div", {
     className: "table-empty"
-  }, "No rows") : /*#__PURE__*/React.createElement(AutoSizer, null, ({
+  }, "No items") : /*#__PURE__*/React.createElement(AutoSizer, null, ({
     height,
     width
   }) => /*#__PURE__*/React.createElement(List, {