Table - Selection

The Table component supports single and multiple selection.

Multiple Selection

Configure selection-config type as checkbox to enable multiple selection.

Multiple Selection

Single Selection

Configure selection-config type as radio to enable single selection.

Single Selection

Disabled Selection

Use selection-config.checkable function to control whether a row can be selected.

Disabled Selection

Cross-Page Selection

Set selection-config.reserve to true to preserve selection state when switching pages.

Cross-Page Selection

Practical: Cross-Page Selection & Echo

Combine with pagination component to request online API JSONPlaceholder, demonstrating cross-page selection and selected data echo in real scenarios.

Practical: Cross-Page Selection & Echo

Practical: Pagination Init Echo

Simulate editing scenario - get previously saved selection data from backend when page loads, automatically echo selection state via selectedRowKeys. When switching to the corresponding page, rows belonging to that page will be automatically checked; also supports continue checking/unchecking operations.

Core Principle: Write backend returned selected data to Map, extract keys and pass to selectedRowKeys, the table will automatically mark matching rows as selected.

Practical: Pagination Init Echo