trotl-table 1.0.12 → 1.0.13

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var React$1 = require('react');
 var reactDnd = require('react-dnd');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
 
@@ -23,7 +23,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React$1);
 
 function _classCallCheck(a, n) {
   if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
@@ -912,7 +912,7 @@ var CellMeasurer = /*#__PURE__*/function (_React$PureComponent) {
       if (resolvedChildren === null) {
         return resolvedChildren;
       }
-      return /*#__PURE__*/React.cloneElement(resolvedChildren, {
+      return /*#__PURE__*/React$1.cloneElement(resolvedChildren, {
         ref: function ref(node) {
           if (typeof resolvedChildren.ref === 'function') {
             resolvedChildren.ref(node);
@@ -4140,7 +4140,7 @@ function defaultCellRangeRenderer(_ref /*:: */) {
         warnAboutMissingStyle(parent, renderedCell);
       }
       if (!renderedCell.props.role) {
-        renderedCell = /*#__PURE__*/React.cloneElement(renderedCell, {
+        renderedCell = /*#__PURE__*/React$1.cloneElement(renderedCell, {
           role: 'gridcell'
         });
       }
@@ -9555,7 +9555,7 @@ const Modal = ({
   closeOnEscape = true,
   closeOnOutsideClick = true
 }) => {
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const handleKey = e => {
       if (e.key === 'Escape' && closeOnEscape) {
         onCancel?.();
@@ -9565,22 +9565,22 @@ const Modal = ({
     return () => document.removeEventListener('keydown', handleKey);
   }, [closeOnEscape, onCancel]);
   if (!isOpen) return null;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "modal-overlay",
     onClick: closeOnOutsideClick ? onCancel : undefined
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "modal-box",
     onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/React.createElement("h3", {
+  }, /*#__PURE__*/React$1.createElement("h3", {
     className: "modal-title"
-  }, title), /*#__PURE__*/React.createElement("div", {
+  }, title), /*#__PURE__*/React$1.createElement("div", {
     className: "modal-content"
-  }, children), /*#__PURE__*/React.createElement("div", {
+  }, children), /*#__PURE__*/React$1.createElement("div", {
     className: "modal-actions"
-  }, showCancel && /*#__PURE__*/React.createElement("button", {
+  }, showCancel && /*#__PURE__*/React$1.createElement("button", {
     className: "basic-button cancel",
     onClick: onCancel
-  }, cancelLabel), showConfirm && /*#__PURE__*/React.createElement("button", {
+  }, cancelLabel), showConfirm && /*#__PURE__*/React$1.createElement("button", {
     className: "basic-button confirm",
     onClick: onConfirm
   }, confirmLabel))));
@@ -9617,7 +9617,7 @@ const DraggableRow = ({
   enableDrag,
   listRef
 }) => {
-  const ref = React.useRef(null);
+  const ref = React$1.useRef(null);
   const [, drop] = reactDnd.useDrop({
     accept: ITEM_TYPE,
     hover(draggedItem, monitor) {
@@ -9661,13 +9661,13 @@ const DraggableRow = ({
     })
   });
   // Compose drag & drop refs in effect to avoid reading ref during render
-  const setRef = React.useCallback(node => {
+  const setRef = React$1.useCallback(node => {
     if (node) {
       ref.current = node;
       drag(drop(node));
     }
   }, [drag, drop]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     ref: setRef,
     style: {
       opacity: isDragging ? 0.5 : 1,
@@ -9696,17 +9696,18 @@ function TableInner({
   enableMultiSelect = false,
   enableExternalRowDrop = false,
   onExternalRowDrop = () => {},
-  useExternalDndContext = false
+  useExternalDndContext = false,
+  customColumns = []
 }) {
   // Local selection & sorting state (removed TableContext dependency)
-  const [selectedRows, setSelectedRows] = React.useState([]);
-  const [sorting, setSorting] = React.useState(null);
+  const [selectedRows, setSelectedRows] = React$1.useState([]);
+  const [sorting, setSorting] = React$1.useState(null);
 
   // Option to read search param from URL
-  const [searchTerm, setSearchTerm] = React.useState(extraSearchTerm);
+  const [searchTerm, setSearchTerm] = React$1.useState(extraSearchTerm);
 
   // Listen to URL changes via popstate (back/forward) and custom events
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (!enableSearchUrlParam) {
       setSearchTerm(extraSearchTerm);
       return;
@@ -9748,10 +9749,10 @@ function TableInner({
       window.history.replaceState = originalReplaceState;
     };
   }, [enableSearchUrlParam, extraSearchTerm]);
-  const toggleRowSelection = React.useCallback(rowId => {
+  const toggleRowSelection = React$1.useCallback(rowId => {
     setSelectedRows(prev => prev.includes(rowId) ? prev.filter(r => r !== rowId) : [...prev, rowId]);
   }, []);
-  const clearSelection = React.useCallback(() => setSelectedRows([]), []);
+  const clearSelection = React$1.useCallback(() => setSelectedRows([]), []);
   const setSort = column => {
     setSorting(prev => {
       if (!prev || prev.column !== column) return {
@@ -9768,13 +9769,13 @@ function TableInner({
 
   // console.log(extraSearchTerm)
 
-  const [localData, setLocalData] = React.useState(data);
-  React.useEffect(() => setLocalData(data), [data]);
-  const listRef = React.useRef(null);
-  const normalizedGroups = React.useMemo(() => {
+  const [localData, setLocalData] = React$1.useState(data);
+  React$1.useEffect(() => setLocalData(data), [data]);
+  const listRef = React$1.useRef(null);
+  const normalizedGroups = React$1.useMemo(() => {
     return normalizeData(isGrouped ? localData : [], isGrouped ? [] : localData);
   }, [localData, isGrouped]);
-  const filterRows = React.useCallback(rows => {
+  const filterRows = React$1.useCallback(rows => {
     if (!searchTerm) return rows;
     const query = searchTerm.toLowerCase();
     return rows.filter(row => columns.some(col => {
@@ -9816,7 +9817,7 @@ function TableInner({
     if (sx > sy) return dir === "asc" ? 1 : -1;
     return 0;
   };
-  const sortedGroupedData = React.useMemo(() => {
+  const sortedGroupedData = React$1.useMemo(() => {
     const sortKey = sorting?.column;
     const direction = sorting?.direction || "asc";
     const sortRows = rows => {
@@ -9830,14 +9831,14 @@ function TableInner({
       rows: sortRows(g.rows || [])
     }));
   }, [normalizedGroups, sorting, filterRows]);
-  const [expandedGroups, setExpandedGroups] = React.useState({});
+  const [expandedGroups, setExpandedGroups] = React$1.useState({});
   const toggleGroup = gid => {
     setExpandedGroups(prev => ({
       ...prev,
       [gid]: !prev[gid]
     }));
   };
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     // Pre-populate expansion state for all groups
     setExpandedGroups(prev => {
       const next = {
@@ -9850,7 +9851,7 @@ function TableInner({
       return next;
     });
   }, [normalizedGroups, groupKey]);
-  const groupRowsById = React.useMemo(() => {
+  const groupRowsById = React$1.useMemo(() => {
     const map = {};
     for (const g of sortedGroupedData) {
       const gid = g[groupKey] ?? g.groupId ?? g.groupName;
@@ -9858,8 +9859,8 @@ function TableInner({
     }
     return map;
   }, [sortedGroupedData, groupKey]);
-  const [tableDataFlat, setTableDataFlat] = React.useState([]);
-  const flattened = React.useMemo(() => {
+  const [tableDataFlat, setTableDataFlat] = React$1.useState([]);
+  const flattened = React$1.useMemo(() => {
     const items = [];
     // Use the sortedGroupedData here so the flattened list reflects current sorting and filtering
     for (const g of sortedGroupedData) {
@@ -9886,16 +9887,16 @@ function TableInner({
     }
     return items;
   }, [sortedGroupedData, expandedGroups, isGrouped, groupKey]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     setTableDataFlat(flattened);
   }, [flattened]);
 
   // useEffect(() => setTableDataFlat(flattened), [flattened]);
-  React.useEffect(() => selectedRowsCallback(selectedRows), [selectedRows, selectedRowsCallback]);
+  React$1.useEffect(() => selectedRowsCallback(selectedRows), [selectedRows, selectedRowsCallback]);
 
   // DELETE
-  const [showConfirm, setShowConfirm] = React.useState(false);
-  const [pendingDelete, setPendingDelete] = React.useState(null);
+  const [showConfirm, setShowConfirm] = React$1.useState(false);
+  const [pendingDelete, setPendingDelete] = React$1.useState(null);
   const confirmDelete = async () => {
     if (!pendingDelete) return;
     if (deleteCallback) {
@@ -9918,18 +9919,18 @@ function TableInner({
   };
 
   // RENDER CELL
-  const highlight = React.useCallback(text => {
+  const highlight = React$1.useCallback(text => {
     // Use the actual searchTerm (from URL or prop) for highlighting
     if (!searchTerm || typeof text !== "string") return 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", {
+    return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, text.slice(0, idx), /*#__PURE__*/React$1.createElement("span", {
       className: "highlight"
     }, text.slice(idx, idx + query.length)), text.slice(idx + query.length));
   }, [searchTerm]);
-  const renderCell = React.useCallback((v, accessor) => {
+  const renderCell = React$1.useCallback((v, accessor) => {
     if (accessor === "deadlineISO") {
       return v ? new Date(v).toLocaleString("sl-SI", {
         day: "2-digit",
@@ -9949,7 +9950,7 @@ function TableInner({
 
   // MOVE ROW (internal + between groups)
   // moveRow: allow toIndex to be null or an object { emptyGroupId } for empty group drop
-  const moveRow = React.useCallback((fromIndex, toIndexOrGroup) => {
+  const moveRow = React$1.useCallback((fromIndex, toIndexOrGroup) => {
     const from = tableDataFlat[fromIndex];
     let to = null;
     let emptyGroupId = null;
@@ -10037,7 +10038,7 @@ function TableInner({
   }, [tableDataFlat, isGrouped, groupKey]);
 
   // ROW RENDERER
-  const rowRenderer = React.useCallback(({
+  const rowRenderer = React$1.useCallback(({
     index,
     key,
     style
@@ -10053,7 +10054,7 @@ function TableInner({
       if (item.expanded && rows.length === 0 && enableDragRow) {
         // For empty group, drop target pushes into this group
         const GroupHeaderDrop = () => {
-          const ref = React.useRef(null);
+          const ref = React$1.useRef(null);
           const [, drop] = reactDnd.useDrop({
             accept: ITEM_TYPE,
             drop(draggedItem) {
@@ -10070,7 +10071,7 @@ function TableInner({
             })
           });
           drop(ref);
-          return /*#__PURE__*/React.createElement("div", {
+          return /*#__PURE__*/React$1.createElement("div", {
             ref: ref,
             key: key,
             style: {
@@ -10085,9 +10086,9 @@ function TableInner({
             },
             className: "table-row group-row empty-group-drop",
             onClick: () => toggleGroup(gid)
-          }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
+          }, enableMultiSelect && showDelete && /*#__PURE__*/React$1.createElement("div", {
             className: "table-cell checkbox-cell"
-          }, /*#__PURE__*/React.createElement("input", {
+          }, /*#__PURE__*/React$1.createElement("input", {
             type: "checkbox",
             checked: allSelected,
             onChange: e => {
@@ -10100,31 +10101,31 @@ function TableInner({
               }
             },
             onClick: e => e.stopPropagation()
-          })), showKey && /*#__PURE__*/React.createElement("div", {
+          })), showKey && /*#__PURE__*/React$1.createElement("div", {
             className: "table-cell key-cell"
-          }), /*#__PURE__*/React.createElement("div", {
+          }), /*#__PURE__*/React$1.createElement("div", {
             className: "table-cell group-header",
             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 ? "▾" : "▸", " ", item.groupName, " (0) \u2014 Drop here to move into this group"), columns.slice(1).map((_, i) => /*#__PURE__*/React$1.createElement("div", {
             key: i,
             className: "table-cell"
-          })), showActions && /*#__PURE__*/React.createElement("div", {
+          })), showActions && /*#__PURE__*/React$1.createElement("div", {
             className: "table-cell action-cell"
           }));
         };
-        return /*#__PURE__*/React.createElement(GroupHeaderDrop, null);
+        return /*#__PURE__*/React$1.createElement(GroupHeaderDrop, null);
       }
       // Default: normal group header
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         key: key,
         style: style,
         className: "table-row group-row",
         onClick: () => toggleGroup(gid)
-      }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
+      }, enableMultiSelect && showDelete && /*#__PURE__*/React$1.createElement("div", {
         className: "table-cell checkbox-cell"
-      }, /*#__PURE__*/React.createElement("input", {
+      }, /*#__PURE__*/React$1.createElement("input", {
         type: "checkbox",
         checked: allSelected,
         onChange: e => {
@@ -10137,49 +10138,75 @@ function TableInner({
           }
         },
         onClick: e => e.stopPropagation()
-      })), showKey && /*#__PURE__*/React.createElement("div", {
+      })), showKey && /*#__PURE__*/React$1.createElement("div", {
         className: "table-cell key-cell"
-      }), /*#__PURE__*/React.createElement("div", {
+      }), /*#__PURE__*/React$1.createElement("div", {
         className: "table-cell group-header"
-      }, item.expanded ? "▾" : "▸", " ", item.groupName, " (", item.rowCount, ")"), columns.slice(1).map((_, i) => /*#__PURE__*/React.createElement("div", {
+      }, item.expanded ? "▾" : "▸", " ", item.groupName, " (", item.rowCount, ")"), columns.slice(1).map((_, i) => /*#__PURE__*/React$1.createElement("div", {
         key: i,
         className: "table-cell"
-      })), showActions && /*#__PURE__*/React.createElement("div", {
+      })), showActions && /*#__PURE__*/React$1.createElement("div", {
         className: "table-cell action-cell"
       }));
     }
     const row = item.row;
     const visualIndex = tableDataFlat.slice(0, index).filter(i => i.type === "row").length + 1;
-    const content = /*#__PURE__*/React.createElement("div", {
+
+    // Compose columns + custom columns
+    const allColumns = [...columns];
+    // Insert custom columns at specified places
+    if (Array.isArray(customColumns)) {
+      customColumns.forEach(col => {
+        if (typeof col.place === 'number') {
+          allColumns.splice(col.place, 0, {
+            ...col,
+            isCustom: true
+          });
+        }
+      });
+    }
+    const content = /*#__PURE__*/React$1.createElement("div", {
       key: key,
       style: style,
       className: "table-row"
-    }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
+    }, enableMultiSelect && showDelete && /*#__PURE__*/React$1.createElement("div", {
       className: "table-cell checkbox-cell"
-    }, /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React$1.createElement("input", {
       type: "checkbox",
       checked: selectedRows.includes(row.id),
       onChange: () => toggleRowSelection(row.id)
-    })), showKey && /*#__PURE__*/React.createElement("div", {
+    })), showKey && /*#__PURE__*/React$1.createElement("div", {
       className: "table-cell key-cell"
-    }, visualIndex), columns.map((col, i) => /*#__PURE__*/React.createElement("div", {
-      key: i,
-      className: "table-cell"
-    }, renderCell(row[col.accessor], col.accessor))), showActions && /*#__PURE__*/React.createElement("div", {
+    }, visualIndex), allColumns.map((col, i) => {
+      let cellStyle = col.isCustom && col.style ? {
+        ...col.style
+      } : undefined;
+      if (col.isCustom && col.style && col.style.width) {
+        cellStyle = cellStyle || {};
+        cellStyle.minWidth = col.style.width;
+        cellStyle.maxWidth = col.style.width;
+        cellStyle.width = col.style.width;
+      }
+      return /*#__PURE__*/React$1.createElement("div", {
+        key: i,
+        className: "table-cell",
+        style: cellStyle
+      }, col.isCustom ? typeof col.render === 'function' ? col.render(row, i) : col.render : renderCell(row[col.accessor], col.accessor, row));
+    }), showActions && /*#__PURE__*/React$1.createElement("div", {
       className: "table-cell action-cell"
-    }, showView && /*#__PURE__*/React.createElement("button", {
+    }, showView && /*#__PURE__*/React$1.createElement("button", {
       className: "action-btn-table",
       style: {
         background: "#646cffaa"
       },
       onClick: () => viewCallback(row)
-    }, "View"), showEdit && /*#__PURE__*/React.createElement("button", {
+    }, "View"), showEdit && /*#__PURE__*/React$1.createElement("button", {
       className: "action-btn-table",
       style: {
         background: "#4caf50"
       },
       onClick: () => editCallback(row)
-    }, "Edit"), showDelete && /*#__PURE__*/React.createElement("button", {
+    }, "Edit"), showDelete && /*#__PURE__*/React$1.createElement("button", {
       className: "action-btn-table",
       style: {
         background: "#f44336"
@@ -10191,7 +10218,7 @@ function TableInner({
       }
     }, "Delete")));
     if (enableDragRow && item.type === "row") {
-      return /*#__PURE__*/React.createElement(DraggableRow, {
+      return /*#__PURE__*/React$1.createElement(DraggableRow, {
         key: key,
         index: index,
         moveRow: moveRow,
@@ -10202,13 +10229,13 @@ function TableInner({
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, viewCallback, editCallback, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId]);
+  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, viewCallback, editCallback, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns]);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
 
   // Table-level drop target only when using external DnD context
-  const tableContainerRef = React.useRef(null);
+  const tableContainerRef = React$1.useRef(null);
   const [{
     isOver: isExternalOver,
     canDrop: canExternalDrop
@@ -10221,13 +10248,26 @@ function TableInner({
       onExternalRowDrop(draggedItem.row, draggedItem.sourceTableId, tableId);
     }
   });
-  const setTableRef = React.useCallback(node => {
+  const setTableRef = React$1.useCallback(node => {
     tableContainerRef.current = node;
     if (node && useExternalDndContext && enableExternalRowDrop) {
       externalDrop(node);
     }
   }, [useExternalDndContext, enableExternalRowDrop, externalDrop]);
-  const tableMarkup = /*#__PURE__*/React.createElement("div", {
+
+  // Compose columns + custom columns for header
+  const allColumns = [...columns];
+  if (Array.isArray(customColumns)) {
+    customColumns.forEach(col => {
+      if (typeof col.place === 'number') {
+        allColumns.splice(col.place, 0, {
+          ...col,
+          isCustom: true
+        });
+      }
+    });
+  }
+  const tableMarkup = /*#__PURE__*/React$1.createElement("div", {
     className: "table-container",
     ref: setTableRef,
     style: useExternalDndContext && enableExternalRowDrop ? {
@@ -10235,7 +10275,7 @@ function TableInner({
       background: isExternalOver && canExternalDrop ? 'rgba(100,108,255,0.15)' : undefined,
       outline: isExternalOver && canExternalDrop ? '2px dashed #646cff' : undefined
     } : undefined
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "table-header",
     style: {
       position: "sticky",
@@ -10243,11 +10283,11 @@ function TableInner({
       zIndex: 10,
       background: "#fff"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React$1.createElement("div", {
     className: "table-row header-row"
-  }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
+  }, enableMultiSelect && showDelete && /*#__PURE__*/React$1.createElement("div", {
     className: "table-cell checkbox-cell"
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React$1.createElement("input", {
     type: "checkbox",
     checked: tableDataFlat.filter(i => i.type === "row").length > 0 && selectedRows.length === tableDataFlat.filter(i => i.type === "row").length,
     onChange: e => {
@@ -10258,33 +10298,48 @@ function TableInner({
         clearSelection();
       }
     }
-  })), showKey && /*#__PURE__*/React.createElement("div", {
+  })), showKey && /*#__PURE__*/React$1.createElement("div", {
     className: "table-cell key-cell"
-  }, "#"), columns.map((col, i) => /*#__PURE__*/React.createElement("div", {
-    key: i,
-    className: "table-cell",
-    onClick: () => setSort(col.accessor),
-    style: {
-      cursor: "pointer"
+  }, "#"), allColumns.map((col, i) => {
+    // For custom columns, apply width and textAlign to header cell
+    let cellStyle = col.isCustom && col.style ? {
+      ...col.style,
+      cursor: undefined,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: col.style.textAlign === 'center' ? 'center' : col.style.textAlign === 'right' ? 'flex-end' : 'flex-start'
+    } : {
+      cursor: col.isCustom ? undefined : "pointer"
+    };
+    if (col.isCustom && col.style && col.style.width) {
+      cellStyle.minWidth = col.style.width;
+      cellStyle.maxWidth = col.style.width;
+      cellStyle.width = col.style.width;
     }
-  }, col.header, sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"))), showActions && /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React$1.createElement("div", {
+      key: i,
+      className: "table-cell",
+      style: cellStyle,
+      onClick: col.isCustom ? undefined : () => setSort(col.accessor)
+    }, col.isCustom ? col.header ?? '' : col.header, !col.isCustom && sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"));
+  }), showActions && /*#__PURE__*/React$1.createElement("div", {
     className: "table-cell action-cell"
-  }, "Action"))), /*#__PURE__*/React.createElement("div", {
+  }, "Action"))), /*#__PURE__*/React$1.createElement("div", {
     className: "main-table",
     ref: listRef
-  }, tableDataFlat.length === 0 ? /*#__PURE__*/React.createElement("div", {
+  }, tableDataFlat.length === 0 ? /*#__PURE__*/React$1.createElement("div", {
     className: "table-empty"
-  }, "No items") : /*#__PURE__*/React.createElement(AutoSizer, null, ({
+  }, "No items") : /*#__PURE__*/React$1.createElement(AutoSizer, null, ({
     height,
     width
-  }) => /*#__PURE__*/React.createElement(List, {
+  }) => /*#__PURE__*/React$1.createElement(List, {
     width: width,
     height: height,
     rowCount: tableDataFlat.length,
     rowHeight: rowHeightGetter,
     rowRenderer: rowRenderer,
     overscanRowCount: 8
-  }))), /*#__PURE__*/React.createElement(Modal, {
+  }))), /*#__PURE__*/React$1.createElement(Modal, {
     isOpen: showConfirm,
     title: "Confirm delete",
     onConfirm: confirmDelete,
@@ -10293,7 +10348,7 @@ function TableInner({
     cancelLabel: "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$1.createElement("p", null, "Are you sure you want to delete ", /*#__PURE__*/React$1.createElement("strong", null, pendingDelete?.name || pendingDelete?.id), "?")));
   return tableMarkup;
 }
 function Table(props) {
@@ -10301,17 +10356,59 @@ function Table(props) {
     useExternalDndContext = false
   } = props;
   if (useExternalDndContext) {
-    return /*#__PURE__*/React.createElement(TableInner, props);
+    return /*#__PURE__*/React$1.createElement(TableInner, props);
   }
   // Provide DnD context when not supplied externally
-  return /*#__PURE__*/React.createElement(reactDnd.DndProvider, {
+  return /*#__PURE__*/React$1.createElement(reactDnd.DndProvider, {
     backend: reactDndHtml5Backend.HTML5Backend
-  }, /*#__PURE__*/React.createElement(TableInner, props));
+  }, /*#__PURE__*/React$1.createElement(TableInner, props));
+}
+
+function Switch({
+  checked,
+  onChange
+}) {
+  return /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      cursor: "pointer"
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    checked: checked,
+    onChange: onChange,
+    style: {
+      display: "none"
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 36,
+      height: 20,
+      background: checked ? "#4caf50" : "#ccc",
+      borderRadius: 12,
+      position: "relative",
+      transition: "background 0.2s",
+      display: "inline-block"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      left: checked ? 18 : 2,
+      top: 2,
+      width: 16,
+      height: 16,
+      background: "#fff",
+      borderRadius: "50%",
+      transition: "left 0.2s"
+    }
+  })));
 }
 
 // src/index.js
- // if you want named import
+ // named exports for both
 
+exports.Switch = Switch;
 exports.Table = Table;
 exports.default = Table;
 //# sourceMappingURL=index.cjs.js.map