feat: table增加fixed

packages/app/src/components/table/header-th/index.tsx

@@ -13,11 +13,15 @@ const HeaderTh: FC<Props> = function ({header, useDiv}) {
   const {setNodeRef, attributes, listeners} = useSortable({
     id: header.id,
     data: {header},
+    disabled: header.id === 'id',
   });
 
+  const {fixed} = header.column.columnDef.meta as {fixed: boolean};
+  const isResizing = header.column.getIsResizing();
+
   const style: CSSProperties = {
     width: header.getSize(),
-    cursor: 'move',
+    cursor: isResizing ? 'col-resize' : fixed ? 'auto' : 'move',
     boxShadow: useDiv
       ? '0.5px 0.6px 12.3px rgba(0, 0, 0, 0.059),4px 5px 80px rgba(0, 0, 0, 0.1)'
       : '',
@@ -31,7 +35,7 @@ const HeaderTh: FC<Props> = function ({header, useDiv}) {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        className={css.tableHeadTh}
+        className={classNames(css.tableHeadTh)}
       >
         {header.isPlaceholder
           ? null
@@ -55,17 +59,19 @@ const HeaderTh: FC<Props> = function ({header, useDiv}) {
       ref={setNodeRef}
       {...attributes}
       {...listeners}
-      className={css.tableHeadTh}
+      className={classNames(css.tableHeadTh, {[css.fixedRight]: fixed})}
     >
       {flexRender(header.column.columnDef.header, header.getContext())}
 
-      <div
-        onMouseDown={header.getResizeHandler()}
-        onPointerDown={e => e.stopPropagation()}
-        className={classNames(css.resizer, {
-          [css.resizing]: header.column.getIsResizing(),
-        })}
-      />
+      {!fixed ? (
+        <div
+          onMouseDown={header.getResizeHandler()}
+          onPointerDown={e => e.stopPropagation()}
+          className={classNames(css.resizer, {
+            [css.resizing]: isResizing,
+          })}
+        />
+      ) : null}
     </th>
   );
 };

packages/app/src/components/table/hooks.ts

@@ -18,7 +18,9 @@ function parseColumn<T>(columns: ColumnType<T>[]) {
   const hepler = createColumnHelper<Record<string, any>>();
 
   const tableColumns = columns.map(function (val) {
-    const {dataIndex, title, render, align} = val;
+    const {dataIndex, title, render, align, fixed} = val;
+    const meta = {align, fixed: Boolean(fixed)};
+
     if (render) {
       return hepler.display({
         id: dataIndex!.toString(),
@@ -30,7 +32,7 @@ function parseColumn<T>(columns: ColumnType<T>[]) {
             props.row.index,
           );
         },
-        meta: {align},
+        meta,
       });
     }
 
@@ -38,7 +40,7 @@ function parseColumn<T>(columns: ColumnType<T>[]) {
       header: title?.toString(),
       cell: props => props.getValue(),
       minSize: 0,
-      meta: {align},
+      meta,
     });
   });
 
@@ -140,6 +142,9 @@ export function useTable<T extends Record<string, any>>(
 
     const {id: activeId} = active,
       {id: overId} = over;
+
+    if (overId === 'id') return;
+
     if (activeId === overId) return;
     const {setColumnOrder} = table;
 

packages/app/src/components/table/index.module.css

@@ -24,12 +24,18 @@
 
   & td {
     min-width: 0;
+    background-color: #fff;
   }
 }
 
+.fixed-right {
+  position: sticky !important;
+  right: 0;
+  border-top-left-radius: 0 !important;
+  outline: 1px solid #f0f0f0;
+}
+
 .table-head {
-  position: sticky;
-  top: 0;
   text-align: center;
 }
 

packages/app/src/components/table/index.tsx

@@ -23,6 +23,7 @@ import {
   SortableContext,
   horizontalListSortingStrategy,
 } from '@dnd-kit/sortable';
+import classNames from 'classnames';
 
 type Props<T> = {
   columns: ColumnsType<T>;
@@ -98,18 +99,17 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
                           column,
                           getContext,
                         }) {
-                          const align =
-                            (
-                              column.columnDef.meta as {
-                                align: 'left' | 'right' | 'center';
-                              }
-                            )?.align ?? 'left';
+                          const {align, fixed} = column.columnDef.meta as {
+                            align?: 'left' | 'center' | 'right';
+                            fixed: boolean;
+                          };
                           return (
                             <td
                               key={id}
+                              className={classNames({[css.fixedRight]: fixed})}
                               style={{
                                 width: column.getSize(),
-                                textAlign: align,
+                                textAlign: align ?? 'left',
                               }}
                             >
                               {flexRender(column.columnDef.cell, getContext())}