Browse Source

update: 增加禁用排序和宽度调整

xyh 2 years ago
parent
commit
3f8812fa3f

+ 17 - 3
packages/app/src/components/table/HeaderTh.tsx

@@ -7,15 +7,29 @@ type Props = {
   header: Header<Record<string, any>, unknown>;
   useDiv?: boolean;
   isSecondLevel?: boolean;
+  disabledSizeChange?: boolean;
+  disabledHeadSort?: boolean;
 };
 
-const HeaderTh: FC<Props> = function({header, useDiv, isSecondLevel}) {
-  const {fixed, disabledSort, fixedStyle} = header.column.columnDef.meta as {
+const HeaderTh: FC<Props> = function({
+  header,
+  useDiv,
+  isSecondLevel,
+  disabledSizeChange,
+  disabledHeadSort,
+}) {
+  const {
+    fixed,
+    disabledSort: colDisabledSort,
+    fixedStyle,
+  } = header.column.columnDef.meta as {
     fixed?: 'left' | 'right';
     disabledSort: boolean;
     fixedStyle: CSSProperties,
   };
 
+  const disabledSort = colDisabledSort || disabledHeadSort;
+
   const {setNodeRef, attributes, listeners} = useSortable({
     id: header.id,
     data: {header},
@@ -65,7 +79,7 @@ const HeaderTh: FC<Props> = function({header, useDiv, isSecondLevel}) {
     >
       {flexRender(header.column.columnDef.header, header.getContext())}
 
-      {!fixed ? (
+      {!fixed && !disabledSizeChange ? (
         <div
           onMouseDown={header.getResizeHandler()}
           onPointerDown={e => e.stopPropagation()}

+ 10 - 1
packages/app/src/components/table/index.tsx

@@ -48,6 +48,8 @@ type Props<T extends Record<string, unknown>> = {
   isSecondLevel?: boolean;
   rowSelection?: RowSelectionState;
   setRowSelection?: Dispatch<SetStateAction<RowSelectionState>>;
+  disabledHeadSort?: boolean;
+  disabledSizeChange?: boolean;
 };
 
 function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
@@ -62,6 +64,8 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
     rowSelection,
     setRowSelection,
     settingContext,
+    disabledHeadSort,
+    disabledSizeChange,
   } = props;
   const [{page, pageSize}, {setPageContext}] = useTablePageContext(pageContext);
   const [{isSearching}] = useTableSearchContext(searchContext);
@@ -112,7 +116,12 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
                     return (
                       <tr key={id}>
                         {headers.map(header => (
-                          <HeaderTh key={header.id} header={header} />
+                          <HeaderTh
+                            key={header.id}
+                            header={header}
+                            disabledSizeChange={disabledSizeChange}
+                            disabledHeadSort={disabledHeadSort}
+                          />
                         ))}
                       </tr>
                     );