trotl-table 1.0.5 → 1.0.7

package/README.md

@@ -15,22 +15,6 @@ yarn add trotl-table
 
 
 ⚡ Quick Start
-Wrap your app with the provider:
-
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-import { TableProvider } from "trotl-table";
-
-createRoot(document.getElementById("root")).render(
-  <StrictMode>
-    <TableProvider>
-      <App />
-    </TableProvider>
-  </StrictMode>
-);
-
-Render a table:
 
 import React, { useState } from "react";
 import { Table } from "trotl-table";

package/dist/index.cjs.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var reactDnd = require('react-dnd');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
@@ -23,144 +25,6 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const TableContext = /*#__PURE__*/React.createContext(null);
-const useTable = () => React.useContext(TableContext);
-const TableProvider = ({
-  children
-}) => {
-  // Stores meta per tableId
-  const [tables, setTables] = React.useState({});
-
-  // Store selected rows per table
-  const [selectedRows, setSelectedRows] = React.useState({});
-
-  // Store sorting per table
-  const [sorting, setSorting] = React.useState({});
-
-  // -----------------------------
-  // Stable functions (useCallback)
-  // -----------------------------
-
-  const registerTable = React.useCallback((tableId, meta = {}) => {
-    setTables(prev => ({
-      ...prev,
-      [tableId]: {
-        ...(prev[tableId] || {}),
-        ...meta
-      }
-    }));
-  }, []);
-  const unregisterTable = React.useCallback(tableId => {
-    setTables(prev => {
-      const newTables = {
-        ...prev
-      };
-      delete newTables[tableId];
-      return newTables;
-    });
-    setSelectedRows(prev => {
-      const x = {
-        ...prev
-      };
-      delete x[tableId];
-      return x;
-    });
-    setSorting(prev => {
-      const x = {
-        ...prev
-      };
-      delete x[tableId];
-      return x;
-    });
-  }, []);
-  const updateTableMeta = React.useCallback((tableId, patch = {}) => {
-    setTables(prev => ({
-      ...prev,
-      [tableId]: {
-        ...(prev[tableId] || {}),
-        ...patch
-      }
-    }));
-  }, []);
-
-  // -----------------------------
-  // Manage Selected Rows
-  // -----------------------------
-
-  const toggleRowSelection = React.useCallback((tableId, rowId) => {
-    setSelectedRows(prev => {
-      const rowSet = new Set(prev[tableId] || []);
-      rowSet.has(rowId) ? rowSet.delete(rowId) : rowSet.add(rowId);
-      return {
-        ...prev,
-        [tableId]: Array.from(rowSet)
-      };
-    });
-  }, []);
-  const clearSelection = React.useCallback(tableId => {
-    setSelectedRows(prev => ({
-      ...prev,
-      [tableId]: []
-    }));
-  }, []);
-
-  // -----------------------------
-  // Sorting
-  // -----------------------------
-
-  const setSort = React.useCallback((tableId, column) => {
-    setSorting(prev => {
-      const current = prev[tableId];
-
-      // cycling: null → asc → desc → null
-      if (!current || current.column !== column) {
-        return {
-          ...prev,
-          [tableId]: {
-            column,
-            direction: "asc"
-          }
-        };
-      }
-      if (current.direction === "asc") {
-        return {
-          ...prev,
-          [tableId]: {
-            column,
-            direction: "desc"
-          }
-        };
-      }
-
-      // if direction === "desc" → remove sorting
-      return {
-        ...prev,
-        [tableId]: null
-      };
-    });
-  }, []);
-
-  // ------------------------------------
-  // Memoized final context value
-  // ------------------------------------
-  const value = React.useMemo(() => {
-    return {
-      tables,
-      selectedRows,
-      sorting,
-      registerTable,
-      unregisterTable,
-      updateTableMeta,
-      toggleRowSelection,
-      clearSelection,
-      setSort
-    };
-  }, [tables, selectedRows, sorting, registerTable, unregisterTable, updateTableMeta, toggleRowSelection, clearSelection, setSort]);
-  return /*#__PURE__*/React.createElement(TableContext.Provider, {
-    value: value
-  }, children);
-};
-
 function _classCallCheck(a, n) {
   if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
 }
