@arim-aisdc/public-components 0.0.5 → 0.0.7

package/dist/components/TableMax/TableBody/Row.d.ts

@@ -2,7 +2,7 @@ import { OnSelectChangeType } from "../type";
 import { Table } from '@tanstack/react-table';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import './index.less';
-declare const Row: ({ table, tableId, row, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, reorderRow, tableContainerWidth, canRowDrag, rowClassName, cellClassName, rowStyle, getCellProps, editting, rowEditing, renderSubComponent, selectedRowDragging, setSelectedRowDragging, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, rowHeight, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, handleEditRowWhenDClick, canEditRowWhenDClick, theme, }: {
+declare const Row: ({ table, tableId, row, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, reorderRow, tableContainerWidth, canRowDrag, rowClassName, cellClassName, rowStyle, getCellProps, editting, rowEditing, renderSubComponent, selectedRowDragging, setSelectedRowDragging, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, rowHeight, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, handleEditRowWhenDClick, canEditRowWhenDClick, theme, pinShadowVisible, dragBeforeStart, }: {
     table: Table<any>;
     tableId: string;
     row: any;
@@ -36,5 +36,11 @@ declare const Row: ({ table, tableId, row, rowSelectedId, setRowSelectedId, sele
     handleEditRowWhenDClick: (row: any) => void;
     canEditRowWhenDClick: boolean;
     theme: string;
+    pinShadowVisible: {
+        left: boolean;
+        right: boolean;
+    };
+    dragBeforeStart?: (datas: any) => boolean;
+    rowKey?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Row;

package/dist/components/TableMax/TableBody/Row.js

@@ -16,6 +16,7 @@ import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { EditableCell } from "../components/ColumnEdit";
 import { getPinningStyle } from "../TableHeader/utils";
+import { getShadowInfo } from "../utils";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -52,7 +53,9 @@ var Row = function Row(_ref) {
     hasVerticalScrollBar = _ref.hasVerticalScrollBar,
     handleEditRowWhenDClick = _ref.handleEditRowWhenDClick,
     canEditRowWhenDClick = _ref.canEditRowWhenDClick,
-    theme = _ref.theme;
+    theme = _ref.theme,
+    pinShadowVisible = _ref.pinShadowVisible,
+    dragBeforeStart = _ref.dragBeforeStart;
   var timerRef = useRef();
   var _useDrop = useDrop({
       accept: 'TABLE_ROW',
@@ -73,7 +76,7 @@ var Row = function Row(_ref) {
   var _useDrag = useDrag({
       collect: function collect(monitor) {
         return {
-          isDragging: monitor.isDragging()
+          isDragging: monitor !== null && monitor !== void 0 && monitor.getItem() ? dragBeforeStart === null || dragBeforeStart === void 0 ? void 0 : dragBeforeStart(monitor === null || monitor === void 0 ? void 0 : monitor.getItem()) : monitor.isDragging()
         };
       },
       item: function item() {
@@ -90,15 +93,7 @@ var Row = function Row(_ref) {
           draggedRows: isMultipleDrag ? selectedRows : [row],
           sourceTableId: tableId
         };
-
-        // return {
-        //   ...row,
-        //   isMultipleDrag,
-        //   draggedRows: isMultipleDrag ? selectedRows : [row],
-        //   sourceTableId: tableId,
-        // };
       },
-
       type: 'TABLE_ROW'
     }),
     _useDrag2 = _slicedToArray(_useDrag, 3),
@@ -143,6 +138,39 @@ var Row = function Row(_ref) {
       onSelectChange === null || onSelectChange === void 0 || onSelectChange(row, row === null || row === void 0 ? void 0 : row.original, true, evt);
     }
   };
+
+  // const rowClickHandler = (evt: any) => {
+  //   // 触发单击回调
+  //   onRowMouseClick?.(row);
+
+  //   if (!selectRowWhenClick) {
+  //     // 如果配置了selectRowWhenClick这个props，单击时不选中
+  //     return;
+  //   }
+
+  //   const selectionConfig = {
+  //     ...table.getState().rowSelection
+  //   };
+  //   if (canSelection) {
+  //     if (evt.ctrlKey) {
+  //       if (!row.getIsSelected()) {
+  //         selectionConfig[row.id] = true
+  //       } else {
+  //         delete selectionConfig[row.id]
+  //       }
+  //     } else if ({ ...table.getState().rowSelection }[row.id]) {
+  //       delete selectionConfig[row.id]
+  //     }
+  //     if (row.getCanSelect()) {
+  //       table?.setRowSelection(selectionConfig);
+  //     }
+  //   }
+  //   setRowSelectedId?.(row?.id);
+  //   selectedRowChange?.(row);
+  //   onSelectChange?.(row, row?.original, true, evt);
+
+  // };
+
   var rowClickOrDoubleClick = function rowClickOrDoubleClick(e) {
     // console.log('rowClickOrDoubleClick');
     if (editting) return;
@@ -199,8 +227,13 @@ var Row = function Row(_ref) {
           columnClassName = _cell$column$columnDe.columnClassName;
         // 当前列是否编辑中
         var columnEditing = rowEditing && columnEditable;
+
+        // 列固定时的阴影判断逻辑
+        var _getShadowInfo = getShadowInfo(cell.column, table),
+          isRightFirst = _getShadowInfo.isRightFirst,
+          isLeftLast = _getShadowInfo.isLeftLast;
         return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
-          className: "".concat(columnEditing ? 'tbody-tr-td-editting' : '', " ").concat(columnClassName ? columnClassName.join(' ') : '', " ").concat((cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(cell).map(function (item) {
+          className: "".concat(columnEditing ? 'tbody-tr-td-editting' : '', " ").concat(isLeftLast && pinShadowVisible.left ? 'tbody-tr-td-cell-fix-left-last' : '', " ").concat(isRightFirst && pinShadowVisible.right ? 'tbody-tr-td-cell-fix-right-first' : '', " ").concat(columnClassName ? columnClassName.join(' ') : '', " ").concat((cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(cell).map(function (item) {
             return "".concat(item, "-").concat(theme);
           })) || '', " tbody-tr-td"),
           style: _objectSpread({

package/dist/components/TableMax/TableBody/index.d.ts

@@ -14,8 +14,6 @@ type TableBodyPropsType = {
     canFilter: boolean;
     canSelection: boolean;
     tableBodyHeight: number;
-    tableHeadHeight: number;
-    setTableHeadHeight: Dispatch<SetStateAction<number>>;
     bodyContentHeight: number;
     tableContainerWidth: number;
     selectedRowDragging: boolean;
@@ -48,6 +46,11 @@ type TableBodyPropsType = {
     canEditRowWhenDClick: boolean;
     editingRowId: string;
     handleEditRowWhenDClick: (row: any) => void;
+    pinShadowVisible: {
+        left: boolean;
+        right: boolean;
+    };
+    dragBeforeStart: (datas: any) => boolean;
 };
-declare const TableBody: ({ table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, tableBodyHeight, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, datas, emptyDataHeight, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
+declare const TableBody: ({ table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, tableBodyHeight, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, datas, emptyDataHeight, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, pinShadowVisible, dragBeforeStart, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;

package/dist/components/TableMax/TableBody/index.js

@@ -12,11 +12,13 @@ import { useDrop } from 'react-dnd';
 import { CustomDragLayer } from "../components/CustomDragerLayer";
 // import RowContent from "../components/RowContent";
 
+import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import Row from "./Row";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var TableBody = function TableBody(_ref) {
   var _headerGroups;
   var table = _ref.table,
@@ -33,6 +35,7 @@ var TableBody = function TableBody(_ref) {
     selectedRowDragging = _ref.selectedRowDragging,
     setSelectedRowDragging = _ref.setSelectedRowDragging,
     canRowDrag = _ref.canRowDrag,
+    rowKey = _ref.rowKey,
     loading = _ref.loading,
     rowClassName = _ref.rowClassName,
     cellClassName = _ref.cellClassName,
@@ -51,7 +54,9 @@ var TableBody = function TableBody(_ref) {
     emptyDataHeight = _ref.emptyDataHeight,
     canEditRowWhenDClick = _ref.canEditRowWhenDClick,
     editingRowId = _ref.editingRowId,
-    handleEditRowWhenDClick = _ref.handleEditRowWhenDClick;
+    handleEditRowWhenDClick = _ref.handleEditRowWhenDClick,
+    pinShadowVisible = _ref.pinShadowVisible,
+    dragBeforeStart = _ref.dragBeforeStart;
   // const tbodyRef = useRef<any>(null);
   // const theadRef = useRef<any>(null);
   var headerGroups = table.getHeaderGroups();
@@ -193,6 +198,7 @@ var TableBody = function TableBody(_ref) {
         tableId: tableId,
         tableContainerWidth: tableContainerWidth,
         row: row,
+        rowKey: rowKey,
         theme: theme,
         reorderRow: reorderRow,
         rowSelectedId: rowSelectedId,
@@ -203,6 +209,7 @@ var TableBody = function TableBody(_ref) {
         selectedRowDragging: selectedRowDragging,
         setSelectedRowDragging: setSelectedRowDragging,
         canRowDrag: canRowDrag,
+        dragBeforeStart: dragBeforeStart,
         rowClassName: rowClassName,
         cellClassName: cellClassName,
         rowStyle: rowStyle,
@@ -219,7 +226,8 @@ var TableBody = function TableBody(_ref) {
         selectRowWhenClick: selectRowWhenClick,
         hasVerticalScrollBar: hasVerticalScrollBar,
         handleEditRowWhenDClick: handleEditRowWhenDClick,
-        canEditRowWhenDClick: canEditRowWhenDClick
+        canEditRowWhenDClick: canEditRowWhenDClick,
+        pinShadowVisible: pinShadowVisible
       }, row.id);
     });
   };
@@ -229,35 +237,35 @@ var TableBody = function TableBody(_ref) {
     }
     return EmptyContent();
   };
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      height: "".concat(tableBodyHeight, "px"),
-      width: table.getTotalSize()
-    },
-    children: [canRowDrag && !editingRowId && /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(CustomDragLayer, {
-      getCellProps: getCellProps,
-      rowClassName: rowClassName,
-      cellClassName: cellClassName,
-      rowStyle: rowStyle,
-      theme: theme,
-      rowSelectedId: rowSelectedId,
-      table: table,
-      tableId: tableId
-    }), document.body), /*#__PURE__*/_jsxs("table", {
-      style: {
-        width: table.getTotalSize()
-      },
-      children: [/*#__PURE__*/_jsx("colgroup", {
-        children: headerGroups === null || headerGroups === void 0 || (_headerGroups = headerGroups[headerGroups.length - 1]) === null || _headerGroups === void 0 || (_headerGroups = _headerGroups.headers) === null || _headerGroups === void 0 ? void 0 : _headerGroups.map(function (header) {
-          return /*#__PURE__*/_jsx("col", {
-            width: header.getSize() || 80
-          }, header.id);
-        })
-      }), /*#__PURE__*/_jsx("tbody", {
-        id: "table-max-tableBody-tbody-".concat(tableId),
-        children: tbodyRender()
+  useEffect(function () {
+    console.log(tableBodyHeight, 'tableBodyHeight*******************');
+  }, [tableBodyHeight]);
+  return (
+    /*#__PURE__*/
+    // 修复筛选数据为空时，滚动条丢失
+    _jsxs(_Fragment, {
+      children: [canRowDrag && !editingRowId && /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(CustomDragLayer, {
+        getCellProps: getCellProps,
+        rowClassName: rowClassName,
+        cellClassName: cellClassName,
+        rowStyle: rowStyle,
+        theme: theme,
+        rowSelectedId: rowSelectedId,
+        table: table,
+        tableId: tableId
+      }), document.body), /*#__PURE__*/_jsxs("table", {
+        children: [/*#__PURE__*/_jsx("colgroup", {
+          children: headerGroups === null || headerGroups === void 0 || (_headerGroups = headerGroups[headerGroups.length - 1]) === null || _headerGroups === void 0 || (_headerGroups = _headerGroups.headers) === null || _headerGroups === void 0 ? void 0 : _headerGroups.map(function (header) {
+            return /*#__PURE__*/_jsx("col", {
+              width: header.getSize() || 80
+            }, header.id);
+          })
+        }), /*#__PURE__*/_jsx("tbody", {
+          id: "table-max-tableBody-tbody-".concat(tableId),
+          children: tbodyRender()
+        })]
       })]
-    })]
-  });
+    })
+  );
 };
 export default TableBody;

package/dist/components/TableMax/TableBody/index.less

@@ -10,7 +10,6 @@ table {
   background-color: @globalColor0;
 }
 
-
 .tbody-tr,
 .tbody-tr-selected {
   // display: flex;
@@ -29,22 +28,31 @@ table {
 
 .tbody-tr-td,
 .tbody-tr-td-drag,
-.tbody-tr-selected>.tbody-tr-td,
-.tbody-tr-selected>.tbody-tr-td-drag {
+.tbody-tr-selected > .tbody-tr-td,
+.tbody-tr-selected > .tbody-tr-td-drag {
   background-color: @globalColor0;
   height: 39px;
   line-height: 39px;
-  overflow: hidden;
+  // overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 0;
+  transition: background-color 0.3s;
 }
 
-.tbody-tr-selected>.tbody-tr-td,
-.tbody-tr-selected>.tbody-tr-td-drag {
+.tbody-tr-selected > .tbody-tr-td,
+.tbody-tr-selected > .tbody-tr-td-drag {
   background: @selectTableRow;
 }
 
+.tbody-tr:not(.tbody-tr-selected) {
+  &:hover {
+    .tbody-tr-td {
+      background-color: @rowHoverBackgroundColor;
+    }
+  }
+}
+
 .tbody-tr-td-drag:hover {
   cursor: move;
 }
@@ -55,7 +63,7 @@ table {
   .subRowWrapper {
     padding-left: 40px;
     position: sticky;
-    left: 0px;
+    left: 0;
     overflow: hidden;
   }
 }
@@ -104,4 +112,31 @@ table {
     color: @globalColor2;
     font-size: 12px;
   }
-}
+}
+
+.tbody-tr-td-cell-fix-left-last::after {
+  box-shadow: inset 10px 0 8px -8px #00000026;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: -1px;
+  width: 30px;
+  transform: translate(100%);
+  transition: box-shadow 0.3s;
+  content: '';
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.tbody-tr-td-cell-fix-right-first::after {
+  box-shadow: inset -10px 0 8px -8px #00000026;
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  left: 0;
+  width: 30px;
+  transform: translate(-100%);
+  transition: box-shadow 0.3s;
+  content: '';
+  pointer-events: none;
+}

package/dist/components/TableMax/TableHeader/Cell.js

@@ -21,6 +21,7 @@ import { flexRender } from '@tanstack/react-table';
 import { useMemo } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import { ColumnType } from "../TableMax";
+import Sort from "../components/ColumnSort";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -35,6 +36,7 @@ var Cell = function Cell(_ref) {
     canSorting = _ref.canSorting,
     getHeaderCellProps = _ref.getHeaderCellProps,
     columnResizeMode = _ref.columnResizeMode;
+  var cannotDragColumn = [ColumnType.Darg, ColumnType.Selection, ColumnType.Expander, ColumnType.PlaceHolder];
   var getState = table.getState,
     setColumnOrder = table.setColumnOrder;
   var _getState = getState(),
@@ -64,26 +66,6 @@ var Cell = function Cell(_ref) {
   _objectDestructuringEmpty(_useDrag2[0]);
   var dragRef = _useDrag2[1],
     previewRef = _useDrag2[2];
-  function sortingRender() {
-    return {
-      asc: /*#__PURE__*/_jsxs("span", {
-        className: "sort-flag",
-        children: [/*#__PURE__*/_jsx("i", {
-          className: "triangle-up triangle-up-red"
-        }), /*#__PURE__*/_jsx("i", {
-          className: "triangle-down"
-        })]
-      }),
-      desc: /*#__PURE__*/_jsxs("span", {
-        className: "sort-flag",
-        children: [/*#__PURE__*/_jsx("i", {
-          className: "triangle-up"
-        }), /*#__PURE__*/_jsx("i", {
-          className: "triangle-down triangle-down-red"
-        })]
-      })
-    }[header.column.getIsSorted()];
-  }
   var columnDef = useMemo(function () {
     return header.column.columnDef;
   }, [header]);
@@ -118,11 +100,13 @@ var Cell = function Cell(_ref) {
           })
         }) :
         // @ts-ignore
-        flexRender(columnDef.header, header.getContext()), canSorting ? sortingRender() : null]
+        flexRender(columnDef.header, header.getContext()), canSorting ? /*#__PURE__*/_jsx(Sort, {
+          sort: header.column.getIsSorted()
+        }) : null]
       }), /*#__PURE__*/_jsx("div", {
         className: "cell-right",
         onClick: header.column.getToggleSortingHandler(),
-        children: header.column.id === ColumnType.Darg || header.column.id === ColumnType.Selection || header.column.id === ColumnType.PlaceHolder ? null : /*#__PURE__*/_jsx("i", {
+        children: cannotDragColumn.includes(header.column.id) || header.column.getIsPinned() ? null : /*#__PURE__*/_jsx("i", {
           ref: dragRef,
           className: "icon iconfont-other icon-other-drag drag-handler"
         })

package/dist/components/TableMax/TableHeader/index.d.ts

@@ -12,6 +12,10 @@ type TableHeaderProps = {
     hasVerticalScrollBar: boolean;
     getHeaderCellProps?: (columns: TableMaxColumnType[]) => object;
     columnResizeMode: ColumnResizeMode;
+    pinShadowVisible: {
+        left: boolean;
+        right: boolean;
+    };
 };
-declare const TableHeader: ({ table, headerGroups, canFilter, enableFilters, canSorting, hasGroup, hasVerticalScrollBar, getHeaderCellProps, columnResizeMode, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeader: ({ table, headerGroups, canFilter, enableFilters, canSorting, hasGroup, hasVerticalScrollBar, getHeaderCellProps, columnResizeMode, pinShadowVisible, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default TableHeader;

package/dist/components/TableMax/TableHeader/index.js

@@ -9,6 +9,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 
 import { useEffect, useMemo } from 'react';
 import { Filter } from "../components/ColumnFilter";
+import { getShadowInfo } from "../utils";
 import Cell from "./Cell";
 import "./index.less";
 import { getPinningStyle } from "./utils";
@@ -24,7 +25,8 @@ var TableHeader = function TableHeader(_ref) {
     hasGroup = _ref.hasGroup,
     hasVerticalScrollBar = _ref.hasVerticalScrollBar,
     getHeaderCellProps = _ref.getHeaderCellProps,
-    columnResizeMode = _ref.columnResizeMode;
+    columnResizeMode = _ref.columnResizeMode,
+    pinShadowVisible = _ref.pinShadowVisible;
   var hasPinning = useMemo(function () {
     var columnPinning = table.getState().columnPinning;
     console.log(44445555, JSON.stringify(columnPinning.left) !== '[]', JSON.stringify(columnPinning.right) !== '[]');
@@ -55,9 +57,6 @@ var TableHeader = function TableHeader(_ref) {
   // );
 
   return /*#__PURE__*/_jsxs("table", {
-    style: {
-      width: table.getTotalSize() + hasVerticalScrollBar ? 10 : 0
-    },
     children: [/*#__PURE__*/_jsxs("colgroup", {
       children: [headerGroups === null || headerGroups === void 0 || (_headerGroups = headerGroups[headerGroups.length - 1]) === null || _headerGroups === void 0 || (_headerGroups = _headerGroups.headers) === null || _headerGroups === void 0 ? void 0 : _headerGroups.map(function (header) {
         return /*#__PURE__*/_jsx("col", {
@@ -75,9 +74,14 @@ var TableHeader = function TableHeader(_ref) {
             width: '100%'
           },
           children: [headerGroup.headers.map(function (header) {
+            // 列固定时的阴影判断逻辑
+            var _getShadowInfo = getShadowInfo(header.column, table),
+              isRightFirst = _getShadowInfo.isRightFirst,
+              isLeftLast = _getShadowInfo.isLeftLast;
             return /*#__PURE__*/_jsx("th", {
               colSpan: header.colSpan,
               style: _objectSpread({}, getPinningStyle(header, table, hasVerticalScrollBar)),
+              className: "".concat(isLeftLast && pinShadowVisible.left ? 'thead-tr-th-cell-fix-left-last' : '', " ").concat(isRightFirst && pinShadowVisible.right ? 'thead-tr-th-cell-fix-right-first' : ''),
               children: header.isPlaceholder ? null : /*#__PURE__*/_jsx(Cell, {
                 header: header,
                 table: table,
@@ -94,9 +98,13 @@ var TableHeader = function TableHeader(_ref) {
       }), canFilter && enableFilters ? /*#__PURE__*/_jsxs("tr", {
         className: "table-filter-tr",
         children: [headerGroups === null || headerGroups === void 0 || (_headerGroups2 = headerGroups[headerGroups.length - 1]) === null || _headerGroups2 === void 0 || (_headerGroups2 = _headerGroups2.headers) === null || _headerGroups2 === void 0 ? void 0 : _headerGroups2.map(function (header) {
+          // 列固定时的阴影判断逻辑
+          var _getShadowInfo2 = getShadowInfo(header.column, table),
+            isRightFirst = _getShadowInfo2.isRightFirst,
+            isLeftLast = _getShadowInfo2.isLeftLast;
           return /*#__PURE__*/_jsx("th", {
-            className: "table-filter-th",
             style: _objectSpread({}, getPinningStyle(header, table, hasVerticalScrollBar)),
+            className: "table-filter-th ".concat(isLeftLast && pinShadowVisible.left ? 'thead-tr-th-cell-fix-left-last' : '', " ").concat(isRightFirst && pinShadowVisible.right ? 'thead-tr-th-cell-fix-right-first' : ''),
             children: header.column.getCanFilter() ? /*#__PURE__*/_jsx("div", {
               children: /*#__PURE__*/_jsx(Filter, {
                 column: header.column

package/dist/components/TableMax/TableHeader/index.less

@@ -61,40 +61,6 @@ table {
     // opacity: 1;
   }
 
-  .sort-flag {
-    display: inline-block;
-    vertical-align: middle;
-    margin-left: 6px;
-    margin-right: 20px;
-
-    .triangle-up {
-      display: block;
-      width: 0;
-      height: 0;
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-bottom: 6px solid #b4b6bfff;
-
-      &-red {
-        border-bottom: 6px solid #fa541cff;
-      }
-    }
-
-    .triangle-down {
-      display: block;
-      width: 0;
-      height: 0;
-      margin-top: 3px;
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 6px solid #b4b6bfff;
-
-      &-red {
-        border-top: 6px solid #fa541cff;
-      }
-    }
-  }
-
   .cell-resize-handler {
     position: absolute;
     right: 0;
@@ -126,13 +92,40 @@ table {
   }
 }
 
+.thead-tr-th-cell-fix-left-last::after {
+  box-shadow: inset 10px 0 8px -8px #00000026;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: -1px;
+  width: 30px;
+  transform: translate(100%);
+  transition: box-shadow 0.3s;
+  content: '';
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.thead-tr-th-cell-fix-right-first::after {
+  box-shadow: inset -10px 0 8px -8px #00000026;
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  left: 0;
+  width: 30px;
+  transform: translate(-100%);
+  transition: box-shadow 0.3s;
+  content: '';
+  pointer-events: none;
+}
+
 .table-filter-tr {
   border-top: 1px solid @tableColor2;
 
   .table-filter-th {
     text-align: center;
     vertical-align: top;
-    padding: 6px 2px;
+    padding: 6px 4px;
 
     .custom-light-select:not(.custom-light-select-customize-input) .custom-light-select-selector {
       border-radius: 2px;

package/dist/components/TableMax/TableHeader/utils.js

@@ -1,9 +1,37 @@
+var getOffsetLeft = function getOffsetLeft(list, column, visibleColumnSizesMap) {
+  var x = 0;
+  for (var i = 0; i < list.length; i++) {
+    var curr = list[i];
+    if (curr === column.id) {
+      return x;
+    }
+    x += visibleColumnSizesMap[curr] || 0;
+  }
+  return x;
+};
+var getOffsetRight = function getOffsetRight(list, column, visibleColumnSizesMap) {
+  var x = 0;
+  for (var i = list.length - 1; i > 0; i--) {
+    var curr = list[i];
+    if (curr === column.id) {
+      return x;
+    }
+    x += visibleColumnSizesMap[curr] || 0;
+  }
+  return x;
+};
 export var getPinningStyle = function getPinningStyle(header, table, hasVerticalScrollBar) {
+  var _table$getVisibleLeaf;
   var column = header.column;
-  var visibleColumnSizes = table.getState().visibleColumnSizes;
+  var visibleColumnSizes = (_table$getVisibleLeaf = table.getVisibleLeafColumns()) === null || _table$getVisibleLeaf === void 0 ? void 0 : _table$getVisibleLeaf.map(function (item) {
+    return {
+      id: item.id,
+      size: item.getSize()
+    };
+  });
   var columnPinning = table.getState().columnPinning;
   var visibleColumnSizesMap = {};
-  visibleColumnSizes.map(function (item) {
+  visibleColumnSizes.forEach(function (item) {
     visibleColumnSizesMap[item === null || item === void 0 ? void 0 : item.id] = item.size;
   });
   switch (column.getIsPinned()) {
@@ -36,26 +64,4 @@ export var getPinningStyle = function getPinningStyle(header, table, hasVertical
         // width: column.getSize(),
       };
   }
-};
-var getOffsetLeft = function getOffsetLeft(list, column, visibleColumnSizesMap) {
-  var x = 0;
-  for (var i = 0; i < list.length; i++) {
-    var curr = list[i];
-    if (curr === column.id) {
-      return x;
-    }
-    x += visibleColumnSizesMap[curr] || 0;
-  }
-  return x;
-};
-var getOffsetRight = function getOffsetRight(list, column, visibleColumnSizesMap) {
-  var x = 0;
-  for (var i = list.length - 1; i > 0; i--) {
-    var curr = list[i];
-    if (curr === column.id) {
-      return x;
-    }
-    x += visibleColumnSizesMap[curr] || 0;
-  }
-  return x;
 };

package/dist/components/TableMax/TableMax.d.ts

@@ -13,6 +13,7 @@ export declare enum ColumnType {
     PlaceHolder = "placeholder-column",
     Expander = "expander"
 }
+export type ColumnSizing = Record<string, number>;
 export declare const TableContext: React.Context<TableContextType>;
 declare const _default: React.ForwardRefExoticComponent<TableMaxProps & React.RefAttributes<unknown>>;
 export default _default;