trotl-table 1.0.16 → 1.0.18

package/README.md

@@ -26,16 +26,23 @@ yarn add trotl-table
 
 ## Versions
 ```js
-1.0.9 => add search input
-1.0.9 => fix readme, whatever
-1.0.8 => fix readme
-1.0.7 => removed context (better for npm consumers)
-1.0.6 => ...
-1.0.5 => ...
-1.0.4 => fix sorting
-1.0.3 => ...
-1.0.2 => prepare for npm consumers
-1.0.1 => initial release
+1.0.17 => ...
+1.0.16 => update/fix when scroll
+1.0.15 => update add EmptyTableLoader
+1.0.14 => ...
+1.0.13 => ...
+1.0.12 => ...
+1.0.11 => ...
+1.0.10 => ...
+1.0.9  => fix readme, whatever
+1.0.8  => fix readme
+1.0.7  => removed context (better for npm consumers)
+1.0.6  => ...
+1.0.5  => ...
+1.0.4  => fix sorting
+1.0.3  => ...
+1.0.2  => prepare for npm consumers
+1.0.1  => initial release
 ```
 
 ## ⚡ Quick Start

package/dist/index.cjs.js

@@ -9733,8 +9733,38 @@ function TableInner({
   enableExternalRowDrop = false,
   onExternalRowDrop = () => {},
   useExternalDndContext = false,
-  customColumns = []
+  customColumns = [],
+  groupDefaultOpen = false,
+  t
 }) {
+  let translate;
+  if (t) {
+    translate = t;
+  } else {
+    translate = key => {
+      const translations = {
+        addNewColumn: "Add New Column",
+        add: "Add",
+        cancel: "Cancel",
+        editColumn: "Edit Column",
+        save: "Save",
+        title: "Title",
+        color: "Color",
+        collapsed: "Collapsed",
+        lang: "Language",
+        view: "View",
+        edit: "Edit",
+        delete: "Delete",
+        confirmDelete: "Confirm Delete",
+        yesDelete: "Yes, Delete",
+        areYouSureYouWantToDelete: "Are you sure you want to delete",
+        action: "Action",
+        DropHereToMoveIntoThisGroup: "Drop here to move into this group"
+      };
+      return translations[key] || key;
+    };
+  }
+
   // Local selection & sorting state (removed TableContext dependency)
   const [selectedRows, setSelectedRows] = React.useState([]);
   const [sorting, setSorting] = React.useState(null);
@@ -9884,11 +9914,11 @@ function TableInner({
       };
       for (const g of normalizedGroups) {
         const gid = g[groupKey] ?? g.groupId ?? g.groupName;
-        if (!(gid in next)) next[gid] = true; // default expanded
+        if (!(gid in next)) next[gid] = groupDefaultOpen; // use prop for initial state
       }
       return next;
     });
