trotl-table 1.0.50 → 1.0.52

package/README.md

@@ -122,6 +122,7 @@ export default function Demo() {
 - `showKey`: show row key (true/false)
 - `enableDragRow`: enable drag‑and‑drop (true/false)
 - `selectedRowsCallback`: callback with selected row IDs
+- `initialSelectedRows` (or `initaialSelectedRows`): initial selected row IDs (or row objects with `id`) for preselection
 - `editCallback`: callback when editing a row
 - `viewCallback`: callback when viewing a row
 - `deleteCallback`: async callback for deleting a row

package/dist/Table.cjs.js

@@ -9662,6 +9662,8 @@ function TableInner({
   enableDragRow = false,
   enableSearchUrlParam = false,
   enableMultiSelect = false,
+  initialSelectedRows = [],
+  initaialSelectedRows,
   enableExternalRowDrop = false,
   onExternalRowDrop = () => {},
   useExternalDndContext = false,
@@ -9724,11 +9726,40 @@ function TableInner({
   React.useEffect(() => {
     duplicateCallbackRef.current = duplicateCallback;
   }, [duplicateCallback]);
+  const resolvedInitialSelectedRows = React.useMemo(() => {
+    const source = Array.isArray(initialSelectedRows) ? initialSelectedRows : Array.isArray(initaialSelectedRows) ? initaialSelectedRows : [];
+    return [...new Set(source.map(item => item && typeof item === "object" ? item.id : item).filter(id => id != null))];
+  }, [initialSelectedRows, initaialSelectedRows]);
 
   // Local selection & sorting state (removed TableContext dependency)
-  const [selectedRows, setSelectedRows] = React.useState([]);
+  const [selectedRows, setSelectedRows] = React.useState(() => resolvedInitialSelectedRows);
   const [sorting, setSorting] = React.useState(null);
 
+  // Initialize localData early so it's available for the sync effect below
+  const [localData, setLocalData] = React.useState(data);
+  React.useEffect(() => setLocalData(data), [data]);
+
+  // Sync whenever initialSelectedRows changes (handles parent updates like clearing selection)
+  React.useEffect(() => {
+    // Validate: only apply IDs that exist in current data
+    const allRowIds = new Set();
+    const collectRowIds = rowsData => {
+      if (Array.isArray(rowsData)) {
+        rowsData.forEach(item => {
+          if (item.id) allRowIds.add(item.id);
+          if (Array.isArray(item.rows)) {
+            item.rows.forEach(r => allRowIds.add(r.id));
+          }
+        });
+      }
+    };
+    collectRowIds(isGrouped ? localData : localData);
+
+    // Filter to only valid IDs (handles async data loads + parent updates)
+    const validIds = resolvedInitialSelectedRows.filter(id => allRowIds.has(id) || allRowIds.size === 0);
+    setSelectedRows(validIds);
+  }, [resolvedInitialSelectedRows, localData, isGrouped]);
+
   // Option to read search param from URL
   const [searchTerm, setSearchTerm] = React.useState(extraSearchTerm);
   // Track current URL search so date filters rerun when params change
@@ -9797,8 +9828,6 @@ function TableInner({
 
   // console.log(extraSearchTerm)
 
-  const [localData, setLocalData] = React.useState(data);
-  React.useEffect(() => setLocalData(data), [data]);
   const listRef = React.useRef(null);
   const headerRef = React.useRef(null);
   const [headerPadRight, setHeaderPadRight] = React.useState(0);
@@ -10389,15 +10418,6 @@ function TableInner({
     key,
     style
   }) => {
-    // override virtualization's fixed width so that flex-based cells can
-    // expand/contract with the header. without this the header adjusts but
-    // rows keep the original pixel width from the first render, leading to
-    // the mismatched behaviour described by the user.
-    const fullStyle = {
-      ...style,
-      width: "100%",
-      boxSizing: "border-box"
-    };
     const item = tableDataFlat[index];
     if (!item) return null;
     if (item.type === "group") {
@@ -10430,7 +10450,7 @@ function TableInner({
             ref: ref,
             key: key,
             style: {
-              ...fullStyle,
+              ...style,
               background: '#f6f6fa',
               border: '2px dashed #bbb',
               textAlign: 'center',
@@ -10480,7 +10500,7 @@ function TableInner({
       // Default: normal group header
       return /*#__PURE__*/React.createElement("div", {
         key: key,
-        style: fullStyle,
+        style: style,
         className: "table-row group-row",
         onClick: () => toggleGroup(gid)
       }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
@@ -10541,15 +10561,14 @@ function TableInner({
     };
     const content = /*#__PURE__*/React.createElement("div", {
       key: key,
-      style: fullStyle,
+      style: style,
       className: "table-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "row-main",
       onDoubleClick: doubleClickEnable ? handleRowDoubleClick : undefined,
       style: {
         display: 'flex',
-        flex: '1 1 0%',
-        minWidth: 0
+        flex: 1
       }
     }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
       className: "table-cell checkbox-cell"
@@ -10697,9 +10716,8 @@ function TableInner({
       position: "sticky",
       top: 0,
       zIndex: 10,
-      background: "var(--table-bg)",
-      boxSizing: "border-box",
-      paddingRight: undefined
+      background: "#fff",
+      paddingRight: headerPadRight || undefined
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "table-row header-row"
@@ -10749,17 +10767,7 @@ function TableInner({
     title: translate("action")
   }, showIcons ? /*#__PURE__*/React.createElement("span", {
     title: translate("action")
-  }, "\u2699\uFE0F") : translate("action")), headerPadRight > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "table-cell header-scroll-spacer",
-    style: {
-      flex: `0 0 ${headerPadRight}px`,
-      minWidth: headerPadRight,
-      maxWidth: headerPadRight,
-      padding: 0,
-      border: "none",
-      background: "var(--table-bg)"
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
+  }, "\u2699\uFE0F") : translate("action")))), /*#__PURE__*/React.createElement("div", {
     className: "main-table",
     ref: listRef
   }, tableDataFlat.length === 0 ? /*#__PURE__*/React.createElement(DotsLoading.default, null) : /*#__PURE__*/React.createElement(AutoSizer, null, ({