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

Maybe following example will make it clear for you:

import React, { useState } from "react";
import { Table, Button } from "antd";
import "antd/dist/antd.css";
import "./index.css";

export default function App() {
  const columns = [
    {
      title: "Currency",
      dataIndex: "сurrency",
      key: "сurrency"
    }
  ];
  const data = [
    {
      key: "EUR",
      сurrency: "€"
    },
    {
      key: "USD",
      сurrency: "$"
    },
    {
      key: "RUB",
      сurrency: "₽"
    }
  ];

  const [selectedRowsArray, setSelectedRowsArray] = useState([]);
  const rowSelection = {
    selectedRowKeys: selectedRowsArray,
    onChange: (key) => {
      setSelectedRowsArray(key);
      exchangeMoney(key[0]);
    }
  };

  function exchangeMoney(key) {
    console.log(key);
  }

  return (
    <>
      <Table
        columns={columns}
        dataSource={data}
        rowSelection={{ type: "radio", ...rowSelection }}
      />
      <Button className="clear-btn" onClick={() => setSelectedRowsArray([])}>
        CLEAR
      </Button>
    </>
  );
}

see in codesandbox

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;

Answer 3

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