@xcelsior/ui-spreadsheets 1.1.6 → 1.1.8

package/dist/index.d.mts

@@ -24,7 +24,7 @@ interface SpreadsheetColumn<T = any> {
     /** Whether the column can be pinned */
     pinnable?: boolean;
     /** Type of data in the column (for filtering/formatting) */
-    type?: 'text' | 'number' | 'date' | 'select' | 'boolean';
+    type?: 'text' | 'number' | 'date' | 'select' | 'boolean' | 'checkbox';
     /** Options for select type columns */
     options?: string[];
     /** Custom render function for cell content */
@@ -323,8 +323,10 @@ interface SpreadsheetProps<T = any> {
     onSave?: () => void | Promise<void>;
     /** Initial settings (optional). All settings can be changed by user in the settings modal. */
     settings?: {
-        /** Default pinned column IDs */
+        /** Default pinned column IDs (pinned to left) */
         defaultPinnedColumns?: string[];
+        /** Default pinned column IDs (pinned to right) */
+        defaultPinnedRightColumns?: string[];
         /** Default sort configuration */
         defaultSort?: SpreadsheetSortConfig | null;
         /** Default page size */
@@ -343,6 +345,7 @@ interface SpreadsheetProps<T = any> {
         defaultPageSize?: number;
         defaultZoom?: number;
         defaultPinnedColumns?: string[];
+        defaultPinnedRightColumns?: string[];
         defaultSort?: SpreadsheetSortConfig | null;
     }) => void;
     /** Loading state */

package/dist/index.d.ts

@@ -24,7 +24,7 @@ interface SpreadsheetColumn<T = any> {
     /** Whether the column can be pinned */
     pinnable?: boolean;
     /** Type of data in the column (for filtering/formatting) */
-    type?: 'text' | 'number' | 'date' | 'select' | 'boolean';
+    type?: 'text' | 'number' | 'date' | 'select' | 'boolean' | 'checkbox';
     /** Options for select type columns */
     options?: string[];
     /** Custom render function for cell content */
@@ -323,8 +323,10 @@ interface SpreadsheetProps<T = any> {
     onSave?: () => void | Promise<void>;
     /** Initial settings (optional). All settings can be changed by user in the settings modal. */
     settings?: {
-        /** Default pinned column IDs */
+        /** Default pinned column IDs (pinned to left) */
         defaultPinnedColumns?: string[];
+        /** Default pinned column IDs (pinned to right) */
+        defaultPinnedRightColumns?: string[];
         /** Default sort configuration */
         defaultSort?: SpreadsheetSortConfig | null;
         /** Default page size */
@@ -343,6 +345,7 @@ interface SpreadsheetProps<T = any> {
         defaultPageSize?: number;
         defaultZoom?: number;
         defaultPinnedColumns?: string[];
+        defaultPinnedRightColumns?: string[];
         defaultSort?: SpreadsheetSortConfig | null;
     }) => void;
     /** Loading state */

package/dist/index.js

@@ -257,10 +257,31 @@ var SpreadsheetCell = ({
     if (isRowHovered) return "rgb(243 244 246)";
     return "white";
   };
+  const handleCheckboxChange = (e) => {
+    e.stopPropagation();
+    const newValue = e.target.checked;
+    onConfirm?.(newValue);
+  };
   const renderContent = () => {
     if (column.render) {
       return column.render(value, row, rowIndex);
     }
+    if (column.type === "checkbox") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: Boolean(value),
+          onChange: handleCheckboxChange,
+          onClick: (e) => e.stopPropagation(),
+          disabled: !isEditable,
+          className: cn(
+            "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer",
+            !isEditable && "cursor-not-allowed opacity-60"
+          )
+        }
+      );
+    }
     if (value === null || value === void 0 || value === "") {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-400", children: "-" });
     }
@@ -273,6 +294,9 @@ var SpreadsheetCell = ({
     return String(value);
   };
   const renderEditInput = () => {
+    if (column.type === "checkbox") {
+      return renderContent();
+    }
     if (column.type === "select" && column.options) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "select",
@@ -1260,13 +1284,17 @@ function useSpreadsheetPinning({
   columns,
   columnGroups,
   showRowIndex = true,
-  defaultPinnedColumns = []
+  defaultPinnedColumns = [],
+  defaultPinnedRightColumns = []
 }) {
   const [pinnedColumns, setPinnedColumns] = (0, import_react6.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     defaultPinnedColumns.forEach((col) => {
       map.set(col, "left");
     });
+    defaultPinnedRightColumns.forEach((col) => {
+      map.set(col, "right");
+    });
     return map;
   });
   const [collapsedGroups, setCollapsedGroups] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
@@ -1369,6 +1397,20 @@ function useSpreadsheetPinning({
     },
     [pinnedColumns]
   );
+  const getColumnRightOffset = (0, import_react6.useCallback)(
+    (columnId) => {
+      const pinnedRight = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").map(([id]) => id);
+      const index = pinnedRight.indexOf(columnId);
+      if (index === -1) return 0;
+      let offset = 0;
+      for (let i = pinnedRight.length - 1; i > index; i--) {
+        const col = columns.find((c) => c.id === pinnedRight[i]);
+        offset += col?.minWidth || col?.width || 100;
+      }
+      return offset;
+    },
+    [pinnedColumns, columns]
+  );
   return {
     pinnedColumns,
     isRowIndexPinned,
@@ -1378,6 +1420,7 @@ function useSpreadsheetPinning({
     handleToggleGroupCollapse,
     setPinnedColumnsFromIds,
     getColumnLeftOffset,
+    getColumnRightOffset,
     isColumnPinned,
     getColumnPinSide
   };
@@ -3472,12 +3515,14 @@ function Spreadsheet({
     handleToggleGroupCollapse,
     setPinnedColumnsFromIds,
     getColumnLeftOffset,
+    getColumnRightOffset,
     isColumnPinned,
     getColumnPinSide
   } = useSpreadsheetPinning({
     columns,
     columnGroups,
-    defaultPinnedColumns: initialSettings?.defaultPinnedColumns
+    defaultPinnedColumns: initialSettings?.defaultPinnedColumns,
+    defaultPinnedRightColumns: initialSettings?.defaultPinnedRightColumns
   });
   const {
     getCellComments,
@@ -3929,6 +3974,7 @@ function Spreadsheet({
               ),
               visibleColumns.map((column) => {
                 const isPinnedLeft = isColumnPinned(column.id) && getColumnPinSide(column.id) === "left";
+                const isPinnedRight = isColumnPinned(column.id) && getColumnPinSide(column.id) === "right";
                 return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   SpreadsheetHeader,
                   {
@@ -3938,6 +3984,7 @@ function Spreadsheet({
                     isPinned: isColumnPinned(column.id),
                     pinSide: getColumnPinSide(column.id),
                     leftOffset: isPinnedLeft ? getColumnLeftOffset(column.id) : 0,
+                    rightOffset: isPinnedRight ? getColumnRightOffset(column.id) : 0,
                     highlightColor: getColumnHighlight(column.id),
                     compactMode: effectiveCompactMode,
                     onClick: () => handleSort(column.id),
@@ -4154,6 +4201,7 @@ function Spreadsheet({
                         isPinned: isColPinned,
                         pinSide: colPinSide,
                         leftOffset: getColumnLeftOffset(column.id),
+                        rightOffset: getColumnRightOffset(column.id),
                         onClick: (e) => handleCellClick(rowId, column.id, e),
                         onConfirm: handleConfirmEdit,
                         onCancel: handleCancelEdit,