@rainbow-oh/yee-c 0.7.0 → 0.8.0

package/dist/cjs/Form/form-store.d.ts

@@ -28,7 +28,8 @@ export declare class FormStore {
     clearFields: (name?: Name[]) => void;
     validateField: (name: Name, trigger?: TRIGGER) => Promise<ValidateMessage[]>;
     validateFields: (names?: string[], trigger?: TRIGGER) => Promise<ValidateMessage[]>;
-    refreshField: (newStore?: Store) => void;
+    private getRelatedFieldNames;
+    refreshField: (newStore?: Store, relatedFieldNames?: Name[]) => void;
     subscribe: (namePath?: NamePath, callback?: () => void) => (() => void);
     private notifyWatchers;
     registerGroupEntity: (id: string, entity: GroupEntity) => (() => void);

package/dist/cjs/Form/form-store.js

@@ -80,6 +80,7 @@ function move(array, from, to) {
   return result;
 }
 var GLOBAL_WATCH_KEY = "__ALL__";
+var isRelatedNamePath = (first, second) => first === second || first.startsWith(`${second}.`) || second.startsWith(`${first}.`);
 var FormStore = class {
   constructor() {
     this.store = {};
@@ -170,10 +171,12 @@ var FormStore = class {
           }
         });
       }
+      const changedKeys = Object.keys(newStore);
+      const relatedFieldNames = this.getRelatedFieldNames(changedKeys);
       if (trigger === "onChange" || trigger === "onBlur" || trigger === "onSubmit") {
-        void this.validateFields(Object.keys(newStore), trigger);
+        void this.validateFields(relatedFieldNames, trigger);
       }
-      this.refreshField(newStore);
+      this.refreshField(newStore, relatedFieldNames);
     };
     this.resetFields = (name) => {
       var _a, _b;
@@ -281,16 +284,20 @@ var FormStore = class {
       });
       return err;
     });