-  }, [normalizedGroups, groupKey]);
+  }, [normalizedGroups, groupKey, groupDefaultOpen]);
   const groupRowsById = React.useMemo(() => {
     const map = {};
     for (const g of sortedGroupedData) {
@@ -10003,14 +10033,23 @@ function TableInner({
   // RENDER CELL
   const highlight = React.useCallback(text => {
     // Use the actual searchTerm (from URL or prop) for highlighting
-    if (!searchTerm || typeof text !== "string") return text;
+    if (!searchTerm || typeof text !== "string") return /*#__PURE__*/React.createElement("span", {
+      title: text
+    }, text);
     const lower = text.toLowerCase();
     const query = searchTerm.toLowerCase();
     const idx = lower.indexOf(query);
-    if (idx === -1) return text;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, text.slice(0, idx), /*#__PURE__*/React.createElement("span", {
+    if (idx === -1) return /*#__PURE__*/React.createElement("span", {
+      title: text
+    }, text);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      title: text
+    }, text.slice(0, idx)), /*#__PURE__*/React.createElement("span", {
+      title: text,
       className: "highlight"
-    }, text.slice(idx, idx + query.length)), text.slice(idx + query.length));
+    }, text.slice(idx, idx + query.length)), /*#__PURE__*/React.createElement("span", {
+      title: text
+    }, text.slice(idx + query.length)));
   }, [searchTerm]);
   const renderCell = React.useCallback((v, accessor) => {
     if (accessor === "deadlineISO") {
@@ -10190,7 +10229,7 @@ function TableInner({
             style: {
               width: '100%'
             }
-          }, item.expanded ? "▾" : "▸", " ", item.groupName, " (0) \u2014 Drop here to move into this group"), columns.slice(1).map((_, i) => /*#__PURE__*/React.createElement("div", {
+          }, item.expanded ? "▾" : "▸", " ", translate(item.groupName), " (0) \u2014 ", translate("DropHereToMoveIntoThisGroup")), columns.slice(1).map((_, i) => /*#__PURE__*/React.createElement("div", {
             key: i,
             className: "table-cell"
           })), showActions && /*#__PURE__*/React.createElement("div", {
@@ -10224,7 +10263,7 @@ function TableInner({
         className: "table-cell key-cell"
       }), /*#__PURE__*/React.createElement("div", {
         className: "table-cell group-header"
-      }, item.expanded ? "▾" : "▸", " ", item.groupName, " (", item.rowCount, ")"), columns.slice(1).map((_, i) => /*#__PURE__*/React.createElement("div", {
+      }, item.expanded ? "▾" : "▸", " ", translate(item.groupName), " (", item.rowCount, ")"), columns.slice(1).map((_, i) => /*#__PURE__*/React.createElement("div", {
         key: i,
         className: "table-cell"
       })), showActions && /*#__PURE__*/React.createElement("div", {
@@ -10258,6 +10297,7 @@ function TableInner({
       checked: selectedRows.includes(row.id),
       onChange: () => toggleRowSelection(row.id)
     })), showKey && /*#__PURE__*/React.createElement("div", {
+      title: visualIndex,
       className: "table-cell key-cell"
     }, visualIndex), allColumns.map((col, i) => {
       let cellStyle = col.style ? {
@@ -10282,13 +10322,13 @@ function TableInner({
         background: "#646cffaa"
       },
       onClick: () => viewCallback(row)
-    }, "View"), showEdit && /*#__PURE__*/React.createElement("button", {
+    }, translate("view")), showEdit && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
       style: {
         background: "#4caf50"
       },
       onClick: () => editCallback(row)
-    }, "Edit"), showDelete && /*#__PURE__*/React.createElement("button", {
+    }, translate("edit")), showDelete && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
       style: {
         background: "#f44336"
@@ -10298,7 +10338,7 @@ function TableInner({
         setPendingDelete(row);
         setShowConfirm(true);
       }
-    }, "Delete")));
+    }, translate("delete"))));
     if (enableDragRow && item.type === "row") {
       return /*#__PURE__*/React.createElement(DraggableRow, {
         key: key,
@@ -10404,7 +10444,7 @@ function TableInner({
     }, col.isCustom ? col.header ?? '' : col.header, !col.isCustom && sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"));
   }), showActions && /*#__PURE__*/React.createElement("div", {
     className: "table-cell action-cell"
-  }, "Action"))), /*#__PURE__*/React.createElement("div", {
+  }, translate("action")))), /*#__PURE__*/React.createElement("div", {
     className: "main-table",
     ref: listRef
   }, tableDataFlat.length === 0 ? /*#__PURE__*/React.createElement(DotsLoading, null) : /*#__PURE__*/React.createElement(AutoSizer, null, ({
@@ -10419,14 +10459,14 @@ function TableInner({
     overscanRowCount: 8
   }))), /*#__PURE__*/React.createElement(Modal, {
     isOpen: showConfirm,
-    title: "Confirm delete",
+    title: translate("confirmDelete"),
     onConfirm: confirmDelete,
     onCancel: () => setShowConfirm(false),
-    confirmLabel: "Yes, delete",
-    cancelLabel: "Cancel",
+    confirmLabel: translate("yesDelete"),
+    cancelLabel: translate("cancel"),
     showCancel: true,
     showConfirm: true
-  }, /*#__PURE__*/React.createElement("p", null, "Are you sure you want to delete ", /*#__PURE__*/React.createElement("strong", null, pendingDelete?.name || pendingDelete?.id), "?")));
+  }, /*#__PURE__*/React.createElement("p", null, translate("areYouSureYouWantToDelete"), " ", /*#__PURE__*/React.createElement("strong", null, pendingDelete?.name || pendingDelete?.id), "?")));
   return tableMarkup;
 }
 function Table(props) {