update: table优化

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

@@ -29,7 +29,7 @@ function parseColumn<T extends Record<string, unknown>>(
     const {dataIndex, title, render, align, fixed} = val;
     const meta = {
       align,
-      fixed: Boolean(fixed),
+      fixed,
       disabledSort: Boolean(fixed) || dataIndex === 'no',
     };
 
@@ -203,7 +203,7 @@ export function useTable<T extends Record<string, any>>(
   ] as const;
 }
 
-export function useTableShadow(tableSize: number, id?: string) {
+export function useTableShadow(tableSize: number) {
   const [isEnd, setIsEnd] = useState(false);
   const scrollTableRef = useRef<HTMLDivElement>(null);
   const headerTableRef = useRef<HTMLDivElement>(null);
@@ -217,7 +217,9 @@ export function useTableShadow(tableSize: number, id?: string) {
               scrollWidth = el?.scrollWidth ?? 0,
               scrollLeft = el?.scrollLeft ?? 0;
 
-        headerTableRef.current!.scrollLeft = el?.scrollLeft ?? 0;
+        headerTableRef.current && (
+          headerTableRef.current.scrollLeft = el?.scrollLeft ?? 0
+        );
 
         setIsEnd(scrollLeft + elWidth >= scrollWidth);
       }
@@ -232,7 +234,7 @@ export function useTableShadow(tableSize: number, id?: string) {
         el?.removeEventListener('scroll', listener);
       };
     },
-    [id, tableSize],
+    [tableSize],
   );
 
   return {isEnd, scrollTableRef, headerTableRef};

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

@@ -118,72 +118,6 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
                 </thead>
               </table>
             </div>
-            <div className="ld-table-body-wrapper" ref={scrollTableRef}>
-              <table
-                className={classNames('ld-table', {
-                  'ld-table-enabled-fixed-shadow': !isEnd,
-                })}
-                style={{width: getCenterTotalSize()}}
-              >
-                <tbody className="ld-table-body">
-                  {getRowModel().rows.length > 0 ? (
-                    getRowModel().rows.map(function({id, getVisibleCells}) {
-                      return (
-                        <tr key={id}>
-                          {getVisibleCells().map(function({
-                            id,
-                            column,
-                            getContext,
-                          }) {
-                            const {align, fixed} = column.columnDef.meta as {
-                              align?: 'left' | 'center' | 'right';
-                              fixed: boolean;
-                            };
-                            return (
-                              <td
-                                key={id}
-                                className={classNames({
-                                  'ld-table-fixed-right ld-table-fixed-shadow': fixed,
-                                })}
-                                style={{
-                                  width: column.getSize(),
-                                  textAlign: align ?? 'left',
-                                }}
-                              >
-                                {flexRender(
-                                  column.columnDef.cell,
-                                  getContext(),
-                                )}
-                              </td>
-                            );
-                          })}
-                        </tr>
-                      );
-                    })
-                  ) : (
-                    <tr>
-                      <td
-                        colSpan={getHeaderGroups()[0].headers.length}
-                        style={{padding: 0}}
-                      >
-                        <Empty
-                          image={Empty.PRESENTED_IMAGE_SIMPLE}
-                          style={{
-                            width: '400px',
-                            position: 'sticky',
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                            overflow: 'hidden',
-                            margin: 0,
-                            padding: '50px 10px',
-                          }}
-                        />
-                      </td>
-                    </tr>
-                  )}
-                </tbody>
-              </table>
-            </div>
             <DragOverlay>
               {active ? (
                 <HeaderTh
@@ -195,6 +129,73 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
             </DragOverlay>
           </SortableContext>
         </DndContext>
+        <div className="ld-table-body-wrapper" ref={scrollTableRef}>
+          <table
+            className={classNames('ld-table', {
+              'ld-table-enabled-fixed-shadow': !isEnd,
+            })}
+            style={{width: getCenterTotalSize()}}
+          >
+            <tbody className="ld-table-body">
+              {getRowModel().rows.length > 0 ? (
+                getRowModel().rows.map(function({id, getVisibleCells}) {
+                  return (
+                    <tr key={id}>
+                      {getVisibleCells().map(function({
+                        id,
+                        column,
+                        getContext,
+                      }) {
+                        const {align, fixed} = column.columnDef.meta as {
+                          align?: 'left' | 'center' | 'right';
+                          fixed: boolean;
+                        };
+                        return (
+                          <td
+                            key={id}
+                            className={classNames({
+                              'ld-table-fixed-right ld-table-fixed-shadow': fixed,
+                            })}
+                            style={{
+                              width: column.getSize(),
+                              textAlign: align ?? 'left',
+                            }}
+                          >
+                            {flexRender(
+                              column.columnDef.cell,
+                              getContext(),
+                            )}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })
+              ) : (
+                <tr>
+                  <td
+                    colSpan={getHeaderGroups()[0].headers.length}
+                    style={{padding: 0}}
+                  >
+                    <Empty
+                      image={Empty.PRESENTED_IMAGE_SIMPLE}
+                      style={{
+                        width: '400px',
+                        position: 'sticky',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        overflow: 'hidden',
+                        margin: 0,
+                        padding: '50px 10px',
+                      }}
+                    />
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+
       </div>
       <Pagination
         className="ld-table-pagination"