@rainbow-oh/yee-c 0.8.15 → 0.8.16

package/dist/cjs/Search/search.js

@@ -274,7 +274,7 @@ var Search = import_react.default.forwardRef(
           role: "searchbox",
           "aria-autocomplete": hasPopup ? "list" : void 0,
           "aria-controls": hasPopup && open ? listboxId : void 0,
-          "aria-activedescendant": hasPopup && open && focusedKey != null ? String(focusedKey) : void 0
+          "aria-activedescendant": hasPopup && open && focusedKey !== null ? String(focusedKey) : void 0
         })
       ),
       loading ? /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { variant: "ring", size: "small", "aria-label": "Loading" }) : renderSuffix()

package/dist/cjs/Table/demo/fixed.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Table/demo/fixed.js

@@ -0,0 +1,123 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Table/demo/fixed.tsx
+var fixed_exports = {};
+__export(fixed_exports, {
+  default: () => fixed_default
+});
+module.exports = __toCommonJS(fixed_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var columns = [
+  {
+    title: "Name",
+    dataIndex: "name",
+    key: "name",
+    fixed: "left",
+    width: 140
+  },
+  {
+    title: "Age",
+    dataIndex: "age",
+    key: "age",
+    fixed: "left",
+    width: 100
+  },
+  {
+    title: "Address",
+    dataIndex: "address",
+    key: "address",
+    width: 240
+  },
+  {
+    title: "Company",
+    dataIndex: "company",
+    key: "company",
+    width: 180
+  },
+  {
+    title: "Department",
+    dataIndex: "department",
+    key: "department",
+    width: 180
+  },
+  {
+    title: "Email",
+    dataIndex: "email",
+    key: "email",
+    width: 240
+  },
+  {
+    title: "Action",
+    key: "action",
+    fixed: "right",
+    width: 100,
+    render: (record) => /* @__PURE__ */ import_react.default.createElement("a", { onClick: () => console.log(record) }, "View")
+  }
+];
+var dataSource = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    address: "New York No. 1 Lake Park",
+    company: "Acme Inc.",
+    department: "Engineering",
+    email: "john.brown@example.com"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 42,
+    address: "London No. 1 Lake Park",
+    company: "Globex",
+    department: "Marketing",
+    email: "jim.green@example.com"
+  },
+  {
+    key: "3",
+    name: "Joe Black",
+    age: 28,
+    address: "Sidney No. 1 Lake Park",
+    company: "Initech",
+    department: "Product",
+    email: "joe.black@example.com"
+  }
+];
+var fixed_default = () => /* @__PURE__ */ import_react.default.createElement(
+  import_yee_c.Table,
+  {
+    columns,
+    dataSource,
+    rowKey: "key",
+    pagination: false,
+    scroll: { x: 1180 },
+    tableLayout: "fixed"
+  }
+);

