feat: 调整表格宽度完成

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

@@ -4,47 +4,51 @@ import {
   getCoreRowModel,
 } from '@tanstack/react-table';
 import {ColumnType} from 'antd/es/table';
-import {useMemo, useState} from 'react';
+import {useMemo, useRef, useState} from 'react';
 
-export function useTable<T extends Record<string, any>>(
-  columns: ColumnType<T>[],
-  data: T[],
-) {
-  const columnList = useMemo(function () {
-    const hepler = createColumnHelper<Record<string, any>>();
+function parseColumn<T>(columns: ColumnType<T>[]) {
+  const hepler = createColumnHelper<Record<string, any>>();
 
-    const tableColumns = columns.map(function ({dataIndex, title, render}) {
-      if (render) {
-        return hepler.display({
-          id: dataIndex!.toString(),
-          header: title?.toString(),
-          cell(props) {
-            return render(
-              props.getValue(),
-              props.row.original as T,
-              props.row.index,
-            );
-          },
-        });
-      }
-      return hepler.accessor(dataIndex!.toString(), {
+  const tableColumns = columns.map(function (val) {
+    console.log(val);
+    const {dataIndex, title, render} = val;
+    if (render) {
+      return hepler.display({
+        id: dataIndex?.toString() ?? 'id',
         header: title?.toString(),
-        cell: props => props.getValue(),
+        cell(props) {
+          return render(
+            props.getValue(),
+            props.row.original as T,
+            props.row.index,
+          );
+        },
       });
+    }
+    return hepler.accessor(dataIndex!.toString(), {
+      header: title?.toString(),
+      cell: props => props.getValue(),
     });
+  });
 
-    tableColumns.unshift(
-      hepler.display({
-        header: '序号',
-        id: 'no',
-        cell({row}) {
-          return row.index;
-        },
-      }),
-    );
+  tableColumns.unshift(
+    hepler.display({
+      header: '序号',
+      id: 'no',
+      cell({row}) {
+        return row.index;
+      },
+    }),
+  );
+
+  return tableColumns;
+}
 
-    return tableColumns;
-  }, []);
+export function useTable<T extends Record<string, any>>(
+  columns: ColumnType<T>[],
+  data: T[],
+) {
+  const columnList = useRef(parseColumn(columns));
 
   const [columnSizing, setColumnSizing] = useState(function () {
     const obj: Record<string, number> = {no: 64};
@@ -60,11 +64,13 @@ export function useTable<T extends Record<string, any>>(
 
   const table = useReactTable({
     data,
-    columns: columnList,
+    columns: columnList.current,
     state: {
       columnSizing,
     },
     getCoreRowModel: getCoreRowModel(),
+    onColumnSizingChange: setColumnSizing,
+    columnResizeMode: 'onChange',
   });
 
   return {...table};

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

@@ -7,7 +7,6 @@
 }
 
 .table {
-  box-sizing: border-box;
   min-width: 100%;
   padding: 0;
   margin: 0;
@@ -16,12 +15,15 @@
   color: rgb(0 0 0 / 88%);
   text-align: start;
   list-style: none;
-  table-layout: auto;
   border-spacing: 0;
   border-collapse: separate;
   background: #fff;
   border-top: 1px solid #f0f0f0;
   border-radius: 8px 8px 0 0;
+
+  & td {
+    min-width: 0;
+  }
 }
 
 .table-head {
@@ -29,12 +31,13 @@
 
   & th {
     position: relative;
+    min-width: 0;
     padding: 16px;
     margin: 0;
     font-weight: 600;
     color: rgb(0 0 0 / 88%);
     text-align: center;
-    overflow-wrap: break-word;
+    overflow-wrap: anywhere;
     list-style: none;
     background: #fafafa;
     border-inline-end: 1px solid #f0f0f0;
@@ -51,10 +54,32 @@
 .table-body {
   & td {
     position: relative;
+    min-width: 0;
     padding: 16px;
-    overflow-wrap: break-word;
+    overflow-wrap: anywhere;
     border-inline-end: 1px solid #f0f0f0;
     border-bottom: 1px solid #f0f0f0;
     transition: background 0.2s, border-color 0.2s;
   }
 }
+
+.resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5px;
+  height: 100%;
+  touch-action: none;
+  cursor: col-resize;
+  user-select: none;
+  background: rgb(0 0 0 / 50%);
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.resizing {
+  opacity: 1;
+}

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

@@ -12,6 +12,7 @@ import {ReactElement, useMemo} from 'react';
 import {useTable} from './hooks';
 import {flexRender} from '@tanstack/react-table';
 import css from './index.module.css';
+import classNames from 'classnames';
 
 type Props<T> = {
   columns: ColumnsType<T>;
@@ -77,6 +78,13 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
                             header.column.columnDef.header,
                             header.getContext(),
                           )}
+
+                      <div
+                        onMouseDown={header.getResizeHandler()}
+                        className={classNames(css.resizer, {
+                          [css.resizing]: header.column.getIsResizing(),
+                        })}
+                      />
                     </th>
                   ))}
                 </tr>