fix: local columns is undefined at first render

example/src/CodeBox/TableComponent.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react'
+import { Table } from 'antd'
+import useATRH from '@minko-fe/use-antd-resizable-header'
+import '@minko-fe/use-antd-resizable-header/dist/style.css'
+
+interface IProps {
+  columns: any[]
+  dataSource: any[]
+}
+const TableComponent: React.FC<IProps> = (props) => {
+  const { components, resizableColumns, tableWidth } = useATRH({
+    columns: useMemo(() => props.columns, [props.columns]),
+    minConstraints: 70,
+    defaultWidth: 222,
+    columnsState: {
+      persistenceType: 'localStorage',
+      persistenceKey: 'localColumns',
+    },
+  })
+
+  return (
+    <div style={{ width: 500 }}>
+      <Table
+        columns={resizableColumns}
+        components={components}
+        dataSource={props.dataSource}
+        scroll={{ x: tableWidth }}
+      />
+    </div>
+  )
+}
+
+// eslint-disable-next-line no-restricted-syntax
+export default TableComponent

example/src/CodeBox/index.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react'
+import { Tag } from 'antd'
+import TableComponent from './TableComponent'
+
+const data = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    tags: ['nice', 'developer'],
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+]
+
+const Hello: React.FC = () => {
+  const [otherColumns, setOtherColumns] = useState<any[]>([])
+
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      // width: 300,
+      render: (text) => <a>{text}</a>,
+    },
+    {
+      title: 'Address',
+      dataIndex: 'address',
+      key: 'address',
+      width: 100,
+    },
+    ...otherColumns,
+  ]
+
+  useEffect(() => {
+    setTimeout(() => {
+      setOtherColumns([
+        {
+          title: 'Age',
+          dataIndex: 'age',
+          key: 'age',
+          width: 100,
+        },
+        {
+          title: 'Tags',
+          key: 'tags',
+          dataIndex: 'tags',
+          width: 200,
+          render: (tags) => (
+            <>
+              {tags.map((tag) => {
+                let color = tag.length > 5 ? 'geekblue' : 'green'
+                if (tag === 'loser') {
+                  color = 'volcano'
+                }
+                return (
+                  <Tag color={color} key={tag}>
+                    {tag.toUpperCase()}
+                  </Tag>
+                )
+              })}
+            </>
+          ),
+        },
+      ] as any[])
+    }, 300)
+  }, [])
+
+  return (
+    <div style={{ width: 500 }}>
+      <TableComponent dataSource={data} columns={columns} />
+    </div>
+  )
+}
+
+export default Hello

example/src/main.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
-import App from './App'
+// import App from './App'
+import CodeBox from './CodeBox'
 
 const root = ReactDOM.createRoot(document.getElementById('root')!)
 
-root.render(<App />)
+root.render(<CodeBox />)

package.json

@@ -25,8 +25,8 @@
   ],
   "license": "MIT",
   "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build",
+    "dev": "vite build --watch --mode development",
+    "build": "vite build --mode production",
     "lint": "eslint . --fix",
     "lint-staged": "lint-staged",
     "prettier": "prettier -c --write \"src/**/*\"",

src/utils/useLocalColumns.ts

@@ -14,9 +14,9 @@ function mergeColumns<T extends any[]>(src: T, target: T, mergeKey: string): T {
   if (Array.isArray(res)) {
     res.forEach((t, i) => {
       if (t.children) {
-        mergeColumns(t.children, target[i].children, mergeKey)
+        mergeColumns(t.children, target[i]?.children, mergeKey)
       } else {
-        res[i][mergeKey] = target[i][mergeKey]
+        res[i][mergeKey] = target[i]?.[mergeKey]
       }
     })
   }

vite.config.ts

@@ -1,43 +1,48 @@
-import { defineConfig } from 'vite'
+import { ConfigEnv, UserConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import typescript from '@rollup/plugin-typescript'
 import path from 'path'
 
 const env = process.env.NODE_ENV
 
-export default defineConfig({
-  plugins: [react()],
-  define: {
-    'process.env.NODE_ENV': JSON.stringify(env || 'development'),
-  },
-  build: {
-    outDir: 'dist',
-    lib: {
-      entry: path.resolve(__dirname, 'src/index.ts'),
-      name: 'use-antd-resizable-header',
-      fileName: (format) => `index.${format}.js`,
-      formats: ['es', 'umd'],
+export default ({ mode }: ConfigEnv): UserConfig => {
+  const isDev = mode === 'development'
+
+  return {
+    plugins: [react()],
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(env || 'development'),
     },
-    minify: 'esbuild',
-    target: 'es2015',
-    cssCodeSplit: false,
-    reportCompressedSize: false,
-    rollupOptions: {
-      external: ['react', 'react-dom'],
-      output: {
-        globals: {
-          'react': 'react',
-          'react-dom': 'react-dom',
+    build: {
+      outDir: 'dist',
+      lib: {
+        entry: path.resolve(__dirname, 'src/index.ts'),
+        name: 'use-antd-resizable-header',
+        fileName: (format) => `index.${format}.js`,
+        formats: ['es', 'umd'],
+      },
+      minify: 'esbuild',
+      target: 'es2015',
+      cssCodeSplit: false,
+      reportCompressedSize: false,
+      sourcemap: isDev,
+      rollupOptions: {
+        external: ['react', 'react-dom'],
+        output: {
+          globals: {
+            'react': 'react',
+            'react-dom': 'react-dom',
+          },
+          exports: 'named',
         },
-        exports: 'named',
+        plugins: [
+          typescript({
+            tsconfig: path.resolve(__dirname, './tsconfig.json'),
+            sourceMap: isDev,
+            include: ['src/index.ts', 'src/utils/useGetDataIndexColumns.ts', 'src/useAntdResizableHeader.tsx'],
+          }),
+        ],
       },
-      plugins: [
-        typescript({
-          tsconfig: path.resolve(__dirname, './tsconfig.json'),
-          sourceMap: false,
-          include: ['src/index.ts', 'src/utils/useGetDataIndexColumns.ts', 'src/useAntdResizableHeader.tsx'],
-        }),
-      ],
     },
-  },
-})
+  }
+}