package/dist/cjs/Table/hooks/useColumns.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { ColumnProps, ExpandableType, RowSelectionType, WrapedColumnProps } from '../interface';
-export default function useColumns({ children, columns, rowSelection, expandable, }: {
+export default function useColumns({ children, columns, rowSelection, expandable, measuredColumnWidths, }: {
     children?: React.ReactElement<ColumnProps> | React.ReactElement<ColumnProps>[];
     columns: ColumnProps[];
     rowSelection?: RowSelectionType;
     expandable?: ExpandableType;
+    measuredColumnWidths?: number[];
 }): {
     wrapedColumns: WrapedColumnProps[];
     headerRows: import("../interface").HeaderCell[][];

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

@@ -63,7 +63,8 @@ function useColumns({
   children,
   columns,
   rowSelection,
-  expandable
+  expandable,
+  measuredColumnWidths
 }) {
   const childColumns = (0, import_react.useMemo)(() => {
     return children ? getColumnsFromChild(children) : null;
@@ -72,10 +73,10 @@ function useColumns({
     const base = (0, import_deepClone.default)(childColumns || columns || []) || [];
     const tree = (0, import_header.injectSelectionExpand)(base, rowSelection, expandable);
     const leaves = (0, import_header.flattenLeafColumns)(tree);
-    const wraped = (0, import_util.handleColumns)(leaves);
+    const wraped = (0, import_util.handleColumns)(leaves, measuredColumnWidths);
     const rows = (0, import_header.parseHeaderRows)(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
-  }, [childColumns, columns, rowSelection, expandable]);
+  }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]);
   return {
     wrapedColumns,
     headerRows

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

@@ -85,15 +85,34 @@
     overflow: auto;
 
     &-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);
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          display: block;
+          height: 100%;
+          width: 15px;
+          right: -15px;
+          top: 0;
+          box-shadow: inset 4px 0 8px -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);
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          display: block;
+          height: 100%;
+          width: 15px;
+          left: -15px;
+          top: 0;
+          box-shadow: inset -4px 0 8px -4px var(--yee-table-fixed-right-after-bs-color);
+        }
       }
     }
 
@@ -156,6 +175,7 @@
     &-fixed-left,
     &-fixed-right {
       position: sticky;
+      z-index: 1;
       background-color: var(--yee-table-fixed-column-bg-color);
     }
   }

package/dist/cjs/Table/table.js

@@ -75,6 +75,7 @@ var import_tbody = __toESM(require("./tbody"));
 var import_tfooter = __toESM(require("./tfooter"));
 var import_theader = __toESM(require("./theader"));
 var import_Config_Provider = require("../Config-Provider");
+var import_useLatest = __toESM(require("../hooks/useLatest"));
 var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
 var import_omit = __toESM(require("../utils/omit"));
 var import_types = require("../utils/types");
@@ -140,6 +141,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     "onChange"
   ]);
   const dataAttrs = (0, import_types.pickDataAttrs)(rest);
+  const [measuredColumnWidths, setMeasuredColumnWidths] = import_react.default.useState();
   const getRowKey = import_react.default.useCallback(
     (record, key = rowKey) => {
       return typeof key === "function" ? key(record) : record[key];
@@ -153,7 +155,8 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     children,
     columns: propColumns,
     expandable,
-    rowSelection
+    rowSelection,
+    measuredColumnWidths
   });
   const {
     data: filteredData,
@@ -212,28 +215,58 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     onChange: onSelectionChange
   } = (0, import_useSelection.default)({ pageData, dataSource, getRowKey, rowSelection, allKeys });
   const prevFilterRecordsRef = (0, import_react.useRef)(filterRecords);
-  const contentWrapperRef = (0, import_react.useRef)(null);
   const contentRef = (0, import_react.useRef)(null);
+  const tableRef = (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)
+    if (!content)
       return;
-    const scrollContainer = content.scrollWidth - content.clientWidth > 1 ? content : wrapper;
-    const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
+    const maxScrollLeft = content.scrollWidth - content.clientWidth;
     const hasHorizontalScroll = maxScrollLeft > 1;
     const next = {
-      left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
-      right: hasHorizontalScroll && scrollContainer.scrollLeft < maxScrollLeft - 1
+      left: hasHorizontalScroll && content.scrollLeft > 1,
+      right: hasHorizontalScroll && content.scrollLeft < maxScrollLeft - 1
     };
     setHorizontalScroll(
       (current2) => current2.left === next.left && current2.right === next.right ? current2 : next
     );
   }, []);
