@gulibs/react-vtable 0.0.14 → 0.0.16

package/README.md

@@ -84,7 +84,7 @@ function App() {
 - **Search & Filter**: Advanced search and filtering capabilities with default behavior for local and remote data modes
 - **Pagination**: Built-in pagination with customizable options
 - **Column Settings**: Show/hide columns, drag to reorder
-- **Row Selection**: Single and multiple row selection with batch actions
+- **Row Selection**: Single and multiple row selection with batch actions, **cross-page selection support** (selection state persists across pages when using `request` or `pagination.onChange`)
 - **Editable Rows**: Inline editing capabilities with various value types
 - **Fixed Columns**: Left and right fixed columns with automatic position calculation and subtle shadow effects (powered by TanStack Table column pinning)
 - **Tree Table**: Hierarchical data display with expandable/collapsible rows, custom expand icons, and accordion mode
@@ -454,6 +454,54 @@ Tree tables support hierarchical data structures with expandable/collapsible row
 />
 ```
 
+**Cross-Page Selection Support:**
+
+When using `request` or `pagination.onChange` for remote data fetching, the table automatically maintains selection state across pages. This means:
+
+- Selections made on one page are preserved when navigating to other pages
+- The batch actions bar shows the **total count** of selected rows across all pages
+- When you return to a previously visited page, your selections are automatically restored
+- The `onChange` callback receives all selected row keys across all pages
+
+```tsx
+<ProTable
+  columns={columns}
+  rowKey="id"
+  request={async (params) => {
+    const res = await fetchUsers(params)
+    return { data: res.items, total: res.total, success: true }
+  }}
+  rowSelection={{
+    type: 'checkbox',
+    onChange: (selectedRowKeys, selectedRows) => {
+      // selectedRowKeys contains ALL selected keys across all pages
+      // selectedRows contains rows from the current page only
+      console.log('Total selected across all pages:', selectedRowKeys.length)
+    },
+    batchActions: {
+      onDelete: (rows) => {
+        // This will receive rows from current page only
+        // Use selectedRowKeys from onChange for full selection
+        console.log('Delete current page rows:', rows)
+      }
+    }
+  }}
+  pagination={{
+    pageSize: 10,
+    showSizeChanger: true,
+    onChange: (current, pageSize) => {
+      // Selection state is automatically preserved when page changes
+    }
+  }}
+/>
+```
+
+**Important Notes:**
+- Cross-page selection works automatically when using `request` or `pagination.onChange`
+- With `dataSource` (local data), selection works normally but doesn't need cross-page support
+- The batch actions bar always shows the total count of selected rows across all pages
+- Use `rowSelection.onChange` to get all selected keys if you need to perform operations on all selected rows
+
 #### With Text Ellipsis and Tooltip
 
 ```tsx
@@ -736,7 +784,7 @@ function App() {
 - **搜索筛选**: 高级搜索和筛选功能，支持本地和远程数据模式的默认行为
 - **分页**: 内置分页，支持自定义选项
 - **列设置**: 显示 / 隐藏列，拖拽重排序
-- **行选择**: 单选和多选行，支持批量操作
+- **行选择**: 单选和多选行，支持批量操作，**跨页选中支持**（使用 `request` 或 `pagination.onChange` 时，选中状态会在切换页面时保留）
 - **可编辑行**: 内联编辑功能，支持多种值类型
 - **固定列**: 左右固定列，自动计算位置并应用柔和阴影效果（基于 TanStack Table column pinning）
 - **树形表格**: 层次数据展示，支持展开 / 收起行、自定义展开图标和手风琴模式
@@ -1103,6 +1151,54 @@ import { ProTable, zh_CN } from '@gulibs/react-vtable'
 />
 ```
 
+**跨页选中支持：**
+
+当使用 `request` 或 `pagination.onChange` 进行远程数据获取时，表格会自动维护跨页选中状态。这意味着：
+
+- 在某一页选择的行，在切换到其他页面时会保留
+- 批量操作栏会显示**所有页面**的选中总数
+- 当返回到之前访问过的页面时，之前的选中状态会自动恢复
+- `onChange` 回调会接收到所有页面的选中行 keys
+
+```tsx
+<ProTable
+  columns={columns}
+  rowKey="id"
+  request={async (params) => {
+    const res = await fetchUsers(params)
+    return { data: res.items, total: res.total, success: true }
+  }}
+  rowSelection={{
+    type: 'checkbox',
+    onChange: (selectedRowKeys, selectedRows) => {
+      // selectedRowKeys 包含所有页面的选中 keys
+      // selectedRows 仅包含当前页的行数据
+      console.log('所有页面选中的总数:', selectedRowKeys.length)
+    },
+    batchActions: {
+      onDelete: (rows) => {
+        // 这里只会收到当前页的行数据
+        // 如需操作所有选中的行，请使用 onChange 中的 selectedRowKeys
+        console.log('删除当前页行:', rows)
+      }
+    }
+  }}
+  pagination={{
+    pageSize: 10,
+    showSizeChanger: true,
+    onChange: (current, pageSize) => {
+      // 切换页面时，选中状态会自动保留
+    }
+  }}
+/>
+```
+
+**重要提示：**
+- 跨页选中在使用 `request` 或 `pagination.onChange` 时会自动生效
+- 使用 `dataSource`（本地数据）时，选中功能正常工作，但不需要跨页支持
+- 批量操作栏始终显示所有页面的选中总数
+- 如需对所有选中的行进行操作，请使用 `rowSelection.onChange` 获取所有选中的 keys
+
 #### 带文本省略和提示框
 
 ```tsx

package/dist/hooks/use-pro-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-pro-table.d.ts","sourceRoot":"","sources":["../../lib/hooks/use-pro-table.ts"],"names":[],"mappings":"AAaA,OAAO,EAAiE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAC/F,OAAO,KAAK,EACR,cAAc,EACd,aAAa,EAEhB,MAAM,SAAS,CAAA;AAGhB,UAAU,aAAa,CAAC,CAAC;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,eAAe,EAAE,GAAG,EAAE,CAAA;IACtB,YAAY,EAAE,CAAC,EAAE,CAAA;IACjB,UAAU,EAAE,GAAG,GAAG,IAAI,CAAA;IACtB,aAAa,EAAE,CAAC,GAAG,IAAI,CAAA;CAC1B;AAED,KAAK,kBAAkB,CAAC,CAAC,IACnB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GACzC;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE;QAAE,IAAI,EAAE,CAAC,EAAE,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAC5D;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACtC;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,OAAO,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAC5E;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,GACrD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,GACpD;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,OAAO,EAAE;QAAE,IAAI,EAAE,GAAG,EAAE,CAAC;QAAC,IAAI,EAAE,CAAC,EAAE,CAAA;KAAE,CAAA;CAAE,GAC9D;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,MAAM,EAAE,CAAC,CAAA;KAAE,CAAA;CAAE,GACxD;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,GACvB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,CAAC,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAA;AAyEvB,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACrD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;;;;;;0CA6W8B,MAAM,YAAY,MAAM;+BAUnC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;EA2HhE"}
+{"version":3,"file":"use-pro-table.d.ts","sourceRoot":"","sources":["../../lib/hooks/use-pro-table.ts"],"names":[],"mappings":"AAaA,OAAO,EAAiE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAC/F,OAAO,KAAK,EACR,cAAc,EACd,aAAa,EAEhB,MAAM,SAAS,CAAA;AAGhB,UAAU,aAAa,CAAC,CAAC;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,eAAe,EAAE,GAAG,EAAE,CAAA;IACtB,YAAY,EAAE,CAAC,EAAE,CAAA;IACjB,UAAU,EAAE,GAAG,GAAG,IAAI,CAAA;IACtB,aAAa,EAAE,CAAC,GAAG,IAAI,CAAA;CAC1B;AAED,KAAK,kBAAkB,CAAC,CAAC,IACnB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GACzC;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE;QAAE,IAAI,EAAE,CAAC,EAAE,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAC5D;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACtC;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,OAAO,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAC5E;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,GACrD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,GACpD;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,OAAO,EAAE;QAAE,IAAI,EAAE,GAAG,EAAE,CAAC;QAAC,IAAI,EAAE,CAAC,EAAE,CAAA;KAAE,CAAA;CAAE,GAC9D;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,MAAM,EAAE,CAAC,CAAA;KAAE,CAAA;CAAE,GACxD;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,GACvB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,CAAC,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAA;AAyEvB,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACrD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;;;;;;0CAoZ8B,MAAM,YAAY,MAAM;+BAUnC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;EAqJhE"}