-    this.refreshField = (newStore) => {
+    this.getRelatedFieldNames = (changedKeys) => Array.from(this.fieldMap.keys()).filter(
+      (fieldName) => changedKeys.some(
+        (changedKey) => isRelatedNamePath(String(fieldName), changedKey)
+      )
+    );
+    this.refreshField = (newStore, relatedFieldNames) => {
       if (newStore) {
-        const keys = Object.keys(newStore);
-        keys.forEach((key) => {
-          const entity = this.fieldMap.get(key);
-          if (entity) {
-            entity == null ? void 0 : entity.onStoreChange();
-          }
-          this.notifyWatchers(key);
+        const changedKeys = Object.keys(newStore);
+        const fieldNames = relatedFieldNames != null ? relatedFieldNames : this.getRelatedFieldNames(changedKeys);
+        fieldNames.forEach((fieldName) => {
+          var _a;
+          (_a = this.fieldMap.get(fieldName)) == null ? void 0 : _a.onStoreChange();
         });
+        this.notifyWatchers(changedKeys);
       } else {
         this.fieldEntities.forEach((entity) => {
           entity == null ? void 0 : entity.onStoreChange();
@@ -308,15 +315,23 @@ var FormStore = class {
       }
       this.watchers.get(key).add(callback);
       return () => {
-        var _a;
-        (_a = this.watchers.get(key)) == null ? void 0 : _a.delete(callback);
+        const watchers = this.watchers.get(key);
+        watchers == null ? void 0 : watchers.delete(callback);
+        if ((watchers == null ? void 0 : watchers.size) === 0) {
+          this.watchers.delete(key);
+        }
       };
     };
-    this.notifyWatchers = (changedKey) => {
-      var _a, _b;
-      if (changedKey) {
-        (_a = this.watchers.get(changedKey)) == null ? void 0 : _a.forEach((cb) => cb());
-        (_b = this.watchers.get(GLOBAL_WATCH_KEY)) == null ? void 0 : _b.forEach((cb) => cb());
+    this.notifyWatchers = (changedKeys) => {
+      if (changedKeys) {
+        const keys = Array.isArray(changedKeys) ? changedKeys : [changedKeys];
+        const callbacks = /* @__PURE__ */ new Set();
+        this.watchers.forEach((watchers, watchedKey) => {
+          if (watchedKey === GLOBAL_WATCH_KEY || keys.some((changedKey) => isRelatedNamePath(watchedKey, changedKey))) {
+            watchers.forEach((callback) => callbacks.add(callback));
+          }
+        });
+        callbacks.forEach((callback) => callback());
       } else {
         this.watchers.forEach((set) => set.forEach((cb) => cb()));
       }

package/dist/cjs/Table/hooks/useColumns.js

@@ -76,7 +76,7 @@ function useColumns({
     const tree = (0, import_header.injectSelectionExpand)(base, rowSelection, expandable);
     const leaves = (0, import_header.flattenLeafColumns)(tree);
     const wraped = (0, import_util.handleColumns)(leaves);
-    const rows = (0, import_header.parseHeaderRows)(tree);
+    const rows = (0, import_header.parseHeaderRows)(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
   }, [childColumns, columns, shouldRenderSelection, shouldRenderExpand]);
   return {

package/dist/cjs/Table/style/index.less

@@ -49,6 +49,12 @@
           background-color: var(--yee-table-head-cell-split-line-color, #eee);
         }
       }
+
+      &-fixed-left,
+      &-fixed-right {
+        position: sticky;
+        z-index: 1;
+      }
     }
 
     &-cell {
@@ -84,6 +90,16 @@
     &-wrapper {
       overflow: auto;
       width: 100%;
+
+      &-scroll-left @{pls}-cell-fixed-left-last {
+        box-shadow: 6px 0 6px -4px
+          var(--yee-table-fixed-left-after-bs-color);
+      }
+
+      &-scroll-right @{pls}-cell-fixed-right-first {
+        box-shadow: -6px 0 6px -4px
+          var(--yee-table-fixed-right-after-bs-color);
+      }
     }
 
     > table {
@@ -101,10 +117,18 @@
     }
   }
 
+  &-row {
+    background-color: var(--yee-table-row-bg-color);
+  }
+
   &-even-row {
     background-color: var(--yee-table-even-row-bg-color);
   }
 
+  &-odd-row {
+    background-color: var(--yee-table-odd-row-bg-color);
+  }
+
   &-column-sorters {
     display: inline-flex;
     align-items: center;
@@ -137,7 +161,7 @@
     &-fixed-left,
     &-fixed-right {
       position: sticky;
-      background-color: inherit;
+      background-color: var(--yee-table-fixed-column-bg-color);
     }
   }
 
@@ -163,17 +187,17 @@
     }
   }
 
-  &-odd-row {
-    > @{pls}-cell {
-      background-color: var(--yee-table-odd-row-bg-color);
-    }
-  }
+  // &-odd-row {
+  //   > @{pls}-cell {
+  //     background-color: var(--yee-table-odd-row-bg-color);
+  //   }
+  // }
 
-  &-even-row {
-    > @{pls}-cell {
-      background-color: var(--yee-table-even-row-bg-color);
-    }
-  }
+  // &-even-row {
+  //   > @{pls}-cell {
+  //     background-color: var(--yee-table-even-row-bg-color);
+  //   }
+  // }
 
   &-footer {
     display: flex;

package/dist/cjs/Table/table.js

@@ -189,6 +189,28 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     onChange: onSelectionChange
   } = (0, import_useSelection.default)({ pageData, dataSource, getRowKey, rowSelection, allKeys });
   const prevSortersRef = (0, import_react.useRef)({});
+  const contentWrapperRef = (0, import_react.useRef)(null);
+  const contentRef = (0, import_react.useRef)(null);
+  const [horizontalScroll, setHorizontalScroll] = import_react.default.useState({
+    left: false,
+    right: false
+  });
+  const updateHorizontalScroll = import_react.default.useCallback(() => {
+    const wrapper = contentWrapperRef.current;
+    const content = contentRef.current;
+    if (!wrapper || !content)
+      return;
+    const scrollContainer = content.scrollWidth - content.clientWidth > 1 ? content : wrapper;
+    const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
+    const hasHorizontalScroll = maxScrollLeft > 1;
+    const next = {
+      left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
+      right: hasHorizontalScroll && scrollContainer.scrollLeft < maxScrollLeft - 1
+    };
+    setHorizontalScroll(
+      (current2) => current2.left === next.left && current2.right === next.right ? current2 : next
+    );
+  }, []);
   const onFilter = import_react.default.useCallback(
     (...args) => {
       onFilterInternal(...args);
@@ -229,6 +251,21 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
       return;
     }
   }, [sorters, current, pageSize, pageData, sortedData, onChange]);
+  (0, import_react.useEffect)(() => {
+    updateHorizontalScroll();
+    const wrapper = contentWrapperRef.current;
+    const content = contentRef.current;
+    if (!wrapper || !content)
+      return void 0;
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", updateHorizontalScroll);
+      return () => window.removeEventListener("resize", updateHorizontalScroll);
+    }
+    const resizeObserver = new ResizeObserver(updateHorizontalScroll);
+    resizeObserver.observe(wrapper);
+    resizeObserver.observe(content);
+    return () => resizeObserver.disconnect();
+  }, [updateHorizontalScroll, wrapedColumns, pageData, scroll == null ? void 0 : scroll.x]);
   const renderHeader = () => {
     return /* @__PURE__ */ import_react.default.createElement(
       import_header.default,
@@ -305,17 +342,30 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
       },
       /* @__PURE__ */ import_react.default.createElement("table", __spreadValues({}, tableProps), /* @__PURE__ */ import_react.default.createElement(import_col_group.default, { columns: wrapedColumns }), renderTHeader(), renderTBody(), renderTFooter())
     );
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        className: (0, import_clsx.default)(`${prefixCls}-content`, {
-          [`${prefixCls}-${size}-size`]: size,
-          [`${prefixCls}-fixed-header`]: scroll == null ? void 0 : scroll.y
+        ref: contentWrapperRef,
+        className: (0, import_clsx.default)(`${prefixCls}-content-wrapper`, {
+          [`${prefixCls}-content-wrapper-scroll-left`]: horizontalScroll.left,
+          [`${prefixCls}-content-wrapper-scroll-right`]: horizontalScroll.right
         }),
-        style: { height: scroll == null ? void 0 : scroll.y, width: scroll == null ? void 0 : scroll.x }
+        onScroll: updateHorizontalScroll
       },
-      table2
-    ));
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          ref: contentRef,
+          className: (0, import_clsx.default)(`${prefixCls}-content`, {
+            [`${prefixCls}-${size}-size`]: size,
+            [`${prefixCls}-fixed-header`]: scroll == null ? void 0 : scroll.y
+          }),
+          style: { height: scroll == null ? void 0 : scroll.y, width: scroll == null ? void 0 : scroll.x },
+          onScroll: updateHorizontalScroll
+        },
+        table2
+      )
+    );
   };
   const renderFooter = () => {
     return /* @__PURE__ */ import_react.default.createElement(

package/dist/cjs/Table/tbody/cell.js

@@ -95,7 +95,7 @@ var TableCell = (props) => {
       {
         [`${prefixCls}-cell-fixed-${fixed}`]: fixed,
         [`${prefixCls}-cell-fixed-${fixed}-first`]: isFixedRightFirst,
-        [`${prefixCls}-fixed-${fixed}-last`]: isFixedLeftLast
+        [`${prefixCls}-cell-fixed-${fixed}-last`]: isFixedLeftLast
       },
       className
     );

package/dist/cjs/Table/util/header.d.ts

@@ -11,10 +11,12 @@ export declare function flattenLeafColumns(columns: WrapedColumnProps[], parentF
  *
  * - Pass 1 (DFS): place each column into the row matching its depth; a group's
  *   colSpan equals the sum of its children's colSpans.
+ * - Fixed metadata from the resolved leaf columns is reused by leaf cells and
+ *   aggregated for group cells whose descendants share the same fixed side.
  * - Pass 2: leaf cells (no sub-columns) get rowSpan = rowCount - rowIndex so
  *   they stretch down to the last header row; group cells keep rowSpan = 1.
  */
-export declare function parseHeaderRows(rootColumns: WrapedColumnProps[]): HeaderCell[][];
+export declare function parseHeaderRows(rootColumns: WrapedColumnProps[], resolvedLeafColumns?: WrapedColumnProps[]): HeaderCell[][];
 /**
  * Inject selection / expand columns into the top level of the column tree.
  * `index` is a 1-based position among the top-level columns.

package/dist/cjs/Table/util/header.js

@@ -52,21 +52,48 @@ function flattenLeafColumns(columns, parentFixed) {
     return [...list, __spreadProps(__spreadValues({}, column), { fixed })];
   }, []);
 }
-function parseHeaderRows(rootColumns) {
+function parseHeaderRows(rootColumns, resolvedLeafColumns = flattenLeafColumns(rootColumns)) {
   const rows = [];
+  let leafIndex = 0;
   const fillRowCells = (columns, rowIndex) => {
     rows[rowIndex] = rows[rowIndex] || [];
     let colSpanTotal = 0;
-    columns.filter(Boolean).forEach((column) => {
+    columns.filter(Boolean).forEach((sourceColumn) => {
+      var _a, _b;
+      let column = sourceColumn;
+      const subColumns = sourceColumn.children;
+      const leafStartIndex = leafIndex;
       const cell = {
         column,
         colSpan: 1,
         rowSpan: 1
       };
-      const subColumns = column.children;
       if (subColumns && subColumns.length > 0) {
         cell.colSpan = fillRowCells(subColumns, rowIndex + 1);
         cell.hasSubColumns = true;
+        const groupLeaves = resolvedLeafColumns.slice(
+          leafStartIndex,
+          leafIndex
+        );
+        const fixed = (_a = groupLeaves[0]) == null ? void 0 : _a.fixed;
+        const isFixedGroup = (fixed === "left" || fixed === "right") && groupLeaves.every((leaf) => leaf.fixed === fixed);
+        if (isFixedGroup) {
+          const offsetLeaf = fixed === "left" ? groupLeaves[0] : groupLeaves[groupLeaves.length - 1];
+          const boundaryLeaf = fixed === "left" ? groupLeaves[groupLeaves.length - 1] : groupLeaves[0];
+          column = __spreadProps(__spreadValues({}, sourceColumn), {
+            fixed,
+            style: __spreadProps(__spreadValues({}, sourceColumn.style), {
+              [fixed]: (_b = offsetLeaf.style) == null ? void 0 : _b[fixed]
+            }),
+            isFixedLeftLast: fixed === "left" && boundaryLeaf.isFixedLeftLast,
+            isFixedRightFirst: fixed === "right" && boundaryLeaf.isFixedRightFirst
+          });
+          cell.column = column;
+        }
+      } else {
+        column = resolvedLeafColumns[leafIndex] || sourceColumn;
+        cell.column = column;
+        leafIndex += 1;
       }
       rows[rowIndex].push(cell);
       colSpanTotal += cell.colSpan;

package/dist/cjs/style/color.css

@@ -848,6 +848,7 @@
   --yee-table-thead-stripe-borderbottom-color: var(
     --yee-table-thead-borderbottom-color
   );
+  --yee-table-row-bg-color: var(--yee-color-bg-container);
   --yee-table-odd-row-bg-color: var(--yee-color-bg-container);
   --yee-table-even-row-bg-color: var(--yee-color-bg-head);
   --yee-table-elevated-thead-stripe-borderbottom-color: var(
@@ -870,6 +871,7 @@
   --yee-table-head-filter-active-color: var(--yee-primary-color);
   --yee-table-fixed-left-after-bs-color: var(--yee-box-shadow-color);
   --yee-table-fixed-right-after-bs-color: var(--yee-box-shadow-color);
+  --yee-table-fixed-column-bg-color: inherit;
   --yee-table-filter-list-bg-color: var(--yee-color-bg-elevated);
   --yee-table-tbody-tr-expanded-bg-color: var(--yee-color-bg-container);
   --yee-table-elevated-tbody-tr-expanded-bg-color: var(

package/dist/cjs/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-21T08:16:43.112Z
+ * Generated on 2026-07-22T03:22:12.652Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/cjs/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-21T08:16:43.112Z
+ * Generated on 2026-07-22T03:22:12.652Z
  */
 
 /* ========== color.css ========== */
@@ -855,6 +855,7 @@
   --yee-table-thead-stripe-borderbottom-color: var(
     --yee-table-thead-borderbottom-color
   );
+  --yee-table-row-bg-color: var(--yee-color-bg-container);
   --yee-table-odd-row-bg-color: var(--yee-color-bg-container);
   --yee-table-even-row-bg-color: var(--yee-color-bg-head);
   --yee-table-elevated-thead-stripe-borderbottom-color: var(
@@ -877,6 +878,7 @@
   --yee-table-head-filter-active-color: var(--yee-primary-color);
   --yee-table-fixed-left-after-bs-color: var(--yee-box-shadow-color);
   --yee-table-fixed-right-after-bs-color: var(--yee-box-shadow-color);
+  --yee-table-fixed-column-bg-color: inherit;
   --yee-table-filter-list-bg-color: var(--yee-color-bg-elevated);
   --yee-table-tbody-tr-expanded-bg-color: var(--yee-color-bg-container);
   --yee-table-elevated-tbody-tr-expanded-bg-color: var(

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.7.0";
+export declare const version = "0.8.0";

package/dist/cjs/version.js

@@ -22,7 +22,7 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-var version = "0.7.0";
+var version = "0.8.0";
 if (typeof window !== "undefined") {
   window.__yee_c_version__ = version;
 }

package/dist/esm/Form/form-store.d.ts

@@ -28,7 +28,8 @@ export declare class FormStore {
     clearFields: (name?: Name[]) => void;
     validateField: (name: Name, trigger?: TRIGGER) => Promise<ValidateMessage[]>;
     validateFields: (names?: string[], trigger?: TRIGGER) => Promise<ValidateMessage[]>;
-    refreshField: (newStore?: Store) => void;
+    private getRelatedFieldNames;
+    refreshField: (newStore?: Store, relatedFieldNames?: Name[]) => void;
     subscribe: (namePath?: NamePath, callback?: () => void) => (() => void);
     private notifyWatchers;
     registerGroupEntity: (id: string, entity: GroupEntity) => (() => void);

package/dist/esm/Form/form-store.js

@@ -34,6 +34,9 @@ function _move(array, from, to) {
   return result;
 }
 var GLOBAL_WATCH_KEY = '__ALL__';
+var isRelatedNamePath = function isRelatedNamePath(first, second) {
+  return first === second || first.startsWith("".concat(second, ".")) || second.startsWith("".concat(first, "."));
+};
 export var FormStore = /*#__PURE__*/function () {
   function FormStore() {
     var _this = this;
@@ -136,13 +139,15 @@ export var FormStore = /*#__PURE__*/function () {
           }
         });
       }
+      var changedKeys = Object.keys(newStore);
+      var relatedFieldNames = _this.getRelatedFieldNames(changedKeys);
 
       // Validate on onChange and onBlur (async — fire-and-forget so setFieldsValue
       // stays synchronous for its callers; results surface via onStoreChange).
       if (trigger === 'onChange' || trigger === 'onBlur' || trigger === 'onSubmit') {
-        void _this.validateFields(Object.keys(newStore), trigger);
+        void _this.validateFields(relatedFieldNames, trigger);
       }
-      _this.refreshField(newStore);
+      _this.refreshField(newStore, relatedFieldNames);
     });
     _defineProperty(this, "resetFields", function (name) {
       var _this$callbacks4, _this$callbacks4$onRe;
@@ -322,16 +327,22 @@ export var FormStore = /*#__PURE__*/function () {
         }
       }, _callee2);
     })));