+  const columnLayoutKey = (0, import_react.useMemo)(
+    () => wrapedColumns.map(
+      (column, index) => {
+        var _a2, _b, _c, _d;
+        return `${(_b = (_a2 = column.key) != null ? _a2 : column.dataIndex) != null ? _b : index}:${(_c = column.fixed) != null ? _c : ""}:${(_d = column.width) != null ? _d : ""}`;
+      }
+    ).join("|"),
+    [wrapedColumns]
+  );
+  const wrapedColumnsRef = (0, import_useLatest.default)(wrapedColumns);
+  const updateMeasuredColumnWidths = import_react.default.useCallback(() => {
+    var _a2;
+    const columns = wrapedColumnsRef.current;
+    if (!columns.some((column) => column.fixed))
+      return;
+    const colElements = (_a2 = tableRef.current) == null ? void 0 : _a2.querySelectorAll(
+      ":scope > colgroup > col"
+    );
+    if (!colElements || colElements.length !== columns.length)
+      return;
+    const nextWidths = Array.from(
+      colElements,
+      (column) => Math.round(column.getBoundingClientRect().width)
+    );
+    if (nextWidths.some((width) => !Number.isFinite(width) || width <= 0)) {
+      return;
+    }
+    setMeasuredColumnWidths((current2) => {
+      const unchanged = (current2 == null ? void 0 : current2.length) === nextWidths.length && current2.every((width, index) => width === nextWidths[index]);
+      return unchanged ? current2 : nextWidths;
+    });
+  }, [wrapedColumnsRef]);
   (0, import_react.useEffect)(() => {
     if (prevFilterRecordsRef.current === filterRecords)
       return;
@@ -258,20 +291,34 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     onChange
   ]);
   (0, import_react.useEffect)(() => {
-    updateHorizontalScroll();
-    const wrapper = contentWrapperRef.current;
     const content = contentRef.current;
-    if (!wrapper || !content)
+    const tableElement = tableRef.current;
+    if (!content || !tableElement)
       return void 0;
+    const handleResize = () => {
+      updateHorizontalScroll();
+      updateMeasuredColumnWidths();
+    };
     if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", updateHorizontalScroll);
-      return () => window.removeEventListener("resize", updateHorizontalScroll);
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
     }
-    const resizeObserver = new ResizeObserver(updateHorizontalScroll);
-    resizeObserver.observe(wrapper);
+    const resizeObserver = new ResizeObserver(handleResize);
     resizeObserver.observe(content);
+    resizeObserver.observe(tableElement);
     return () => resizeObserver.disconnect();
-  }, [updateHorizontalScroll, wrapedColumns, pageData, scroll == null ? void 0 : scroll.x]);
+  }, [updateHorizontalScroll, updateMeasuredColumnWidths]);
+  (0, import_react.useEffect)(() => {
+    updateHorizontalScroll();
+    updateMeasuredColumnWidths();
+  }, [
+    columnLayoutKey,
+    pageData,
+    scroll == null ? void 0 : scroll.x,
+    scroll == null ? void 0 : scroll.y,
+    updateHorizontalScroll,
+    updateMeasuredColumnWidths
+  ]);
   const renderHeader = () => {
     return /* @__PURE__ */ import_react.default.createElement(
       import_header.default,
@@ -326,6 +373,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
   const renderTable = () => {
     const tableProps = {
       style: __spreadProps(__spreadValues({}, styles == null ? void 0 : styles.table), {
+        minWidth: scroll == null ? void 0 : scroll.x,
         tableLayout: (pageData == null ? void 0 : pageData.length) ? tableLayout : void 0
       }),
       className: (0, import_clsx.default)(
@@ -346,17 +394,15 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
           rowKey
         }
       },
-      /* @__PURE__ */ import_react.default.createElement("table", __spreadValues({}, tableProps), /* @__PURE__ */ import_react.default.createElement(import_col_group.default, { columns: wrapedColumns }), renderTHeader(), renderTBody(), renderTFooter())
+      /* @__PURE__ */ import_react.default.createElement("table", __spreadValues({ ref: tableRef }, tableProps), /* @__PURE__ */ import_react.default.createElement(import_col_group.default, { columns: wrapedColumns }), renderTHeader(), renderTBody(), renderTFooter())
     );
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        ref: contentWrapperRef,
         className: (0, import_clsx.default)(`${prefixCls}-content-wrapper`, {
           [`${prefixCls}-content-wrapper-scroll-left`]: horizontalScroll.left,
           [`${prefixCls}-content-wrapper-scroll-right`]: horizontalScroll.right
-        }),
-        onScroll: updateHorizontalScroll
+        })
       },
       /* @__PURE__ */ import_react.default.createElement(
         "div",
@@ -366,7 +412,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
             [`${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 },
+          style: { height: scroll == null ? void 0 : scroll.y },
           onScroll: updateHorizontalScroll
         },
         table2

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

@@ -1,2 +1,2 @@
 import { WrapedColumnProps } from '../interface';
-export declare function handleColumns(columns: Array<WrapedColumnProps>): WrapedColumnProps[];
+export declare function handleColumns(columns: Array<WrapedColumnProps>, measuredColumnWidths?: number[]): WrapedColumnProps[];

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

@@ -39,7 +39,20 @@ __export(util_exports, {
   handleColumns: () => handleColumns
 });
 module.exports = __toCommonJS(util_exports);
-function handleColumns(columns) {
+var getColumnWidth = (column, index, measuredColumnWidths) => {
+  const measuredWidth = measuredColumnWidths == null ? void 0 : measuredColumnWidths[index];
+  if (Number.isFinite(measuredWidth) && measuredWidth && measuredWidth > 0) {
+    return measuredWidth;
+  }
+  if (typeof column.width === "number") {
+    return column.width;
+  }
+  if (typeof column.width === "string" && /^\s*\d+(?:\.\d+)?px\s*$/.test(column.width)) {
+    return Number.parseFloat(column.width);
+  }
+  return 0;
+};
+function handleColumns(columns, measuredColumnWidths) {
   var _a, _b;
   let leftWidthCount = 0;
   let rightWidthCount = 0;
@@ -53,7 +66,7 @@ function handleColumns(columns) {
       if (!nextIsFixedLeft) {
         col.isFixedLeftLast = true;
       }
-      leftWidthCount = leftWidthCount + (col.width ? parseFloat(col.width) : 0);
+      leftWidthCount += getColumnWidth(col, i, measuredColumnWidths);
     }
   }
   for (let j = columns.length - 1; j >= 0; j--) {
@@ -63,7 +76,7 @@ function handleColumns(columns) {
       if (((_b = columns[j - 1]) == null ? void 0 : _b.fixed) !== "right") {
         col.isFixedRightFirst = true;
       }
-      rightWidthCount = rightWidthCount + (col.width ? parseFloat(col.width) : 0);
+      rightWidthCount += getColumnWidth(col, j, measuredColumnWidths);
     }
   }
   return columns;

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-31T06:58:34.574Z
+ * Generated on 2026-08-03T08:40:43.552Z
  */
 
 /* ========== 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-31T06:58:34.574Z
+ * Generated on 2026-08-03T08:40:43.552Z
  */
 
 /* ========== color.css ========== */

package/dist/cjs/version.d.ts

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

package/dist/cjs/version.js

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

package/dist/esm/Search/search.js

@@ -197,7 +197,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (baseProps, ref) {
     role: "searchbox",
     "aria-autocomplete": hasPopup ? 'list' : undefined,
     "aria-controls": hasPopup && open ? listboxId : undefined,
-    "aria-activedescendant": hasPopup && open && focusedKey != null ? String(focusedKey) : undefined
+    "aria-activedescendant": hasPopup && open && focusedKey !== null ? String(focusedKey) : undefined
   })), loading ? /*#__PURE__*/React.createElement(Spin, {
     variant: "ring",
     size: "small",

package/dist/esm/Table/demo/fixed.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Table/demo/fixed.js

@@ -0,0 +1,84 @@
+import { Table } from "../..";
+import React from 'react';
+var columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  fixed: 'left',
+  width: 140
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+  fixed: 'left',
+  width: 100
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+  key: 'address',
+  width: 240
+}, {
+  title: 'Company',
+  dataIndex: 'company',
+  key: 'company',
+  width: 180
+}, {
+  title: 'Department',
+  dataIndex: 'department',
+  key: 'department',
+  width: 180
+}, {
+  title: 'Email',
+  dataIndex: 'email',
+  key: 'email',
+  width: 240
+}, {
+  title: 'Action',
+  key: 'action',
+  fixed: 'right',
+  width: 100,
+  render: function render(record) {
+    return /*#__PURE__*/React.createElement("a", {
+      onClick: function onClick() {
+        return console.log(record);
+      }
+    }, "View");
+  }
+}];
+var dataSource = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+  company: 'Acme Inc.',
+  department: 'Engineering',
+  email: 'john.brown@example.com'
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+  company: 'Globex',
+  department: 'Marketing',
+  email: 'jim.green@example.com'
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 28,
+  address: 'Sidney No. 1 Lake Park',
+  company: 'Initech',
+  department: 'Product',
+  email: 'joe.black@example.com'
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    dataSource: dataSource,
+    rowKey: "key",
+    pagination: false,
+    scroll: {
+      x: 1180
+    },
+    tableLayout: "fixed"
+  });
+});

package/dist/esm/Table/hooks/useColumns.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { ColumnProps, ExpandableType, RowSelectionType, WrapedColumnProps } from '../interface';
-export default function useColumns({ children, columns, rowSelection, expandable, }: {
+export default function useColumns({ children, columns, rowSelection, expandable, measuredColumnWidths, }: {
     children?: React.ReactElement<ColumnProps> | React.ReactElement<ColumnProps>[];
     columns: ColumnProps[];
     rowSelection?: RowSelectionType;
     expandable?: ExpandableType;
+    measuredColumnWidths?: number[];
 }): {
     wrapedColumns: WrapedColumnProps[];
     headerRows: import("../interface").HeaderCell[][];

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

@@ -21,7 +21,8 @@ export default function useColumns(_ref) {
   var children = _ref.children,
     columns = _ref.columns,
     rowSelection = _ref.rowSelection,
-    expandable = _ref.expandable;
+    expandable = _ref.expandable,
+    measuredColumnWidths = _ref.measuredColumnWidths;
   var childColumns = useMemo(function () {
     return children ? getColumnsFromChild(children) : null;
   }, [children]);
@@ -33,13 +34,13 @@ export default function useColumns(_ref) {
       var base = deepClone(childColumns || columns || []) || [];
       var tree = injectSelectionExpand(base, rowSelection, expandable);
       var leaves = flattenLeafColumns(tree);
-      var wraped = handleColumns(leaves);
+      var wraped = handleColumns(leaves, measuredColumnWidths);
       var rows = parseHeaderRows(tree, wraped);
       return {
         wrapedColumns: wraped,
         headerRows: rows
       };
-    }, [childColumns, columns, rowSelection, expandable]),
+    }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]),
     wrapedColumns = _useMemo.wrapedColumns,
     headerRows = _useMemo.headerRows;
   return {

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

@@ -85,15 +85,34 @@
     overflow: auto;
 
     &-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);
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          display: block;
+          height: 100%;
+          width: 15px;
+          right: -15px;
+          top: 0;
+          box-shadow: inset 4px 0 8px -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);
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          display: block;
+          height: 100%;
+          width: 15px;
+          left: -15px;
+          top: 0;
+          box-shadow: inset -4px 0 8px -4px var(--yee-table-fixed-right-after-bs-color);
+        }
       }
     }
 
@@ -156,6 +175,7 @@
     &-fixed-left,
     &-fixed-right {
       position: sticky;
+      z-index: 1;
       background-color: var(--yee-table-fixed-column-bg-color);
     }
   }