@@ -9821,34 +9685,30 @@ function Table({
   buttons = ["view", "edit", "delete"],
   enableDragRow = false // new prop
 }) {
-  const ctx = useTable();
-  const {
-    registerTable,
-    unregisterTable,
-    updateTableMeta,
-    selectedRows,
-    toggleRowSelection,
-    clearSelection,
-    sorting,
-    setSort
-  } = ctx;
-  const tableSelected = React.useMemo(() => selectedRows[tableId] || [], [selectedRows, tableId]);
+  // Local selection & sorting state (removed TableContext dependency)
+  const [selectedRows, setSelectedRows] = React.useState([]);
+  const [sorting, setSorting] = React.useState(null);
+  const toggleRowSelection = React.useCallback(rowId => {
+    setSelectedRows(prev => prev.includes(rowId) ? prev.filter(r => r !== rowId) : [...prev, rowId]);
+  }, []);
+  const clearSelection = React.useCallback(() => setSelectedRows([]), []);
+  const setSort = column => {
+    setSorting(prev => {
+      if (!prev || prev.column !== column) return {
+        column,
+        direction: "asc"
+      };
+      if (prev.direction === "asc") return {
+        column,
+        direction: "desc"
+      };
+      return null;
+    });
+  };
   console.log(extraSearchTerm);
   const [localData, setLocalData] = React.useState(data);
   React.useEffect(() => setLocalData(data), [data]);
   const listRef = React.useRef(null);
-  React.useEffect(() => {
-    registerTable(tableId, {
-      columns,
-      rowCount: data.length
-    });
-    return () => unregisterTable(tableId);
-  }, []);
-  React.useEffect(() => {
-    updateTableMeta(tableId, {
-      rowCount: data.length
-    });
-  }, [data.length]);
   const normalizedGroups = React.useMemo(() => {
     return normalizeData(isGrouped ? localData : [], isGrouped ? [] : localData);
   }, [localData, isGrouped]);
@@ -9895,8 +9755,8 @@ function Table({
     return 0;
   };
   const sortedGroupedData = React.useMemo(() => {
-    const sortKey = sorting[tableId]?.column;
-    const direction = sorting[tableId]?.direction || "asc";
+    const sortKey = sorting?.column;
+    const direction = sorting?.direction || "asc";
     const sortRows = rows => {
       const arr = [...rows];
       if (!sortKey) return filterRows(arr); // fallback to drag order
@@ -9907,7 +9767,7 @@ function Table({
       ...g,
       rows: sortRows(g.rows || [])
     }));
-  }, [normalizedGroups, sorting, tableId, filterRows]);
+  }, [normalizedGroups, sorting, filterRows]);
   const [expandedGroups, setExpandedGroups] = React.useState({});
   const toggleGroup = gid => {
     setExpandedGroups(prev => ({
@@ -9969,7 +9829,7 @@ function Table({
   }, [flattened]);
 
   // useEffect(() => setTableDataFlat(flattened), [flattened]);
-  React.useEffect(() => selectedRowsCallback(tableSelected), [tableSelected, selectedRowsCallback]);
+  React.useEffect(() => selectedRowsCallback(selectedRows), [selectedRows, selectedRowsCallback]);
 
   // DELETE
   const [showConfirm, setShowConfirm] = React.useState(false);
@@ -10074,7 +9934,7 @@ function Table({
     if (item.type === "group") {
       const gid = item.groupId;
       const rows = groupRowsById[gid] || [];
-      const allSelected = rows.length > 0 && rows.every(r => tableSelected.includes(r.id));
+      const allSelected = rows.length > 0 && rows.every(r => selectedRows.includes(r.id));
       return /*#__PURE__*/React.createElement("div", {
         key: key,
         style: style,
@@ -10112,8 +9972,8 @@ function Table({
       className: "table-cell checkbox-cell"
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
-      checked: tableSelected.includes(row.id),
-      onChange: () => toggleRowSelection(tableId, row.id)
+      checked: selectedRows.includes(row.id),
+      onChange: () => toggleRowSelection(row.id)
     })), showKey && /*#__PURE__*/React.createElement("div", {
       className: "table-cell key-cell"
     }, visualIndex), columns.map((col, i) => /*#__PURE__*/React.createElement("div", {
@@ -10155,7 +10015,7 @@ function Table({
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, tableSelected, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, tableId, viewCallback, editCallback, enableDragRow, moveRow]);
+  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, tableId, viewCallback, editCallback, enableDragRow, moveRow]);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
@@ -10177,13 +10037,13 @@ function Table({
     className: "table-cell checkbox-cell"
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
-    checked: tableDataFlat.filter(i => i.type === "row").length > 0 && tableSelected.length === tableDataFlat.filter(i => i.type === "row").length,
+    checked: tableDataFlat.filter(i => i.type === "row").length > 0 && selectedRows.length === tableDataFlat.filter(i => i.type === "row").length,
     onChange: e => {
       if (e.target.checked) {
-        clearSelection(tableId);
-        tableDataFlat.filter(i => i.type === "row").forEach(i => toggleRowSelection(tableId, i.row.id));
+        clearSelection();
+        tableDataFlat.filter(i => i.type === "row").forEach(i => toggleRowSelection(i.row.id));
       } else {
-        clearSelection(tableId);
+        clearSelection();
       }
     }
   })), showKey && /*#__PURE__*/React.createElement("div", {
@@ -10191,11 +10051,11 @@ function Table({
   }, "#"), columns.map((col, i) => /*#__PURE__*/React.createElement("div", {
     key: i,
     className: "table-cell",
-    onClick: () => setSort(tableId, col.accessor),
+    onClick: () => setSort(col.accessor),
     style: {
       cursor: "pointer"
     }
-  }, col.header, sorting[tableId]?.column === col.accessor && (sorting[tableId].direction === "asc" ? " ↑" : " ↓"))), showActions && /*#__PURE__*/React.createElement("div", {
+  }, col.header, sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"))), showActions && /*#__PURE__*/React.createElement("div", {
     className: "table-cell action-cell"
   }, "Action"))), /*#__PURE__*/React.createElement("div", {
     className: "main-table",
@@ -10224,8 +10084,9 @@ function Table({
   }, /*#__PURE__*/React.createElement("p", null, "Are you sure you want to delete ", /*#__PURE__*/React.createElement("strong", null, pendingDelete?.name || pendingDelete?.id), "?"))));
 }
 
+// src/index.js
+ // if you want named import
+
 exports.Table = Table;
-exports.TableContext = TableContext;
-exports.TableProvider = TableProvider;
-exports.useTable = useTable;
+exports.default = Table;
 //# sourceMappingURL=index.cjs.js.map