From e43ee943e5e373396618742f49a57865aaed79da Mon Sep 17 00:00:00 2001
From: chenliandong <chenliandong@chipcoo.com>
Date: Tue, 7 Jan 2025 13:49:08 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=A8=E5=88=97?=
 =?UTF-8?q?=E9=A1=BA=E5=BA=8F=20playground?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 playground/app/routes/_layout+/_layout.tsx    |   4 +
 .../_layout+/row-selection-order/index.tsx    | 131 ++++++++++++++++++
 2 files changed, 135 insertions(+)
 create mode 100644 playground/app/routes/_layout+/row-selection-order/index.tsx

diff --git a/playground/app/routes/_layout+/_layout.tsx b/playground/app/routes/_layout+/_layout.tsx
index 2dc10f4..74d8f0d 100644
--- a/playground/app/routes/_layout+/_layout.tsx
+++ b/playground/app/routes/_layout+/_layout.tsx
@@ -14,6 +14,10 @@ export default function () {
           <Button>Basic Demo</Button>
         </NavLink>
 
+        <NavLink to='row-selection-order'>
+          <Button>RowSelection Order Demo</Button>
+        </NavLink>
+
         <NavLink to='header-group'>
           <Button>Header Group Demo</Button>
         </NavLink>
diff --git a/playground/app/routes/_layout+/row-selection-order/index.tsx b/playground/app/routes/_layout+/row-selection-order/index.tsx
new file mode 100644
index 0000000..a46365e
--- /dev/null
+++ b/playground/app/routes/_layout+/row-selection-order/index.tsx
@@ -0,0 +1,131 @@
+import { useMemo, useState } from 'react'
+import { Button, Table, type TableColumnsType, Tag } from 'antd'
+import { type ResizableColumnsType, useAntdResizableHeader } from 'use-antd-resizable-header'
+
+interface DataType {
+  key: string
+  name: string
+  age: number
+  address: string
+  tags: string[]
+}
+
+type Columns = ResizableColumnsType<TableColumnsType<DataType>>
+
+const data: DataType[] = [
+  {
+    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: 'Sydney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+]
+
+export function Component() {
+  const [times, setTimes] = useState(0)
+
+  const columns: Columns = [
+    {
+      title: 'Name',
+      width: 300,
+      dataIndex: 'name',
+      key: 'name',
+      // 设置拖拽最小宽度
+      minConstraints: 20,
+      render: (text) => <a>{text}</a>,
+    },
+    Table.SELECTION_COLUMN,
+    {
+      title: 'Age',
+      dataIndex: 'age',
+      key: 'age',
+      width: 100,
+    },
+    {
+      title: 'Address',
+      dataIndex: 'address',
+      key: 'address',
+      width: 100,
+    },
+    {
+      title: 'Tags',
+      key: 'tags',
+      dataIndex: 'tags',
+      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>
+            )
+          })}
+        </>
+      ),
+      width: 300,
+    },
+    {
+      title: 'Action',
+      key: 'action',
+      render: (_, record) => (
+        <div className={'w-full truncate space-x-1'}>
+          <span>{record.name}</span>
+          <a
+            onClick={() => {
+              setTimes((t) => t + 1)
+            }}
+          >
+            Render
+          </a>
+          <span>{times}</span>
+        </div>
+      ),
+    },
+  ]
+
+  const { components, resizableColumns, tableWidth, resetColumns } = useAntdResizableHeader({
+    columns: useMemo(() => columns, [times]),
+    columnsState: {
+      persistenceKey: 'row-selection-order',
+      persistenceType: 'sessionStorage',
+    },
+  })
+
+  return (
+    <div className='App'>
+      <Table
+        columns={resizableColumns}
+        components={components}
+        dataSource={data}
+        scroll={{ x: tableWidth }}
+        rowSelection={{}}
+      />
+      <Button
+        onClick={() => {
+          resetColumns()
+        }}
+      >
+        Reset
+      </Button>
+    </div>
+  )
+}

From 246941c667143bf8638d0179e1849a13763951cc Mon Sep 17 00:00:00 2001
From: chenliandong <chenliandong@chipcoo.com>
Date: Tue, 7 Jan 2025 13:50:04 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=BC=80=E5=90=AF=E6=8C=81=E4=B9=85?=
 =?UTF-8?q?=E5=8C=96=E5=90=8E=E5=88=97=E9=A1=BA=E5=BA=8F=E5=A4=B1=E6=95=88?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useLocalColumns.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/hooks/useLocalColumns.ts b/src/hooks/useLocalColumns.ts
index a3295e8..c5b92d4 100644
--- a/src/hooks/useLocalColumns.ts
+++ b/src/hooks/useLocalColumns.ts
@@ -24,6 +24,10 @@ function mergeColumns<T extends ResizableColumnType[]>(src: T, target: T, mergeK
             const resDataIndex = Array.isArray(res[i].dataIndex) ? res[i].dataIndex.join('-') : res[i].dataIndex
             return targetDataIndex === resDataIndex
           })?.[mergeKey] || res[i][mergeKey]
+        // {} 有可能修改成 { [mergeKey]: undefined }，影响 Table.SELECTION_COLUMN 和 Table.EXPANDABLE_COLUMN 的判断
+        if (res[i][mergeKey] === undefined) {
+          delete res[i][mergeKey]
+        }
       }
     })
   }