@zhenliang/sheet 0.1.68 → 0.1.69

package/dist/core/editor/selectEditor/index.js

@@ -51,10 +51,9 @@ export var getSelectEditor = function getSelectEditor(options) {
       });
     };
     var customOptions = getCustomOptions ? getCustomOptions(props) : options;
-    return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({}, selectProps), {}, {
+    return /*#__PURE__*/_jsx(Select, _objectSpread({
       autoFocus: true,
       className: "select-editor",
-      allowClear: true,
       open: isOpen,
       onMouseDown: function onMouseDown(e) {
         e.stopPropagation();
@@ -64,11 +63,12 @@ export var getSelectEditor = function getSelectEditor(options) {
       onKeyDown: handleKeyDown,
       options: customOptions,
       popupClassName: "select-editor-dropdown",
-      dropdownRender: dropdown
-    }));
+      dropdownRender: dropdown,
+      allowClear: true
+    }, selectProps));
   };
   SelectEditor.checker = function (value) {
-    if (isNil(value)) return true;
+    if (isNil(value) && selectProps.allowClear !== false) return true;
     return options.some(function (item) {
       return item.value == value;
     }) || options.some(function (item) {

package/dist/core/reducers/index.d.ts

@@ -1,5 +1,5 @@
 import type { SheetType } from "../../type";
-export type SheetAction = 'change' | 'changes' | 'rowMove' | 'colMove' | 'editFinish' | 'pushHistory' | 'popHistory' | 'select' | 'selectOneRow' | 'changeSearch' | 'closeSearch' | 'openSearch' | 'clearSelect' | 'clearSelectIfNotSingleRow' | 'clearEdit' | 'mouseDown' | 'mouseOver' | 'mouseUp' | 'selectRow' | 'selectCol' | 'loseFocus' | 'doubleClick' | 'mouseLeaveInterval' | 'move' | 'selectAll' | 'escape' | 'reverse' | 'delete' | 'enter' | 'otherInput' | 'none';
+export type SheetAction = 'change' | 'changes' | 'rowMove' | 'colMove' | 'editFinish' | 'pushHistory' | 'popHistory' | 'select' | 'selectOneRow' | 'changeSearch' | 'closeSearch' | 'openSearch' | 'changeFixedPosition' | 'clearSelect' | 'clearSelectIfNotSingleRow' | 'clearEdit' | 'mouseDown' | 'mouseOver' | 'mouseUp' | 'selectRow' | 'selectCol' | 'loseFocus' | 'doubleClick' | 'mouseLeaveInterval' | 'move' | 'selectAll' | 'escape' | 'reverse' | 'delete' | 'enter' | 'otherInput' | 'none';
 export type reducerAction = (type: Partial<SheetType.UpdateStateType>, payload?: unknown) => Partial<SheetType.UpdateStateType>;
 declare const sheetReducer: (state: Partial<SheetType.UpdateStateType>, action: {
     type: SheetAction;

package/dist/core/reducers/index.js

@@ -18,6 +18,7 @@ var sheetReducer = function sheetReducer(state, action) {
     case 'changeSearch':
     case 'closeSearch':
     case 'openSearch':
+    case 'changeFixedPosition':
       return stateReducer[action.type](state, action.payload);
     case 'mouseDown':
     case 'mouseOver':

package/dist/core/reducers/sideEffectReducer.js

@@ -13,12 +13,18 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-import { head, isNil, last, pick } from 'lodash';
+import { head, isEmpty, isNil, last, pick } from 'lodash';
 import { clipboardDataToString, flatRowCol, flatRowColIndex, formatDataToCell, getRowColConfig, groupConfigToGroupMap, stringToClipboardData } from "../util";
 export var sideEffectReducer = {
   init: function init(dispatch, getState) {
     var _getState = getState(),
       eventBus = _getState.eventBus;
+    eventBus.on('change-fixed-position', function (value) {
+      dispatch({
+        type: 'changeFixedPosition',
+        payload: value
+      });
+    });
     eventBus.on('cell-change', function (cell) {
       dispatch(function () {
         var _getState2 = getState(),
@@ -322,25 +328,25 @@ export var sideEffectReducer = {
     var groupMap = groupConfigToGroupMap(groupConfig);
     var cellIndex = flatRowColIndex(start, end);
     var changes = cellIndex.filter(function (item) {
-      var _data$item$row, _data$item$row2;
-      return !(data !== null && data !== void 0 && (_data$item$row = data[item.row]) !== null && _data$item$row !== void 0 && _data$item$row[item.col].readonly) && (data === null || data === void 0 || (_data$item$row2 = data[item.row]) === null || _data$item$row2 === void 0 ? void 0 : _data$item$row2[item.col].editable);
+      var _data$item$row, _data$item$row2, _data$item$row3;
+      return !(data !== null && data !== void 0 && (_data$item$row = data[item.row]) !== null && _data$item$row !== void 0 && _data$item$row[item.col].readonly) && (data === null || data === void 0 || (_data$item$row2 = data[item.row]) === null || _data$item$row2 === void 0 ? void 0 : _data$item$row2[item.col].allowClear) !== false && (data === null || data === void 0 || (_data$item$row3 = data[item.row]) === null || _data$item$row3 === void 0 ? void 0 : _data$item$row3[item.col].editable);
     }).filter(
     // 过滤掉分组的子行并且是关闭的状态
     function (item) {
       var _groupMap$get3, _groupMap$get4;
       return !(groupMap.get(item.row) && !((_groupMap$get3 = groupMap.get(item.row)) !== null && _groupMap$get3 !== void 0 && _groupMap$get3.isStart) && !((_groupMap$get4 = groupMap.get(item.row)) !== null && _groupMap$get4 !== void 0 && _groupMap$get4.isOpen));
     }).map(function (item) {
-      var _data$item$row3, _data$item$row4, _data$item$row5;
+      var _data$item$row4, _data$item$row5, _data$item$row6;
       return {
-        cell: data === null || data === void 0 || (_data$item$row3 = data[item.row]) === null || _data$item$row3 === void 0 ? void 0 : _data$item$row3[item.col],
+        cell: data === null || data === void 0 || (_data$item$row4 = data[item.row]) === null || _data$item$row4 === void 0 ? void 0 : _data$item$row4[item.col],
         row: item.row,
         col: item.col,
         value: null,
-        key: data === null || data === void 0 || (_data$item$row4 = data[item.row]) === null || _data$item$row4 === void 0 ? void 0 : _data$item$row4[item.col].dataIndex,
-        id: data === null || data === void 0 || (_data$item$row5 = data[item.row]) === null || _data$item$row5 === void 0 ? void 0 : _data$item$row5[item.col].id
+        key: data === null || data === void 0 || (_data$item$row5 = data[item.row]) === null || _data$item$row5 === void 0 ? void 0 : _data$item$row5[item.col].dataIndex,
+        id: data === null || data === void 0 || (_data$item$row6 = data[item.row]) === null || _data$item$row6 === void 0 ? void 0 : _data$item$row6[item.col].id
       };
     });
-    if (!changes.length) {
+    if (!changes || isEmpty(changes)) {
       return;
     }
     var newHistory = _toConsumableArray(history || []);

package/dist/core/reducers/stateReducer.js

@@ -83,6 +83,11 @@ export var searchReducer = {
   }
 };
 export var stateReducer = _objectSpread({
+  changeFixedPosition: function changeFixedPosition(state, payload) {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      fixedInfo: payload
+    });
+  },
   change: function change(state, payload) {
     var _ref = payload,
       key = _ref.key,

package/dist/core/sheet/Cell.js

@@ -16,20 +16,6 @@ function initialData(_ref) {
   var cell = _ref.cell;
   return renderValue(cell);
 }
-function widthStyle(cell) {
-  var width = typeof (cell === null || cell === void 0 ? void 0 : cell.width) === 'number' ? "".concat(cell.width, "px") : cell.width;
-  var align = cell.align || 'left';
-  var position = cell.fixed ? 'sticky' : 'unset';
-  var left = cell.fixed === 'left' ? 0 : 'unset';
-  var right = cell.fixed === 'right' ? 0 : 'unset';
-  return {
-    width: width,
-    textAlign: align,
-    position: position,
-    left: left,
-    right: right
-  };
-}
 var Cell = function Cell(props) {
   var _cell$editable;
   var row = props.row,
@@ -39,7 +25,8 @@ var Cell = function Cell(props) {
     CellRenderer = _props$cellRenderer === void 0 ? DefaultCell : _props$cellRenderer,
     dataEditor = props.dataEditor,
     valueViewer = props.valueViewer,
-    attributesRenderer = props.attributesRenderer;
+    attributesRenderer = props.attributesRenderer,
+    cellFixedInfo = props.cellFixedInfo;
   var eventBus = useSheetEvent();
   var _useSetState = useSetState(),
     _useSetState2 = _slicedToArray(_useSetState, 2),
@@ -165,6 +152,25 @@ var Cell = function Cell(props) {
       return a;
     }).join(' ');
   }, [editing, selected, selectedInfo, cell.className, cell.readonly]);
+  var widthStyle = useMemo(function () {
+    var _cellFixedInfo$fixPos, _cellFixedInfo$fixPos2;
+    var width = typeof (cell === null || cell === void 0 ? void 0 : cell.width) === 'number' ? "".concat(cell.width, "px") : cell.width;
+    var align = cell.align || 'left';
+    var position = cell.fixed ? 'sticky' : 'unset';
+    var left = cell.fixed === 'left' ? (_cellFixedInfo$fixPos = cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.fixPosition) !== null && _cellFixedInfo$fixPos !== void 0 ? _cellFixedInfo$fixPos : 0 : 'unset';
+    var right = cell.fixed === 'right' ? (_cellFixedInfo$fixPos2 = cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.fixPosition) !== null && _cellFixedInfo$fixPos2 !== void 0 ? _cellFixedInfo$fixPos2 : 0 : 'unset';
+    var obj = {
+      width: width,
+      textAlign: align,
+      position: position,
+      left: left,
+      right: right
+    };
+    if (cell.col !== undefined && cell.col < 0 && cell.fixed === 'left') {
+      obj.visibility = 'collapse';
+    }
+    return obj;
+  }, [cellFixedInfo, cell]);
   return /*#__PURE__*/_jsx(CellRenderer, {
     row: row,
     col: col,
@@ -173,11 +179,15 @@ var Cell = function Cell(props) {
     editing: eventState.editing,
     attributesRenderer: attributesRenderer,
     className: className,
-    style: widthStyle(cell),
+    style: widthStyle,
+    isFirstFixedRight: cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.isFirstFixedRight,
+    isLastFixedLeft: cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.isLastFixedLeft,
+    isScrolledOver: cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.isScrolledOver,
+    isScrolledToEnd: cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.isScrolledToEnd,
     children: content
   });
 };
 export default /*#__PURE__*/memo(Cell, function (pre, next) {
-  var shouldUpdate = pre.col === next.col && pre.row === next.row && pre.cell.value === next.cell.value && pre.cell.dataEditor === next.cell.dataEditor && pre.cell.className === next.cell.className && pre.cell.record === next.cell.record;
+  var shouldUpdate = pre.col === next.col && pre.row === next.row && pre.cell.value === next.cell.value && pre.cell.dataEditor === next.cell.dataEditor && pre.cell.className === next.cell.className && pre.cell.record === next.cell.record && pre.cellFixedInfo === next.cellFixedInfo;
   return shouldUpdate;
 });

package/dist/core/sheet/DefaultCell.d.ts

@@ -7,5 +7,9 @@ declare const DefaultCell: (props: {
     className: string;
     style: Record<string, string>;
     children: React.ReactElement;
+    isFirstFixedRight: boolean;
+    isLastFixedLeft: boolean;
+    isScrolledOver: boolean;
+    isScrolledToEnd: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default DefaultCell;

package/dist/core/sheet/DefaultCell.js

@@ -13,14 +13,18 @@ var DefaultCell = function DefaultCell(props) {
     attributesRenderer = props.attributesRenderer,
     className = props.className,
     style = props.style,
-    children = props.children;
+    children = props.children,
+    isFirstFixedRight = props.isFirstFixedRight,
+    isLastFixedLeft = props.isLastFixedLeft,
+    isScrolledOver = props.isScrolledOver,
+    isScrolledToEnd = props.isScrolledToEnd;
   var colSpan = cell.colSpan,
     rowSpan = cell.rowSpan;
   var attributes = attributesRenderer ? attributesRenderer(cell, row, col) : {};
   return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
     "data-row": row,
     "data-col": col,
-    className: classNames(className, cell.fixed && 'fixed', cell.fixed && "fixed-".concat(cell.fixed), cell.dataIndex === 'index' ? "index" : null),
+    className: classNames(className, cell.fixed && 'fixed', cell.fixed && "fixed-".concat(cell.fixed), cell.dataIndex === 'index' ? 'index' : null, isLastFixedLeft && isScrolledOver ? "last-fixed-left" : null, isFirstFixedRight && !isScrolledToEnd ? "first-fixed-right" : null),
     colSpan: colSpan,
     rowSpan: rowSpan,
     style: style

package/dist/core/sheet/DefaultRowMapper.d.ts

@@ -3,6 +3,9 @@ import type { SheetType } from "../../type";
 interface DefaultRowMapperProps {
     rowData: SheetType.Cell[];
     row: number;
+    fixedInfo: SheetType.FixedInfo[];
+    isScrolledOver: boolean;
+    isScrolledToEnd: boolean;
 }
 export declare const DefaultRowMapper: React.FC<DefaultRowMapperProps>;
 export {};

package/dist/core/sheet/DefaultRowMapper.js

@@ -1,15 +1,28 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { memo } from 'react';
 import Cell from "./Cell";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 export var DefaultRowMapper = /*#__PURE__*/memo(function (_ref) {
   var rowData = _ref.rowData,
-    row = _ref.row;
+    row = _ref.row,
+    fixedInfo = _ref.fixedInfo,
+    isScrolledOver = _ref.isScrolledOver,
+    isScrolledToEnd = _ref.isScrolledToEnd;
   var cls = rowData.map(function (cell, col) {
     return /*#__PURE__*/_jsx(Cell, {
       row: row,
       col: col,
-      cell: cell
+      cell: cell,
+      cellFixedInfo: _objectSpread(_objectSpread({}, fixedInfo[col]), {}, {
+        isScrolledOver: isScrolledOver,
+        isScrolledToEnd: isScrolledToEnd
+      })
     }, col);
   });
   return /*#__PURE__*/_jsx(_Fragment, {

package/dist/core/sheet/index.js

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 // import ReduxLogger from 'redux-logger';
 import ReduxThunk from 'redux-thunk';
 import DefaultRow from "./DefaultRow";
@@ -66,6 +66,14 @@ var Sheet = function Sheet(props) {
     _props$showQuickLocat = props.showQuickLocationBtn,
     showQuickLocationBtn = _props$showQuickLocat === void 0 ? false : _props$showQuickLocat,
     ControlContainer = props.ControlContainer;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isScrolledOver = _useState2[0],
+    setIsScrolledOver = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isScrolledToEnd = _useState4[0],
+    setIsScrolledToEnd = _useState4[1];
   var sheetWrapperRef = useRef(null);
   var contextMenuRef = useRef(null);
   var eventBus = useEventBus();
@@ -77,7 +85,8 @@ var Sheet = function Sheet(props) {
       editing: undefined,
       lastFocus: [],
       groupConfig: groupConfig,
-      eventBus: eventBus
+      eventBus: eventBus,
+      fixedInfo: []
     },
     // [ReduxThunk, ReduxLogger],
     [ReduxThunk]),
@@ -229,12 +238,15 @@ var Sheet = function Sheet(props) {
         cells: rowData,
         rowClassName: rowCN,
         children: /*#__PURE__*/_jsx(DefaultRowMapper, {
+          fixedInfo: state.fixedInfo,
           rowData: rowData,
-          row: row
+          row: row,
+          isScrolledOver: isScrolledOver,
+          isScrolledToEnd: isScrolledToEnd
         })
       }, row);
     });
-  }, [visibleData, groupConfig, virtualStart, virtualEnd, rowClassName]);
+  }, [visibleData, groupConfig, virtualStart, virtualEnd, rowClassName, state.fixedInfo]);
   var memoHeight = Math.min(((_visibleData$length = visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) !== null && _visibleData$length !== void 0 ? _visibleData$length : 0) + 1, 10) * 42 + 43;
   var _useSelectVisible = useSelectVisible(sheetWrapperRef, state.start),
     _useSelectVisible2 = _slicedToArray(_useSelectVisible, 1),
@@ -265,6 +277,23 @@ var Sheet = function Sheet(props) {
     return null;
   }, [isEmptyData, emptyRenderer]);
   var hasHorizontalScrollbar = sheetWrapperRef.current && sheetWrapperRef.current.scrollWidth > sheetWrapperRef.current.clientWidth;
+  var handleScroll = useCallback(function (event) {
+    var div = event.target;
+
+    // 当前的滚动位置
+    var scrollLeft = div.scrollLeft;
+    // 整个内容的宽度
+    var scrollWidth = div.scrollWidth;
+    // 当前可视区域的宽度
+    var clientWidth = div.clientWidth;
+    setIsScrolledOver(scrollLeft > 0);
+    // 判断是否滚动到底
+    if (scrollLeft + clientWidth >= scrollWidth) {
+      setIsScrolledToEnd(true);
+    } else {
+      setIsScrolledToEnd(false);
+    }
+  }, []);
   return /*#__PURE__*/_jsx(SheetEventContext.Provider, {
     value: eventBus,
     children: /*#__PURE__*/_jsxs(_Fragment, {
@@ -280,8 +309,11 @@ var Sheet = function Sheet(props) {
             maxHeight: (_scroll$y = scroll === null || scroll === void 0 ? void 0 : scroll.y) !== null && _scroll$y !== void 0 ? _scroll$y : memoHeight,
             width: (_scroll$x = scroll === null || scroll === void 0 ? void 0 : scroll.x) !== null && _scroll$x !== void 0 ? _scroll$x : '100%'
           },
+          onScroll: handleScroll,
           children: [/*#__PURE__*/_jsxs(SheetShell, {
             className: classNames('harvest-sheet', className),
+            isScrolledOver: isScrolledOver,
+            isScrolledToEnd: isScrolledToEnd,
             children: [/*#__PURE__*/_jsx(VirtualizeStart, {
               virtualized: virtualized,
               paddingTop: paddingTop

package/dist/core/sheet/index.less

@@ -51,7 +51,7 @@ span.harvest-sheet-container:focus {
 
     th.cell-title {
       line-height: var(--row-height);
-      border-bottom: 1px solid transparent;
+      border-bottom: none;
     }
 
     td {
@@ -89,36 +89,50 @@ span.harvest-sheet-container:focus {
     z-index: 3;
   }
 
+  &::before {
+    position: absolute;
+    top: -1px;
+    left: 0;
+    width: calc(100% + 1px);
+    height: calc(100% + 2px);
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    border-right: 1px solid;
+    border-color: var(--cell-border-color);
+    content: '';
+  }
 
   &.fixed-left::after {
     position: absolute;
     z-index: 3;
     top: 0;
     bottom: -1px;
-    right: 0;
-    width: 30px;
-    // border-left: 1px solid var(--cell-border-color);
-    content: '';
+    right: 0px;
+    border-left: 1px solid var(--cell-border-color);
     pointer-events: none;
     transform: translate(100%);
-    transition: box-shadow 0.3s;
-    // box-shadow: var(--cell-fixed-box-shadow-left);
+    content: '';
   }
 
-  &.fixed-right {
-    transform: translateX(1px);
+  &.last-fixed-left::after {
+    width: 30px;
+    transition: box-shadow 0.3s;
+    box-shadow: var(--cell-fixed-box-shadow-left);
   }
 
   &.fixed-right::after {
     position: absolute;
     top: 0;
-    bottom: -1px;
-    left: -1px;
-    width: 30px;
+    bottom: 0;
+    left: 0;
     border-right: 1px solid var(--cell-border-color);
     content: '';
     pointer-events: none;
     transform: translate(-100%);
+  }
+
+  &.first-fixed-right::after {
+    width: 30px;
     transition: box-shadow 0.3s;
     box-shadow: var(--cell-fixed-box-shadow-right);
   }
@@ -160,12 +174,12 @@ span.harvest-sheet-container:focus {
 }
 
 .harvest-sheet-container .harvest-sheet .cell.sheet-control {
-  border-right: 1px solid transparent;
+  border-right-color: transparent;
   background: var(--cell-background-color);
   color: var(--read-color);
 
   &.read-only {
-    border-right: 1px solid var(--cell-title-background-color);
+    // border-right: 1px solid var(--cell-title-background-color);
   }
 
   // position: relative !important;
@@ -183,7 +197,17 @@ span.harvest-sheet-container:focus {
 }
 
 .harvest-sheet-container .harvest-sheet .cell-title.sheet-control {
-  border-right: 1px solid var(--cell-title-background-color);
+  // border-right: 1px solid var(--cell-title-background-color);
+  &::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: -2px;
+    border-right: 1px solid var(--cell-title-background-color);
+    content: '';
+    pointer-events: none;
+    transform: translate(-100%);
+  }
 }
 
 .harvest-sheet-container .harvest-sheet .cell.cell-title {
@@ -302,7 +326,6 @@ span.harvest-sheet-container:focus {
       margin-right: 0;
     }
   }
-
 }
 
 .harvest-search-text {

package/dist/core/shell/draggableShell/index.d.ts

@@ -3,4 +3,6 @@ import type { SheetType } from "../../../type";
 import './index.less';
 export declare const DraggableShell: ({ columns, className, showGroup, showSelect, controlProps, controlWidth, }: SheetType.SheetShell) => import("react").FC<{
     children: React.ReactElement;
+    isScrolledOver: boolean;
+    isScrolledToEnd: boolean;
 }>;

package/dist/core/shell/draggableShell/index.js

@@ -26,7 +26,9 @@ export var DraggableShell = function DraggableShell(_ref) {
     _ref$controlWidth = _ref.controlWidth,
     controlWidth = _ref$controlWidth === void 0 ? 30 : _ref$controlWidth;
   var TableShell = function TableShell(_ref2) {
-    var children = _ref2.children;
+    var children = _ref2.children,
+      isScrolledOver = _ref2.isScrolledOver,
+      isScrolledToEnd = _ref2.isScrolledToEnd;
     var headRef = useRef(null);
     var downRef = useRef(null);
     var _useSetState = useSetState({}),
@@ -41,10 +43,49 @@ export var DraggableShell = function DraggableShell(_ref) {
     var widths = contextWidths || _widths;
     var hasControl = showGroup || showSelect;
     var offset = 1 + (hasControl ? 1 : 0);
+    var colItems = useMemo(function () {
+      var cols = [/*#__PURE__*/_jsx("col", {
+        className: classNames('sheet-control sheet-row-cursor'),
+        style: {
+          width: 0,
+          border: 'none'
+        }
+      }, "sheet-row-cursor")];
+      if (hasControl) {
+        cols.push( /*#__PURE__*/_jsx("col", {
+          className: classNames('sheet-control'),
+          style: {
+            width: controlWidth
+          }
+        }, "sheet-control"));
+      }
+      var i = 0;
+      columns.forEach(function (item, index) {
+        var _item$titleConfig, _item$dataIndex;
+        var currentWidth = item.width || 'unset';
+        if (((_item$titleConfig = item.titleConfig) === null || _item$titleConfig === void 0 ? void 0 : _item$titleConfig.colSpan) !== 0) {
+          currentWidth = widths[i] || item.width || 'unset';
+          i++;
+        }
+        cols.push( /*#__PURE__*/_jsx("col", {
+          className: classNames('cell'),
+          style: {
+            width: currentWidth,
+            border: 'none'
+          }
+        }, (_item$dataIndex = item.dataIndex) !== null && _item$dataIndex !== void 0 ? _item$dataIndex : index));
+      });
+      return cols;
+    }, [widths, hasControl, columns]);
     var thItems = useMemo(function () {
       var ths = [/*#__PURE__*/_jsx("th", {
         className: "cell cell-title read-only sheet-control sheet-row-cursor"
       }, -2)];
+      var positionArr = [{
+        isLastFixedLeft: false,
+        isFirstFixedRight: false,
+        fixPosition: 0
+      }];
       if (hasControl) {
         var _controlProps$group, _controlProps$check, _controlProps$check2, _controlProps$check3;
         ths.push( /*#__PURE__*/_jsxs("th", {
@@ -68,27 +109,55 @@ export var DraggableShell = function DraggableShell(_ref) {
             }
           })]
         }, "-1"));
+        positionArr.push({
+          isLastFixedLeft: false,
+          isFirstFixedRight: false,
+          fixPosition: 0
+        });
       }
+      var fixLeftPosition = 0;
+      var fixRightPosition = columns.reduce(function (pre, cur, index) {
+        if (cur.fixed === 'right') {
+          var positionIndex = hasControl ? index + 2 : index + 1;
+          return pre + colItems[positionIndex].props.style.width;
+        }
+        return pre + 0;
+      }, 0);
       columns.forEach(function (item, index) {
-        var _item$titleConfig, _item$titleConfig2, _item$titleConfig3, _item$dataIndex, _ref3;
-        ((_item$titleConfig = item.titleConfig) === null || _item$titleConfig === void 0 ? void 0 : _item$titleConfig.colSpan) !== 0 && ths.push( /*#__PURE__*/_jsx("th", {
-          className: classNames('cell', 'cell-title', 'read-only', item.fixed && 'fixed', item.fixed && "fixed-".concat(item.fixed), (_item$titleConfig2 = item.titleConfig) === null || _item$titleConfig2 === void 0 ? void 0 : _item$titleConfig2.className),
-          colSpan: (_item$titleConfig3 = item.titleConfig) === null || _item$titleConfig3 === void 0 ? void 0 : _item$titleConfig3.colSpan,
+        var _item$titleConfig2, _item$titleConfig3, _item$titleConfig4, _item$dataIndex2, _ref3;
+        var positionIndex = hasControl ? index + 2 : index + 1;
+        if (item.fixed === 'right') {
+          fixRightPosition -= colItems[positionIndex].props.style.width;
+        }
+        var isLastFixedLeft = item.fixed === 'left' && !columns.slice(index + 1).some(function (item) {
+          return item.fixed === 'left';
+        });
+        var isFirstFixedRight = item.fixed === 'right' && !columns.slice(0, index).some(function (item) {
+          return item.fixed === 'right';
+        });
+        positionArr.push({
+          isLastFixedLeft: isLastFixedLeft,
+          isFirstFixedRight: isFirstFixedRight,
+          fixPosition: item.fixed === 'right' ? fixRightPosition : fixLeftPosition
+        });
+        ((_item$titleConfig2 = item.titleConfig) === null || _item$titleConfig2 === void 0 ? void 0 : _item$titleConfig2.colSpan) !== 0 && ths.push( /*#__PURE__*/_jsx("th", {
+          className: classNames('cell', 'cell-title', 'read-only', item.fixed && 'fixed', item.fixed && "fixed-".concat(item.fixed), (_item$titleConfig3 = item.titleConfig) === null || _item$titleConfig3 === void 0 ? void 0 : _item$titleConfig3.className, isLastFixedLeft && isScrolledOver ? "last-fixed-left" : '', isFirstFixedRight && !isScrolledToEnd ? "first-fixed-right" : ''),
+          colSpan: (_item$titleConfig4 = item.titleConfig) === null || _item$titleConfig4 === void 0 ? void 0 : _item$titleConfig4.colSpan,
           onClick: function onClick(e) {
             if (item.fixed) return;
             var target = e.target;
             if (e.nativeEvent.offsetX <= target.offsetWidth - 8) {
-              var _item$titleConfig4;
+              var _item$titleConfig5;
               eventBus.emit('col-select', {
-                col: index + offset,
-                colSpan: (_item$titleConfig4 = item.titleConfig) === null || _item$titleConfig4 === void 0 ? void 0 : _item$titleConfig4.colSpan
+                col: hasControl ? index + 1 : index,
+                colSpan: (_item$titleConfig5 = item.titleConfig) === null || _item$titleConfig5 === void 0 ? void 0 : _item$titleConfig5.colSpan
               });
             }
           },
           style: {
             textAlign: (_ref3 = item.align) !== null && _ref3 !== void 0 ? _ref3 : 'unset',
-            left: item.fixed === 'left' ? 0 : 'unset',
-            right: item.fixed === 'right' ? 0 : 'unset'
+            left: item.fixed === 'left' ? fixLeftPosition : 'unset',
+            right: item.fixed === 'right' ? fixRightPosition : 'unset'
           },
           onMouseDown: function onMouseDown(e) {
             var target = e.target;
@@ -123,43 +192,16 @@ export var DraggableShell = function DraggableShell(_ref) {
             className: "value-viewer",
             children: typeof item.title === 'function' ? /*#__PURE__*/createElement(item.title) : item.title
           })
-        }, (_item$dataIndex = item.dataIndex) !== null && _item$dataIndex !== void 0 ? _item$dataIndex : index));
-      });
-      return ths;
-    }, [columns, offset]);
-    var colItems = useMemo(function () {
-      var cols = [/*#__PURE__*/_jsx("col", {
-        className: classNames('sheet-control sheet-row-cursor'),
-        style: {
-          width: 0,
-          border: 'none'
-        }
-      }, "sheet-row-cursor")];
-      if (hasControl) {
-        cols.push( /*#__PURE__*/_jsx("col", {
-          className: classNames('sheet-control'),
-          style: {
-            width: controlWidth
-          }
-        }, "sheet-control"));
-      }
-      var i = 0;
-      columns.forEach(function (item, index) {
-        var _item$titleConfig5, _item$dataIndex2;
-        var currentWidth = item.width || 'unset';
-        if (((_item$titleConfig5 = item.titleConfig) === null || _item$titleConfig5 === void 0 ? void 0 : _item$titleConfig5.colSpan) !== 0) {
-          currentWidth = widths[i] || item.width || 'unset';
-          i++;
-        }
-        cols.push( /*#__PURE__*/_jsx("col", {
-          className: classNames('cell'),
-          style: {
-            width: currentWidth
-          }
         }, (_item$dataIndex2 = item.dataIndex) !== null && _item$dataIndex2 !== void 0 ? _item$dataIndex2 : index));
+        if (item.fixed === 'left') {
+          fixLeftPosition += colItems[positionIndex].props.style.width;
+        }
       });
-      return cols;
-    }, [widths, hasControl, columns]);
+      setTimeout(function () {
+        eventBus.emit('change-fixed-position', positionArr);
+      }, 16);
+      return ths;
+    }, [columns, colItems, isScrolledOver, isScrolledToEnd]);
     useEffect(function () {
       var handleMouseUp = function handleMouseUp() {
         //结束宽度调整

package/dist/core/shell/tableShell.d.ts

@@ -3,4 +3,6 @@ import type { SheetType } from "../../type";
 import './draggableShell/index.less';
 export declare const TableShell: ({ columns, className, showGroup, showSelect, controlProps, controlWidth, }: SheetType.SheetShell) => import("react").FC<{
     children: React.ReactElement;
+    isScrolledOver: boolean;
+    isScrolledToEnd: boolean;
 }>;

package/dist/core/shell/tableShell.js

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
+import { useSheetEvent } from "../../hooks";
 import { classNames } from "../util";
 import { CheckViewer } from "../viewer/checkViewer";
 import { GroupViewer } from "../viewer/groupViewer";
 import "./draggableShell/index.less";
-import { useSheetEvent } from "../../hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -15,12 +15,38 @@ export var TableShell = function TableShell(_ref) {
     controlProps = _ref.controlProps,
     _ref$controlWidth = _ref.controlWidth,
     controlWidth = _ref$controlWidth === void 0 ? 30 : _ref$controlWidth;
-  var eventBus = useSheetEvent();
   var TableShell = function TableShell(_ref2) {
-    var children = _ref2.children;
+    var children = _ref2.children,
+      isScrolledOver = _ref2.isScrolledOver,
+      isScrolledToEnd = _ref2.isScrolledToEnd;
+    var eventBus = useSheetEvent();
+    var colItems = useMemo(function () {
+      var cols = [];
+      if (showGroup || showSelect) {
+        cols.push( /*#__PURE__*/_jsx("col", {
+          className: classNames('sheet-control'),
+          style: {
+            width: controlWidth,
+            border: 'none'
+          }
+        }, "sheet-control"));
+      }
+      columns.forEach(function (item, index) {
+        cols.push( /*#__PURE__*/_jsx("col", {
+          className: classNames('cell'),
+          style: {
+            width: item.width || 'unset',
+            border: 'none'
+          }
+        }, item.dataIndex || index));
+      });
+      return cols;
+    }, [columns, showGroup || showSelect, controlWidth]);
     var thItems = useMemo(function () {
       var ths = [];
-      if (showGroup || showSelect) {
+      var hasControl = showGroup || showSelect;
+      var positionArr = [];
+      if (hasControl) {
         var _controlProps$group, _controlProps$check, _controlProps$check2, _controlProps$check3;
         ths.push( /*#__PURE__*/_jsxs("th", {
           className: "cell cell-title read-only sheet-control",
@@ -43,11 +69,39 @@ export var TableShell = function TableShell(_ref) {
             }
           })]
         }, "-1"));
+        positionArr.push({
+          isLastFixedLeft: false,
+          isFirstFixedRight: false,
+          fixPosition: 0
+        });
       }
+      var fixLeftPosition = 0;
+      var fixRightPosition = columns.reduce(function (pre, cur, index) {
+        if (cur.fixed === 'right') {
+          var positionIndex = hasControl ? index + 1 : index;
+          return pre + colItems[positionIndex].props.style.width;
+        }
+        return pre + 0;
+      }, 0);
       columns.forEach(function (item, index) {
         var _item$titleConfig, _item$titleConfig2, _ref3;
+        var positionIndex = hasControl ? index + 1 : index;
+        if (item.fixed === 'right') {
+          fixRightPosition -= colItems[positionIndex].props.style.width;
+        }
+        var isLastFixedLeft = item.fixed === 'left' && !columns.slice(index + 1).some(function (item) {
+          return item.fixed === 'left';
+        });
+        var isFirstFixedRight = item.fixed === 'right' && !columns.slice(0, index).some(function (item) {
+          return item.fixed === 'right';
+        });
+        positionArr.push({
+          isLastFixedLeft: isLastFixedLeft,
+          isFirstFixedRight: isFirstFixedRight,
+          fixPosition: item.fixed === 'right' ? fixRightPosition : fixLeftPosition
+        });
         ((_item$titleConfig = item.titleConfig) === null || _item$titleConfig === void 0 ? void 0 : _item$titleConfig.colSpan) !== 0 && ths.push( /*#__PURE__*/_jsx("th", {
-          className: classNames('cell', 'cell-title', 'read-only', item.fixed && 'fixed', item.fixed && "fixed-".concat(item.fixed)),
+          className: classNames('cell', 'cell-title', 'read-only', item.fixed && 'fixed', item.fixed && "fixed-".concat(item.fixed), isLastFixedLeft && isScrolledOver ? "last-fixed-left" : '', isFirstFixedRight && !isScrolledToEnd ? "first-fixed-right" : ''),
           colSpan: (_item$titleConfig2 = item.titleConfig) === null || _item$titleConfig2 === void 0 ? void 0 : _item$titleConfig2.colSpan,
           onClick: function onClick() {
             eventBus.emit('col-select', {
@@ -57,37 +111,23 @@ export var TableShell = function TableShell(_ref) {
           style: {
             textAlign: (_ref3 = item.align) !== null && _ref3 !== void 0 ? _ref3 : 'unset',
             cursor: 'e-resizer',
-            left: item.fixed === 'left' ? 0 : 'unset',
-            right: item.fixed === 'right' ? 0 : 'unset'
+            left: item.fixed === 'left' ? fixLeftPosition : 'unset',
+            right: item.fixed === 'right' ? fixRightPosition : 'unset'
           },
           children: /*#__PURE__*/_jsx("span", {
             className: "value-viewer",
             children: item.title
           })
         }, item.dataIndex || index));
+        if (item.fixed === 'left') {
+          fixLeftPosition += colItems[positionIndex].props.style.width;
+        }
       });
+      setTimeout(function () {
+        eventBus.emit('change-fixed-position', positionArr);
+      }, 16);
       return ths;
-    }, [columns, showGroup || showSelect, controlProps]);
-    var colItems = useMemo(function () {
-      var cols = [];
-      if (showGroup || showSelect) {
-        cols.push( /*#__PURE__*/_jsx("col", {
-          className: classNames('sheet-control'),
-          style: {
-            width: controlWidth
-          }
-        }, "sheet-control"));
-      }
-      columns.forEach(function (item, index) {
-        cols.push( /*#__PURE__*/_jsx("col", {
-          className: classNames('cell'),
-          style: {
-            width: item.width || 'unset'
-          }
-        }, item.dataIndex || index));
-      });
-      return cols;
-    }, [columns, showGroup || showSelect, controlWidth]);
+    }, [columns, showGroup || showSelect, controlProps, isScrolledOver, isScrolledToEnd]);
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsxs("table", {
         className: classNames('header', 'harvest-sheet', className),

package/dist/core/table/useGroupConfig.js

@@ -164,6 +164,7 @@ export var formatGroupData = function formatGroupData(param) {
           className: !(((_colInfo$cellConfig = colInfo.cellConfig) === null || _colInfo$cellConfig === void 0 ? void 0 : _colInfo$cellConfig.className) instanceof Function) ? (_colInfo$cellConfig2 = colInfo.cellConfig) === null || _colInfo$cellConfig2 === void 0 ? void 0 : _colInfo$cellConfig2.className : (_colInfo$cellConfig3 = colInfo.cellConfig) === null || _colInfo$cellConfig3 === void 0 ? void 0 : _colInfo$cellConfig3.className(value, itemRow, currentIndex),
           dataIndex: colInfo.dataIndex,
           key: colInfo.key,
+          allowClear: colInfo.allowClear,
           col: col
         });
       });

package/dist/core/table/useRowSelection.js

@@ -81,6 +81,7 @@ export var formatSelectionData = function formatSelectionData(param) {
         row: row,
         col: col,
         dataIndex: colInfo.dataIndex,
+        allowClear: colInfo.allowClear,
         key: colInfo.key
       });
     });

package/dist/example/antComponent.js

@@ -96,8 +96,8 @@ var columns = [{
   editor: Precision2Number,
   readonly: function readonly(value, record, row) {
     return row === 1;
-  }
-  // fixed: 'left',
+  },
+  fixed: 'left'
 }, {
   title: 'price',
   width: 100,
@@ -106,8 +106,8 @@ var columns = [{
   editor: Precision2MoneyEditor,
   readonly: function readonly(value, record, row) {
     return row === 1;
-  }
-  // fixed: 'left',
+  },
+  fixed: 'left'
 }, {
   title: 'date',
   width: 150,
@@ -120,7 +120,10 @@ var columns = [{
   width: 200,
   dataIndex: 'select',
   render: getSelectorViewer(SelectorOptions),
-  editor: getSelectEditor(SelectorOptions, 'label')
+  editor: getSelectEditor(SelectorOptions, 'label', undefined, {
+    allowClear: false
+  }),
+  allowClear: false
 }, {
   title: 'Column 2',
   width: 200,
@@ -161,12 +164,14 @@ var columns = [{
   title: 'Column 7',
   width: 200,
   dataIndex: 'address6',
-  key: '7'
+  key: '7',
+  fixed: 'right'
 }, {
   title: 'Column 8',
   width: 200,
   dataIndex: 'address7',
-  key: '8'
+  key: '8',
+  fixed: 'right'
 }, {
   title: 'Action',
   align: SheetType.CellAlign.center,
@@ -193,7 +198,14 @@ var data = [{
   address2: '打开对话框2',
   age: 2,
   select: '222222',
-  address: 'London Park'
+  address: 'London Park',
+  children: [{
+    key: '11',
+    name: 'John Brown',
+    date: '2020-01-01',
+    open: true,
+    age: 1
+  }]
 }];
 var App = function App() {
   var _useState = useState(data),
@@ -270,7 +282,7 @@ var App = function App() {
     freePaste: true,
     draggable: true,
     sheetInstance: sheetInstance,
-    columns: antColumns,
+    columns: columns,
     dataSource: state,
     scroll: {
       x: '100%'

package/dist/type/sheet.d.ts

@@ -29,6 +29,14 @@ export type Cell = {
     align?: CellAlign;
     fixed?: Omit<CellAlign, 'center'>;
     value?: string | number | null;
+    allowClear?: boolean;
+};
+export type FixedInfo = {
+    isFirstFixedRight: boolean;
+    isLastFixedLeft: boolean;
+    fixPosition: number;
+    isScrolledOver?: boolean;
+    isScrolledToEnd?: boolean;
 };
 export type CellViewerProps = {
     value: unknown;
@@ -175,6 +183,7 @@ export type CellProps = {
     dataEditor?: React.ElementType;
     valueViewer?: React.ElementType;
     attributesRenderer?: AttributesRenderer;
+    cellFixedInfo: SheetType.FixedInfo;
 };
 export type SearchState = {
     showSearch: boolean;
@@ -216,6 +225,7 @@ export type UpdateStateType = {
         confirm?: boolean;
     };
     cellChangeHandler: (cells: CellData[], additions?: CellData[]) => void;
+    fixedInfo: SheetType.FixedInfo[];
 } & SearchState;
 export type UpdateFocus = (start: CellPosition, end: CellPosition) => void;
 export type Options<T = any> = {

package/dist/type/sheetTable.d.ts

@@ -34,6 +34,7 @@ export type ColumnProps = {
     key?: string;
     editable?: boolean | RecordRowMap<boolean>;
     readonly?: boolean | RecordRowMap<boolean>;
+    allowClear?: boolean;
     render?: SheetType.CellViewer;
     editor?: SheetType.CellEditor;
     searchKey?: (value: unknown, record: Record<string, unknown>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.1.68",
+  "version": "0.1.69",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",