feat: 配置每个单元格宽度

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

@@ -4,7 +4,7 @@ import {
   getCoreRowModel,
 } from '@tanstack/react-table';
 import {ColumnType} from 'antd/es/table';
-import {useMemo} from 'react';
+import {useMemo, useState} from 'react';
 
 export function useTable<T extends Record<string, any>>(
   columns: ColumnType<T>[],
@@ -36,6 +36,7 @@ export function useTable<T extends Record<string, any>>(
     tableColumns.unshift(
       hepler.display({
         header: '序号',
+        id: 'no',
         cell({row}) {
           return row.index;
         },
@@ -45,9 +46,26 @@ export function useTable<T extends Record<string, any>>(
     return tableColumns;
   }, []);
 
-  return useReactTable({
+  const [columnSizing, setColumnSizing] = useState(function () {
+    const obj: Record<string, number> = {no: 64};
+
+    columns.forEach(function ({dataIndex, width}) {
+      if (dataIndex && width) {
+        obj[dataIndex.toString()] = Number(width);
+      }
+    });
+
+    return obj;
+  });
+
+  const table = useReactTable({
     data,
     columns: columnList,
+    state: {
+      columnSizing,
+    },
     getCoreRowModel: getCoreRowModel(),
   });
+
+  return {...table};
 }

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

@@ -38,7 +38,6 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
   const [isSearching] = useTableSearchState(searchContext);
   const colWidth = calcColumnsWidth(columns);
   const scrollX = colWidth > 0 ? {x: colWidth} : void 0;
-  const {getHeaderGroups, getRowModel} = useTable(columns, data);
 
   const tableColumns = useMemo(
     function () {
@@ -57,16 +56,21 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
     [columns],
   );
 
+  const {getHeaderGroups, getRowModel, getCenterTotalSize} = useTable(
+    columns,
+    data,
+  );
+
   return (
     <Spin spinning={isSearching}>
       <div className={css.tableWrapper}>
-        <table className={css.table}>
+        <table className={css.table} style={{width: getCenterTotalSize()}}>
           <thead className={css.tableHead}>
             {getHeaderGroups().map(function ({id, headers}) {
               return (
                 <tr key={id}>
                   {headers.map(header => (
-                    <th key={header.id}>
+                    <th key={header.id} style={{width: header.getSize()}}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
@@ -85,7 +89,7 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
                 <tr key={id}>
                   {getVisibleCells().map(function ({id, column, getContext}) {
                     return (
-                      <td key={id}>
+                      <td key={id} style={{width: column.getSize()}}>
                         {flexRender(column.columnDef.cell, getContext())}
                       </td>
                     );