trotl-table 1.0.12 → 1.0.14

package/dist/index.cjs.js

@@ -9696,7 +9696,8 @@ function TableInner({
   enableMultiSelect = false,
   enableExternalRowDrop = false,
   onExternalRowDrop = () => {},
-  useExternalDndContext = false
+  useExternalDndContext = false,
+  customColumns = []
 }) {
   // Local selection & sorting state (removed TableContext dependency)
   const [selectedRows, setSelectedRows] = React.useState([]);
@@ -10150,6 +10151,20 @@ function TableInner({
     }
     const row = item.row;
     const visualIndex = tableDataFlat.slice(0, index).filter(i => i.type === "row").length + 1;
+
+    // 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.createElement("div", {
       key: key,
       style: style,
@@ -10162,10 +10177,22 @@ function TableInner({
       onChange: () => toggleRowSelection(row.id)
     })), showKey && /*#__PURE__*/React.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.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.createElement("div", {
       className: "table-cell action-cell"
     }, showView && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
@@ -10202,7 +10229,7 @@ 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;
@@ -10227,6 +10254,19 @@ function TableInner({
       externalDrop(node);
     }
   }, [useExternalDndContext, enableExternalRowDrop, externalDrop]);
+
+  // 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.createElement("div", {
     className: "table-container",
     ref: setTableRef,
@@ -10260,14 +10300,29 @@ function TableInner({
     }
   })), showKey && /*#__PURE__*/React.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.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.createElement("div", {
     className: "table-cell action-cell"
   }, "Action"))), /*#__PURE__*/React.createElement("div", {
     className: "main-table",
@@ -10309,9 +10364,51 @@ function Table(props) {
   }, /*#__PURE__*/React.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