feat: 固定列不可以操作

src/components/SortableTableHeader/CustomColumnsConfigure/CustomColumnsConfigureModal.tsx

 /**
  * @Description 自定义配置表格Columns弹窗组件
  */
-import React, { useState, useImperativeHandle } from 'react';
+import React, { useState, useImperativeHandle, useMemo } from 'react';
 import { Modal, Checkbox, message } from 'antd';
 import { CloseOutlined, HolderOutlined } from '@ant-design/icons';
 import { ColumnType } from 'antd/lib/table/interface';
 import { CheckboxValueType } from 'antd/lib/checkbox/Group';
 import { ReactSortable, ItemInterface } from "react-sortablejs";
+import { SortableColumnType } from '../interface';
 import './index.less';
 
+const filterUndraggableColumn = (dataSource: SortableColumnType[]) => dataSource.filter((item) => item.draggable);
+
 export interface CustomColumnsConfigureModalProps {
   /**
    * Table columns data
    * 表格默认的 columns，只在初始时生效。
    * 如果 columns 是异步获取的，可使用 resetDefaultColumns 方法重置 defaultColumns
    */
-  defaultColumns: ColumnType<any>[],
+  defaultColumns: SortableColumnType<any>[],
   /**
    * 是否可见
    */
@@ -41,11 +44,11 @@ const CustomColumnsConfigureModal: React.ForwardRefRenderFunction<CustomColumnsC
     onClose,
     onConfirm,
   } = props;
-  const [columnsSource, setColumnsSource] = useState<ColumnType<any>[]>(defaultColumns || []);
-  const [innerColumns, setInnerColumns] = useState<ColumnType<any>[]>(defaultColumns || []);
+  const [columnsSource, setColumnsSource] = useState<SortableColumnType<any>[]>(defaultColumns || []);
+  const [innerColumns, setInnerColumns] = useState<SortableColumnType<any>[]>(defaultColumns || []);
   const [checks, setChecks] = useState<CheckboxValueType[]>(defaultColumns ? defaultColumns.map((item) => item.dataIndex as string) : []);
 
-  const resetDefaultColumns = (newColumns: ColumnType<any>[]) => {
+  const resetDefaultColumns = (newColumns: SortableColumnType<any>[]) => {
     if (!Array.isArray(newColumns)) {
       return;
     }
@@ -99,6 +102,8 @@ const CustomColumnsConfigureModal: React.ForwardRefRenderFunction<CustomColumnsC
     onConfirm?.(innerColumns);
   };
 
+  const filtered = useMemo(() => filterUndraggableColumn(innerColumns), [innerColumns]);
+
   return (
     <Modal
       title="自定义表格显示"
@@ -121,7 +126,13 @@ const CustomColumnsConfigureModal: React.ForwardRefRenderFunction<CustomColumnsC
           <div className="columns-configure-cell-content">
             <Checkbox.Group value={checks} onChange={handleCheckboxChange}>
               {columnsSource.map((item) => (
-                <div className="columns-configure-checkbox-item" key={item.dataIndex as string}>
+                <div
+                  className="columns-configure-checkbox-item"
+                  key={item.dataIndex as string}
+                  style={{
+                    display: item.draggable ? 'block' : 'none',
+                  }}
+                >
                   <Checkbox value={item.dataIndex}>{item.title}</Checkbox>
                 </div>
               ))}
@@ -138,7 +149,7 @@ const CustomColumnsConfigureModal: React.ForwardRefRenderFunction<CustomColumnsC
               setList={setInnerColumns}
               handle=".columns-draggable-handle"
             >
-              {innerColumns.map((item) => (
+              {filtered.map((item) => (
                 <div className="columns-configure-draggable-item" key={item.dataIndex as string}>
                   <div className={`columns-configure-draggable-item-handle columns-draggable-handle`}>
                     <HolderOutlined style={{ color: 'rgba(0, 0, 0, 0.45)' }} />

src/components/SortableTableHeader/CustomColumnsConfigure/index.less

@@ -3,14 +3,12 @@
 .columns-configure {
 
   &-modal {
-    :global {
-      .ant-modal {
-        border-radius: 8px;
-        
-        &-header {
-          padding: @padding-md;
-          border-bottom: none;
-        }
+    .ant-modal {
+      border-radius: 8px;
+      
+      &-header {
+        padding: @padding-md;
+        border-bottom: none;
       }
     }
   }

src/components/SortableTableHeader/index.tsx

@@ -3,9 +3,12 @@ import DraggableHeaderCell from './DraggableHeaderCell';
 import CustomColumnsConfigure from './CustomColumnsConfigure';
 import useSortableColumns from './useSortableColumns';
 
+import { SortableColumnType } from './interface';
+
 export {
   CustomColumnsConfigure,
   useSortableColumns,
+  SortableColumnType,
 };
 
 export * from './DraggableHeaderRow';

src/components/SortableTableHeader/interface.ts

@@ -2,4 +2,15 @@ import { ColumnType } from 'antd/lib/table/interface';
 
 export interface SortableContextProps<R = any> {
   onColumnWidthChange: (value: number, index: number) => void,
+}
+
+export interface SortableColumnType<R = any> extends ColumnType<R> {
+  /**
+   * 是否可拖拽排序
+   */
+  draggable?: boolean,
+  /**
+   * 是否可改变 col 大小
+   */
+  resizable?: boolean,
 }
\ No newline at end of file

src/components/SortableTableHeader/useSortableColumns.ts

@@ -4,6 +4,7 @@
 import { useState } from 'react';
 import { ColumnType } from 'antd/lib/table/interface';
 import { SortableColumn } from './DraggableHeaderRow';
+import { SortableColumnType } from './interface';
 
 // 拓展 th 属性
 // Antd的Table组件，如果想给 th 添加额外的属性只能通过 onHeaderCell
@@ -24,13 +25,15 @@ const normailizeAdditionalHeaderCell = (dataSource: ColumnType<any>[]) => {
           resizable: index !== dataSource.length - 1,
         };
       },
+      draggable: !item.fixed,
+      resizable: index !== dataSource.length - 1,
     };
     ret.push(atom);
   });
   return ret;
 };
 
-const useSortableColumns = <R>(defaultColumns: ColumnType<R>[]): [ColumnType<R>[], (value: ColumnType<R>[]) => void] => {
+const useSortableColumns = <R>(defaultColumns: ColumnType<R>[]): [SortableColumnType<R>[], (value: ColumnType<R>[]) => void] => {
   const [columns, setColumns] = useState(normailizeAdditionalHeaderCell(defaultColumns));
 
   const handleSetColumns = (value: ColumnType<R>[]) => {