wip: tsup

example/package.json

@@ -7,7 +7,7 @@
     "upgrade:deps": "pnpm up -i --latest"
   },
   "dependencies": {
-    "@ant-design/pro-table": "^3.2.9",
+    "@ant-design/pro-table": "^3.3.1",
     "@minko-fe/use-antd-resizable-header": "link:..",
     "antd": "5.1.2",
     "react": "^18.2.0",

example/src/42/index.tsx

@@ -0,0 +1,83 @@
+import { Tooltip } from 'antd'
+import { useAntdResizableHeader } from '@minko-fe/use-antd-resizable-header'
+import '@minko-fe/use-antd-resizable-header/dist/style.css'
+import React from 'react'
+import ProTable from '@ant-design/pro-table'
+
+const columns: any[] = [
+  {
+    title: 'SN',
+    dataIndex: 'sn',
+    key: 'sn',
+    align: 'center',
+    width: 90,
+  },
+  {
+    title: '类型',
+    dataIndex: 'deviceType',
+    key: 'deviceType',
+    align: 'center',
+    width: 90,
+  },
+  {
+    title: '设备',
+    dataIndex: 'dis',
+    key: 'dis',
+    align: 'center',
+    width: 90,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+    align: 'center',
+    width: 90,
+    ellipsis: false, // ellipsis 跟 tooltip冲突
+    render: (text: any) => {
+      // debugger
+      return (
+        <Tooltip title={text}>
+          <div>{text}</div>
+        </Tooltip>
+      )
+    },
+  },
+]
+
+const data: any[] = []
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i,
+    name: 'John Brown',
+    age: i + 1,
+    street: 'Lake Park',
+    building: 'C',
+    number: 2035,
+    remark: 'Lake Street 42',
+    companyName: 'SoftLake Co',
+    gender: 'M',
+  })
+}
+
+const ResizableTable = () => {
+  const { components, resizableColumns, tableWidth } = useAntdResizableHeader({
+    columns,
+  })
+  return (
+    <>
+      <div>
+        <h1>Hello!</h1>
+        <ProTable
+          columns={resizableColumns}
+          components={components}
+          dataSource={data}
+          scroll={{ x: tableWidth }}
+          toolBarRender={false}
+          search={false}
+        />
+      </div>
+    </>
+  )
+}
+
+export default ResizableTable

example/src/43/index.tsx

@@ -0,0 +1,60 @@
+import { useAntdResizableHeader } from '@minko-fe/use-antd-resizable-header'
+import '@minko-fe/use-antd-resizable-header/dist/style.css'
+import React, { useMemo } from 'react'
+import { Table } from 'antd'
+
+const columns: any[] = [
+  {
+    title: <div>title1</div>,
+    dataIndex: 'putrecNo',
+    width: 150,
+    key: 'putrecNo',
+    ellipsis: true,
+    search: false,
+  },
+  {
+    title: <div>title2</div>,
+    dataIndex: 'createTime',
+    key: 'createTime',
+    valueType: 'dateRange',
+    hideInTable: true,
+  },
+]
+
+const data: any[] = []
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i,
+    name: 'John Brown',
+    age: i + 1,
+    street: 'Lake Park',
+    building: 'C',
+    number: 2035,
+    remark: 'Lake Street 42',
+    companyName: 'SoftLake Co',
+    gender: 'M',
+  })
+}
+
+const ResizableTable = () => {
+  const { components, resizableColumns, tableWidth } = useAntdResizableHeader({
+    columns: useMemo(() => columns, []),
+    columnsState: {
+      persistenceKey: 'localKey',
+      persistenceType: 'localStorage',
+    },
+    onResizeEnd: (col) => {
+      console.log(col)
+    },
+  })
+  return (
+    <>
+      <div>
+        <h1>Hello!</h1>
+        <Table columns={resizableColumns} components={components} dataSource={data} scroll={{ x: tableWidth }} />
+      </div>
+    </>
+  )
+}
+
+export default ResizableTable

example/src/App.tsx

@@ -29,6 +29,14 @@ export default function App() {
       path: '/37',
       component: () => import('./37'),
     },
+    {
+      path: '/42',
+      component: () => import('./42'),
+    },
+    {
+      path: '/43',
+      component: () => import('./43'),
+    },
   ]
 
   const element = useRoutes(