-    _defineProperty(this, "refreshField", function (newStore) {
+    _defineProperty(this, "getRelatedFieldNames", function (changedKeys) {
+      return Array.from(_this.fieldMap.keys()).filter(function (fieldName) {
+        return changedKeys.some(function (changedKey) {
+          return isRelatedNamePath(String(fieldName), changedKey);
+        });
+      });
+    });
+    _defineProperty(this, "refreshField", function (newStore, relatedFieldNames) {
       if (newStore) {
-        var keys = Object.keys(newStore);
-        keys.forEach(function (key) {
-          var entity = _this.fieldMap.get(key);
-          if (entity) {
-            entity === null || entity === void 0 || entity.onStoreChange();
-          }
-          _this.notifyWatchers(key);
+        var changedKeys = Object.keys(newStore);
+        var fieldNames = relatedFieldNames !== null && relatedFieldNames !== void 0 ? relatedFieldNames : _this.getRelatedFieldNames(changedKeys);
+        fieldNames.forEach(function (fieldName) {
+          var _this$fieldMap$get;
+          (_this$fieldMap$get = _this.fieldMap.get(fieldName)) === null || _this$fieldMap$get === void 0 || _this$fieldMap$get.onStoreChange();
         });
+        _this.notifyWatchers(changedKeys);
       } else {
         _this.fieldEntities.forEach(function (entity) {
           entity === null || entity === void 0 || entity.onStoreChange();
@@ -347,18 +358,28 @@ export var FormStore = /*#__PURE__*/function () {
       }
       _this.watchers.get(key).add(callback);
       return function () {
-        var _this$watchers$get;
-        (_this$watchers$get = _this.watchers.get(key)) === null || _this$watchers$get === void 0 || _this$watchers$get.delete(callback);
+        var watchers = _this.watchers.get(key);
+        watchers === null || watchers === void 0 || watchers.delete(callback);
+        if ((watchers === null || watchers === void 0 ? void 0 : watchers.size) === 0) {
+          _this.watchers.delete(key);
+        }
       };
     });
-    _defineProperty(this, "notifyWatchers", function (changedKey) {
-      if (changedKey) {
-        var _this$watchers$get2, _this$watchers$get3;
-        (_this$watchers$get2 = _this.watchers.get(changedKey)) === null || _this$watchers$get2 === void 0 || _this$watchers$get2.forEach(function (cb) {
-          return cb();
+    _defineProperty(this, "notifyWatchers", function (changedKeys) {
+      if (changedKeys) {
+        var keys = Array.isArray(changedKeys) ? changedKeys : [changedKeys];
+        var callbacks = new Set();
+        _this.watchers.forEach(function (watchers, watchedKey) {
+          if (watchedKey === GLOBAL_WATCH_KEY || keys.some(function (changedKey) {
+            return isRelatedNamePath(watchedKey, changedKey);
+          })) {
+            watchers.forEach(function (callback) {
+              return callbacks.add(callback);
+            });
+          }
         });
-        (_this$watchers$get3 = _this.watchers.get(GLOBAL_WATCH_KEY)) === null || _this$watchers$get3 === void 0 || _this$watchers$get3.forEach(function (cb) {
-          return cb();
+        callbacks.forEach(function (callback) {
+          return callback();
         });
       } else {
         _this.watchers.forEach(function (set) {

package/dist/esm/Table/hooks/useColumns.js

@@ -37,7 +37,7 @@ export default function useColumns(_ref) {
       var tree = injectSelectionExpand(base, rowSelection, expandable);
       var leaves = flattenLeafColumns(tree);
       var wraped = handleColumns(leaves);
-      var rows = parseHeaderRows(tree);
+      var rows = parseHeaderRows(tree, wraped);
       return {
         wrapedColumns: wraped,
         headerRows: rows

package/dist/esm/Table/style/index.less

@@ -49,6 +49,12 @@
           background-color: var(--yee-table-head-cell-split-line-color, #eee);
         }
       }
+
+      &-fixed-left,
+      &-fixed-right {
+        position: sticky;
+        z-index: 1;
+      }
     }
 
     &-cell {
@@ -84,6 +90,16 @@
     &-wrapper {
       overflow: auto;
       width: 100%;
+
+      &-scroll-left @{pls}-cell-fixed-left-last {
+        box-shadow: 6px 0 6px -4px
+          var(--yee-table-fixed-left-after-bs-color);
+      }
+
+      &-scroll-right @{pls}-cell-fixed-right-first {
+        box-shadow: -6px 0 6px -4px
+          var(--yee-table-fixed-right-after-bs-color);
+      }
     }
 
     > table {
@@ -101,10 +117,18 @@
     }
   }
 
+  &-row {
+    background-color: var(--yee-table-row-bg-color);
+  }
+
   &-even-row {
     background-color: var(--yee-table-even-row-bg-color);
   }
 
+  &-odd-row {
+    background-color: var(--yee-table-odd-row-bg-color);
+  }
+
   &-column-sorters {
     display: inline-flex;
     align-items: center;
@@ -137,7 +161,7 @@
     &-fixed-left,
     &-fixed-right {
       position: sticky;
-      background-color: inherit;
+      background-color: var(--yee-table-fixed-column-bg-color);
     }
   }
 
@@ -163,17 +187,17 @@
     }
   }
 
-  &-odd-row {
-    > @{pls}-cell {
-      background-color: var(--yee-table-odd-row-bg-color);
-    }
-  }
+  // &-odd-row {
+  //   > @{pls}-cell {
+  //     background-color: var(--yee-table-odd-row-bg-color);
+  //   }
+  // }
 
-  &-even-row {
-    > @{pls}-cell {
-      background-color: var(--yee-table-even-row-bg-color);
-    }
-  }
+  // &-even-row {
+  //   > @{pls}-cell {
+  //     background-color: var(--yee-table-even-row-bg-color);
+  //   }
+  // }
 
   &-footer {
     display: flex;