Can i change selected row's selection on ant-design table?

If I want to select a row in the 'Ant Design' table and click the 'previous move' button, the upper row of the selected row is selected, and if I click the 'next move' button, I want to code the lower row to be selected, how can I make it?

For example, if 'Jim Green' is selected on the code and 'previous move' is clicked, 'John Brown' will be selected, and if 'next move' button is clicked, 'Joe Black' will be selected.

it's example code from ant-design, i make a button simple and under the code, example image exist.

    import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      {
        text: 'Joe',
        value: 'Joe',
      },
      {
        text: 'Category 1',
        value: 'Category 1',
        children: [
          {
            text: 'Yellow',
            value: 'Yellow',
          },
          {
            text: 'Pink',
            value: 'Pink',
          },
        ],
      },
      {
        text: 'Category 2',
        value: 'Category 2',
        children: [
          {
            text: 'Green',
            value: 'Green',
          },
          {
            text: 'Black',
            value: 'Black',
          },
        ],
      },
    ],
    filterMode: 'tree',
    filterSearch: true,
    onFilter: (value, record) => record.name.includes(value),
    width: '30%',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    filters: [
      {
        text: 'London',
        value: 'London',
      },
      {
        text: 'New York',
        value: 'New York',
      },
    ],
    onFilter: (value, record) => record.address.startsWith(value),
    filterSearch: true,
    width: '40%',
  },
];
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park',
  },
];
const onChange = (pagination, filters, sorter, extra) => {
  console.log('params', pagination, filters, sorter, extra);
};

const onClickPrev = () => {};
const onClickNext = () => {};

const App = () => (
  <div>
    <button onClick={onClickPrev}>previous move</button>
    <button onClick={onClickNext}>next move</button>
    <Table columns={columns} dataSource={data} onChange={onChange} />;
  </div>
);
export default App;

it is example codesandbox https://codesandbox.io/s/filter-in-tree-antd-4-24-8-forked-49sy6e?file=/demo.js:1544-1548

Solution

In AntD Tables, we have a props rowSelection that receives a row Selection Object. For detail check this https://ant.design/components/table#rowselection.

  const [selectedKey, setSelectedKey] = useState(0);

  return (
    <div>
      <span>{selectedKey}</span>
      <button
        onClick={() => 
          setSelectedKey((selectedKey + 1) % data.length);
        }
      >
        Next
      </button>
      <button
        onClick={() =>
          setSelectedKey(
            selectedKey <= 0 ? data.length - 1 : (selectedKey - 1) % data.length
          )
        }
      >
        Previous
      </button>
      <Table
        rowSelection={{
          type: "radio",
          selectedRowKeys: [`${selectedKey + 1}`]
        }}
        // remaing props
      />
    </div>
  );

Here ,I did simple increment decrement. But in row selection where will be a radio button with every row. Even you can add onSelect behavior on the Table row using rowSelection