How to reset ant design table selected rows?

Question

• I am using ant design table component and I have selected rows.
• I want onClick reset selected rows.

• I can not find out where it stores selected rows.

    const rowSelection = {
          onChange: (selectedRowKeys, rows) => {
            this.setState({
              selectedRowsArray: [...rows]
            });
          },
        };
  
    <Table rowSelection={rowSelection} columns={columns} dataSource={paymentsHistory} />
  

Any Idea how to clear selected rows?

Answer 1

rowSelection also takes selectedRowKeys property that will help you control the selected rows at any point in time.

const { selectedRowsArray } = this.state;
const rowSelection = {
      selectedRowKeys: selectedRowsArray,
      onChange: (selectedRowKeys, rows) => {
        this.setState({
          selectedRowsArray: [...rows]
        });
      },
    };

<Table rowSelection={rowSelection} columns={columns} dataSource={paymentsHistory} />

Codesandbox Example | Antd Docs

Answer 2

We can also do this with hooks:

import { useState } from 'react';
import { Table, Button } from 'antd';

function App() {
    const [selectedRowKeys, setRowKeys] = useState([]);
    const [loading, setLoading] = useState([]);


    const start = () => {
        setRowKeys([]);
    };

    const onSelectChange = selectedRowKeys => {
        setRowKeys(selectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    const dataSource = [
        {
            key: '1',
            name: 'Mike',
            age: 32,
            address: '10 Downing Street',
        },
        {
            key: '2',
            name: 'John',
            age: 42,
            address: '10 Downing Street',
        }, enter code here
    ];

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
    ];


    return (
        <div className="App">
            <Button type="primary" onClick={start} >
                Reload
            </Button>
            <Table dataSource={dataSource} columns={columns} rowSelection={rowSelection} />;
        </div>
    );
}

export default App;