bkui-vue 2.0.1-beta.38 → 2.0.1-beta.39.table.1

package/lib/scrollbar/process-scroll-diff.d.ts

@@ -0,0 +1 @@
+export default function (i: any, axis: any, diff: any, useScrollingClass?: boolean, forceFireReachEvent?: boolean): void;

package/lib/scrollbar/update-geometry.d.ts

@@ -0,0 +1,8 @@
+import BkScrollbar from '.';
+export type Placement = {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+};
+export default function (i: BkScrollbar): void;

package/lib/table/hooks/use-columns.d.ts

@@ -37,8 +37,11 @@ declare const useColumns: (props: TablePropTypes) => {
     getColumnRefAttribute: (col: Column | IEmptyObject, attributeName: string) => any;
     getColumnCalcWidth: (column: Column) => any;
     getColumnWidth: (column: Column) => any;
+    getLeftColumnsWidth: (col: Column, includingSelf?: boolean) => number;
     getGroupAttribute: (group: Column) => IHeadGroup;
-    resolveEventListener: (col: Column) => Record<string, (...args: any[]) => void> & {
+    getPreColumn: (col: Column) => Column;
+    getColumnIndex: (col: Column) => number;
+    resolveEventListener: (col: Column, index: number) => Record<string, (...args: any[]) => void> & {
         [x: string]: (e: MouseEvent) => void;
     };
     setColumnIsHidden: (column: Column, value?: boolean) => void;

package/lib/table/index.js

@@ -18126,13 +18126,14 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
 
 
 
-
 /* harmony default export */ const use_column_resize = (function (columns, _ref) {
   var afterResize = _ref.afterResize;
   var getColumnAttribute = columns.getColumnAttribute,
     getColumnOrderWidth = columns.getColumnOrderWidth,
     setColumnAttribute = columns.setColumnAttribute,
-    setNextColumnWidth = columns.setNextColumnWidth;
+    setNextColumnWidth = columns.setNextColumnWidth,
+    getPreColumn = columns.getPreColumn,
+    getLeftColumnsWidth = columns.getLeftColumnsWidth;
   var getColListener = function getColListener(col) {
     return getColumnAttribute(col, COLUMN_ATTRIBUTE.LISTENERS);
   };
@@ -18148,7 +18149,11 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
   var isDraging = false;
   var startX = 0;
   var dragColumn = null;
-  var dragStartOffsetX = 0;
+  var poinerPlacement = 'right';
+  var headTable = null;
+  var mouseMoveColumn = null;
+  var dragWidth = 0;
+  var cellCursorStore = new WeakMap();
   var dragOffsetX = (0,external_vue_namespaceObject.ref)(-1000);
   var ORDER_LIST = [COLUMN_ATTRIBUTE.WIDTH];
   var stopDefaultEvent = function stopDefaultEvent(e) {
@@ -18157,93 +18162,100 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
     e.preventDefault();
   };
   var handleMouseUp = function handleMouseUp(e) {
-    stopDefaultEvent(e);
     isMouseDown = false;
     isDraging = false;
-    var diff = e.clientX - startX;
-    var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
+    var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + dragWidth;
     var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
     var calcWidth = resolveWidth > minWidth ? resolveWidth : minWidth;
     setNextColumnWidth(dragColumn, calcWidth);
     setColumnAttribute(dragColumn, COLUMN_ATTRIBUTE.WIDTH, calcWidth);
     document.removeEventListener('mouseup', handleMouseUp);
-    document.removeEventListener('mousemove', handleMouseMove);
-    startX = 0;
     dragOffsetX.value = -1000;
-    dragColumn = null;
-    var target = e.target.closest('th');
-    removeCursor(target);
+    dragWidth = 0;
+    removeCursor(headTable);
     afterResize === null || afterResize === void 0 || afterResize();
+    headTable = null;
+    var target = e.target;
+    handleMouseoutDragSection(target);
+    dragColumn = null;
   };
-  var updateOffsetX = function updateOffsetX(e) {
-    return (0,shared_namespaceObject.throttle)(function () {
-      var diff = e.clientX - startX;
-      var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
-      var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
-      if (minWidth < resolveWidth) {
-        dragOffsetX.value = e.clientX - startX + dragStartOffsetX;
-      }
-    });
-  };
-  var handleMouseMove = function handleMouseMove(e) {
+  var handleMouseDragMove = function handleMouseDragMove(e) {
+    document.body.style.setProperty('user-select', 'none');
     stopDefaultEvent(e);
-    updateOffsetX(e)();
+    var diff = e.clientX - startX;
+    dragWidth = dragWidth + diff;
+    startX = e.clientX;
+    var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
+    var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
+    if (minWidth < resolveWidth) {
+      dragOffsetX.value = dragOffsetX.value + diff;
+    }
   };
   var setNodeCursor = function () {
     return (0,lodash.debounce)(function (target) {
-      var _target$style;
-      target === null || target === void 0 || (_target$style = target.style) === null || _target$style === void 0 || _target$style.setProperty('cursor', 'col-resize');
+      document.body.style.setProperty('user-select', 'none');
       target === null || target === void 0 || target.classList.add('col-resize-hover');
     });
   }();
   var removeCursor = function removeCursor(target) {
-    var _target$style2;
     setNodeCursor.cancel();
-    target === null || target === void 0 || (_target$style2 = target.style) === null || _target$style2 === void 0 || _target$style2.removeProperty('cursor');
+    document.body.style.removeProperty('user-select');
     target === null || target === void 0 || target.classList.remove('col-resize-hover');
   };
-  var handler = defineProperty_defineProperty(defineProperty_defineProperty(defineProperty_defineProperty({}, EVENTS.MOUSE_DOWN, function (e, column) {
+  var handlemouseDownEvent = function handlemouseDownEvent(e) {
     if (!isInDragSection) {
       return;
     }
-    isMouseDown = true;
-    var target = e.target.closest('th');
+    startX = e.clientX;
+    var column = poinerPlacement === 'left' ? getPreColumn(mouseMoveColumn) : mouseMoveColumn;
     setColumnAttribute(column, COLUMN_ATTRIBUTE.COL_IS_DRAG, true);
-    setNodeCursor(target);
     dragColumn = column;
-    startX = e.clientX;
-    var targetTable = e.target.closest('table');
-    dragStartOffsetX = startX - targetTable.getBoundingClientRect().left;
-    updateOffsetX(e)();
-    document.addEventListener('mouseup', handleMouseUp);
-    document.addEventListener('mousemove', handleMouseMove);
-    target === null || target === void 0 || target.classList.remove('col-resize-hover');
-  }), EVENTS.MOUSE_MOVE, function (e, _column) {
-    if (isMouseDown && !isDraging) {
-      isDraging = true;
+    headTable = e.target.closest('table');
+    setNodeCursor(headTable);
+    isMouseDown = true;
+  };
+  var handleMouseoutDragSection = function handleMouseoutDragSection(target) {
+    if (!isDraging) {
+      dragOffsetX.value = -1000;
+      target.classList.remove('cell-resize');
+      cellCursorStore.set(target, false);
+      document.removeEventListener('mousedown', handlemouseDownEvent);
     }
-    var target = e.target.closest('th');
-    if (isDraging) {
-      target.style.setProperty('user-select', 'none');
+  };
+  var handler = defineProperty_defineProperty(defineProperty_defineProperty({}, EVENTS.MOUSE_MOVE, function (e, column, index) {
+    if (isMouseDown) {
+      isDraging = true;
+      handleMouseDragMove(e);
+      return;
     }
+    var target = e.target;
     if (!isDraging) {
       if (!target) {
         return;
       }
-      var rect = target.getBoundingClientRect();
-      if (rect.width > 12 && rect.right - e.pageX < 12) {
+      var offsetWidth = target.offsetWidth;
+      var mouseOffsetX = e.offsetX;
+      if (offsetWidth > 12 && (offsetWidth - mouseOffsetX < 8 || mouseOffsetX < 8 && index > 0)) {
         isInDragSection = true;
-        setNodeCursor(target);
+        poinerPlacement = mouseOffsetX < 8 ? 'left' : 'right';
+        if (!cellCursorStore.get(target)) {
+          cellCursorStore.set(target, true);
+          target.classList.add('cell-resize');
+          var offsetLeft = getLeftColumnsWidth(column, poinerPlacement === 'right');
+          console.log('-set offset');
+          dragOffsetX.value = offsetLeft;
+          mouseMoveColumn = column;
+          document.addEventListener('mousedown', handlemouseDownEvent);
+          document.addEventListener('mouseup', handleMouseUp);
+        }
       } else {
-        removeCursor(target);
         isInDragSection = false;
+        handleMouseoutDragSection(target);
       }
     }
-  }), EVENTS.MOUSE_OUT, function (e, _column) {
-    var target = e.target.closest('th');
-    if (!isDraging) {
-      removeCursor(target);
-    }
+  }), EVENTS.MOUSE_OUT, function (e, _column, _index) {
+    var target = e.target;
+    handleMouseoutDragSection(target);
   });
   var getEventName = function getEventName(event) {
     return "".concat(pluginName, "_").concat(event);
@@ -20238,7 +20250,7 @@ var useColumns = function useColumns(props) {
     }
     return minWidth;
   };
-  var resolveEventListener = function resolveEventListener(col) {
+  var resolveEventListener = function resolveEventListener(col, index) {
     var listeners = getColumnAttribute(col, COLUMN_ATTRIBUTE.LISTENERS);
     if (!listeners) {
       return {};
@@ -20247,7 +20259,7 @@ var useColumns = function useColumns(props) {
       var eventName = key.split('_').slice(-1)[0];
       return Object.assign(handle, defineProperty_defineProperty({}, eventName, function (e) {
         listeners.get(key).forEach(function (fn) {
-          return Reflect.apply(fn, use_columns_this, [e, col]);
+          return Reflect.apply(fn, use_columns_this, [e, col, index]);
         });
       }));
     }, {});
@@ -20621,6 +20633,35 @@ var useColumns = function useColumns(props) {
       setColumnAttribute(col, COLUMN_ATTRIBUTE.SELECTION_INDETERMINATE, false);
     }
   };
+  var getPreColumn = function getPreColumn(col) {
+    var index = visibleColumns.findIndex(function (item) {
+      return item === col;
+    });
+    var preIndex = index - 1;
+    return visibleColumns[preIndex];
+  };
+  var getColumnIndex = function getColumnIndex(col) {
+    return visibleColumns.findIndex(function (item) {
+      return item === col;
+    });
+  };
+  var getLeftColumnsWidth = function getLeftColumnsWidth(col) {
+    var includingSelf = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var isContinue = true;
+    var width = 0;
+    var index = 0;
+    while (isContinue) {
+      width = width + getColumnWidth(visibleColumns[index]);
+      index = index + 1;
+      if (col === visibleColumns[index]) {
+        if (includingSelf) {
+          width = width + getColumnWidth(visibleColumns[index]);
+        }
+        isContinue = false;
+      }
+    }
+    return width;
+  };
   return {
     needColSpan: needColSpan,
     needRowSpan: needRowSpan,
@@ -20648,7 +20689,10 @@ var useColumns = function useColumns(props) {
     getColumnRefAttribute: getColumnRefAttribute,
     getColumnCalcWidth: getColumnCalcWidth,
     getColumnWidth: getColumnWidth,
+    getLeftColumnsWidth: getLeftColumnsWidth,
     getGroupAttribute: getGroupAttribute,
+    getPreColumn: getPreColumn,
+    getColumnIndex: getColumnIndex,
     resolveEventListener: resolveEventListener,
     setColumnIsHidden: setColumnIsHidden,
     setColumnResizeWidth: setColumnResizeWidth,
@@ -21016,8 +21060,9 @@ const loading_less_namespaceObject = loading_less_x({  });
   var refScrollLoading = (0,external_vue_namespaceObject.toRef)(props, 'scrollLoading');
   var getLoadingOption = function getLoadingOption() {
     if (typeof refScrollLoading.value === 'boolean') {
+      var _props$fixedBottom$lo, _props$fixedBottom;
       return {
-        loading: !!refScrollLoading.value,
+        loading: !!refScrollLoading.value || ((_props$fixedBottom$lo = (_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.loading) !== null && _props$fixedBottom$lo !== void 0 ? _props$fixedBottom$lo : false),
         inline: true,
         title: '',
         size: loading_namespaceObject.BkLoadingSize.Normal,
@@ -21028,7 +21073,8 @@ const loading_less_namespaceObject = loading_less_x({  });
     return refScrollLoading.value;
   };
   var isRender = (0,external_vue_namespaceObject.computed)(function () {
-    return refScrollLoading.value !== null && (typeof refScrollLoading.value === 'boolean' && refScrollLoading.value || typeof_typeof(refScrollLoading.value) === 'object');
+    var _props$fixedBottom$lo2, _props$fixedBottom2;
+    return refScrollLoading.value !== null && (typeof refScrollLoading.value === 'boolean' && refScrollLoading.value || typeof_typeof(refScrollLoading.value) === 'object') || ((_props$fixedBottom$lo2 = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.loading) !== null && _props$fixedBottom$lo2 !== void 0 ? _props$fixedBottom$lo2 : false);
   });
   var renderScrollLoading = function renderScrollLoading() {
     var _ctx$slots$fixedBotto3, _ctx$slots$fixedBotto4, _ctx$slots2;
@@ -21114,8 +21160,8 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var lineHeight = (0,external_vue_namespaceObject.ref)((_props$rowHeight = props.rowHeight) !== null && _props$rowHeight !== void 0 ? _props$rowHeight : LINE_HEIGHT);
   var headerRowCount = (0,external_vue_namespaceObject.ref)(1);
   var fixedBottomHeight = (0,external_vue_namespaceObject.computed)(function () {
-    var _props$fixedBottom, _props$fixedBottom$he, _props$fixedBottom2, _props$fixedBottom$he2, _props$fixedBottom3;
-    return ((_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.position) === 'relative' ? (_props$fixedBottom$he = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.height) !== null && _props$fixedBottom$he !== void 0 ? _props$fixedBottom$he : LINE_HEIGHT : (_props$fixedBottom$he2 = (_props$fixedBottom3 = props.fixedBottom) === null || _props$fixedBottom3 === void 0 ? void 0 : _props$fixedBottom3.height) !== null && _props$fixedBottom$he2 !== void 0 ? _props$fixedBottom$he2 : 0;
+    var _props$fixedBottom, _props$fixedBottom$he, _props$fixedBottom2;
+    return ((_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.position) === 'relative' ? (_props$fixedBottom$he = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.height) !== null && _props$fixedBottom$he !== void 0 ? _props$fixedBottom$he : LINE_HEIGHT : 0;
   });
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
@@ -21299,11 +21345,11 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var fixedWrapperClass = resolveClassName('table-fixed');
   var fixedBottomRow = resolveClassName('table-fixed-bottom');
   var fixedBottomLoadingStyle = (0,external_vue_namespaceObject.computed)(function () {
-    var _props$fixedBottom$po, _props$fixedBottom4, _props$fixedBottom$he3, _props$fixedBottom5;
+    var _props$fixedBottom$po, _props$fixedBottom3, _props$fixedBottom$he2, _props$fixedBottom4;
     return {
       minHeight: "".concat(lineHeight.value, "px"),
-      position: (_props$fixedBottom$po = (_props$fixedBottom4 = props.fixedBottom) === null || _props$fixedBottom4 === void 0 ? void 0 : _props$fixedBottom4.position) !== null && _props$fixedBottom$po !== void 0 ? _props$fixedBottom$po : 'absolute',
-      height: (_props$fixedBottom$he3 = (_props$fixedBottom5 = props.fixedBottom) === null || _props$fixedBottom5 === void 0 ? void 0 : _props$fixedBottom5.height) !== null && _props$fixedBottom$he3 !== void 0 ? _props$fixedBottom$he3 : null
+      position: (_props$fixedBottom$po = (_props$fixedBottom3 = props.fixedBottom) === null || _props$fixedBottom3 === void 0 ? void 0 : _props$fixedBottom3.position) !== null && _props$fixedBottom$po !== void 0 ? _props$fixedBottom$po : 'absolute',
+      height: (_props$fixedBottom$he2 = (_props$fixedBottom4 = props.fixedBottom) === null || _props$fixedBottom4 === void 0 ? void 0 : _props$fixedBottom4.height) !== null && _props$fixedBottom$he2 !== void 0 ? _props$fixedBottom$he2 : null
     };
   });
   (0,external_vue_namespaceObject.onMounted)(function () {
@@ -22913,7 +22959,7 @@ function use_head_isSlot(s) {
       "onClick": function onClick() {
         return handleColumnHeadClick();
       }
-    }, columns.resolveEventListener(column)), [renderHeadCell()]);
+    }, columns.resolveEventListener(column, index)), [renderHeadCell()]);
   };
   return {
     getTH: getTH
@@ -23129,6 +23175,22 @@ function use_render_isSlot(s) {
     }, [renderColgroup(), renderHeader()]);
   };
   /** **************************************** Rows Render ******************************* **/
+  var renderAppendLastRow = function renderAppendLastRow() {
+    if (ctx.slots.appendLastRow) {
+      var rowId = 'append-last-row';
+      return (0,external_vue_namespaceObject.createVNode)(table_row, {
+        "key": rowId
+      }, {
+        "default": function _default() {
+          return [(0,external_vue_namespaceObject.createVNode)("tr", {
+            "key": rowId
+          }, [(0,external_vue_namespaceObject.createVNode)("td", {
+            "colspan": columns.visibleColumns.length
+          }, [ctx.slots.appendLastRow()])])];
+        }
+      });
+    }
+  };
   /**
    * 渲染Table Body
    * @returns
@@ -23141,7 +23203,7 @@ function use_render_isSlot(s) {
       var result = getRowRender(row, rowIndex, preRow, dataList, rowSpanMap, needRowSpan);
       preRow = row;
       return result;
-    })]);
+    }), renderAppendLastRow()]);
   };
   var getRowHeight = function getRowHeight(row, rowIndex) {
     if (typeof props.rowHeight === 'function' || /^\d+/.test("".concat(props.rowHeight))) {

package/lib/table/table.css

@@ -145,111 +145,121 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.bk-scrollbar-wrapper {
-  position: relative;
-  overflow: hidden;
+/*
+ * Container style
+ */
+.bk-scrollbar {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  touch-action: auto;
+  /*
+ * Scrollbar rail styles
+ */
+  /*
+ * Scrollbar thumb styles
+ */
+}
+.bk-scrollbar.bk--active-x > .bk__rail-x,
+.bk-scrollbar.bk--active-y > .bk__rail-y {
+  display: block;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-content-el {
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
+.bk-scrollbar .bk__rail-x:hover,
+.bk-scrollbar .bk__rail-y:hover,
+.bk-scrollbar .bk__rail-x:focus,
+.bk-scrollbar .bk__rail-y:focus,
+.bk-scrollbar .bk__rail-x.bk--clicking,
+.bk-scrollbar .bk__rail-y.bk--clicking {
+  background-color: #f0f1f5;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track {
-  z-index: 1;
+.bk-scrollbar .bk__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  height: 10px;
+  bottom: 0px;
   position: absolute;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  overflow: hidden;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
-  width: 6px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 8px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
-  height: 6px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.bk-scrollbar .bk__rail-x.bk-size-small {
   height: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
-  background-color: #f0f1f5;
-  cursor: pointer;
+.bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
+  height: 6px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
-  background-color: #979ba5;
+.bk-scrollbar .bk__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  width: 10px;
+  right: 0px;
+  position: absolute;
+  margin-right: 2px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
-  top: 0;
+.bk-scrollbar .bk__rail-y.bk-size-small {
   width: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 10px;
+.bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
+  width: 6px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
-  left: 0;
+.bk-scrollbar:hover > .bk__rail-x,
+.bk-scrollbar:hover > .bk__rail-y,
+.bk-scrollbar.bk--focus > .bk__rail-x,
+.bk-scrollbar.bk--focus > .bk__rail-y,
+.bk-scrollbar.bk--scrolling-x > .bk__rail-x,
+.bk-scrollbar.bk--scrolling-y > .bk__rail-y {
+  opacity: 0.9;
+}
+.bk-scrollbar .bk__thumb-x {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
   height: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+  bottom: 0px;
+  position: absolute;
+}
+.bk-scrollbar .bk__thumb-y {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  width: 8px;
+  right: 0px;
+  position: absolute;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
+.bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
+.bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
+  background-color: #979ba5;
   height: 10px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
-  right: auto;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  min-height: 0;
-  min-width: 8px;
-  width: auto;
+.bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
+.bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
+.bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
+  background-color: #979ba5;
+  width: 10px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-dragging {
-  pointer-events: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.bk-scrollbar .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
+  height: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+.bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
+.bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
+  width: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar::before {
-  position: absolute;
-  content: '';
-  background: #dcdee5;
-  border-radius: 6px;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  opacity: 0;
-  transition: opacity 0.2s 0.9s linear;
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }
-.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
-  opacity: 0.9;
-  transition-delay: 0s;
-  transition-duration: 0s;
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }
 .bk-virtual-render {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
 .bk-virtual-render .bk-virtual-section {
   width: 1px;
   background: transparent;
@@ -1251,7 +1261,7 @@
   overflow: hidden;
 }
 .bk-table .bk-table-body .prepend-row {
-  transform: translate3d(var(--translate-x), 0, 0);
+  transform: translate(var(--translate-x), 0);
 }
 .bk-table .bk-table-body .resize-column {
   position: absolute;
@@ -1260,7 +1270,7 @@
   left: 0;
   width: 1px;
   background-color: #3785ff;
-  transform: translate3d(var(--drag-offset-x), var(--translate-y), 0);
+  transform: translate(var(--drag-offset-x), var(--translate-y));
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
   background-color: var(--table-strip-color);
@@ -1429,24 +1439,6 @@
   font-weight: 400;
   background-color: var(--background-color);
 }
-.bk-table .bk-table-head table thead th.col-resize-hover::after,
-.bk-table .bk-table-body table thead th.col-resize-hover::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 6px;
-  pointer-events: none;
-  background-color: #3785ff;
-  content: '';
-  transform: translateX(50%);
-  cursor: col-resize;
-}
-.bk-table .bk-table-head table thead th.col-resize-hover .cell,
-.bk-table .bk-table-body table thead th.col-resize-hover .cell {
-  cursor: col-resize;
-}
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
   display: flex;
@@ -1454,17 +1446,21 @@
   height: calc(var(--row-height) - 2px);
   color: var(--table-head-font-color);
 }
-.bk-table .bk-table-head table thead th.active,
-.bk-table .bk-table-body table thead th.active,
-.bk-table .bk-table-head table thead th:hover,
-.bk-table .bk-table-body table thead th:hover {
-  cursor: pointer;
-  background: var(--table-row-active-bg-color);
+.bk-table .bk-table-head table thead th .cell.cell-resize,
+.bk-table .bk-table-body table thead th .cell.cell-resize {
+  cursor: col-resize;
 }
 .bk-table .bk-table-head table thead th.column_fixed,
 .bk-table .bk-table-body table thead th.column_fixed {
   transform: translateX(var(--translate-x));
 }
+.bk-table .bk-table-head table:not(.col-resize-hover) thead th.active,
+.bk-table .bk-table-body table:not(.col-resize-hover) thead th.active,
+.bk-table .bk-table-head table:not(.col-resize-hover) thead th:hover,
+.bk-table .bk-table-body table:not(.col-resize-hover) thead th:hover {
+  cursor: pointer;
+  background: var(--table-row-active-bg-color);
+}
 .bk-table .bk-table-head table tbody tr td,
 .bk-table .bk-table-body table tbody tr td {
   background-color: #fff;
@@ -1522,16 +1518,14 @@
   z-index: 1;
   width: 6px;
   background-color: #3785ff;
-  transform: translate3d(var(--drag-offset-h-x), 0, 0);
-}
-.bk-table .bk-table-head .col-resize-drag:hover {
-  cursor: ew-resize !important;
+  transform: translate(var(--drag-offset-h-x), 0);
+  pointer-events: none;
 }
 .bk-table .bk-table-head .bk-table-fixed {
-  transform: translate3d(0, 0, 0);
+  transform: translate(0, 0);
 }
 .bk-table .bk-table-head thead {
-  transform: translate3d(var(--translate-x-1), 0, 0);
+  transform: translate(var(--translate-x-1), 0);
 }
 .bk-table .bk-table-head .table-head-settings {
   position: absolute;
@@ -1628,7 +1622,7 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
-  transform: translate3d(var(--translate-x), var(--translate-y), 0);
+  transform: translate(var(--translate-x), var(--translate-y));
 }
 .bk-table .bk-table-fixed .column_fixed_right {
   box-shadow: var(--shadow-right);