AntD Functional Component with Row Selection Feature

Question

AntD Functional Component with Row Selection Feature

Is there a way to retrieve the key of a single element in the table instead of getting undefined? How can I extract the id?

Check out this link for more information.

const [select, setSelect] = useState({
    selectedRowKeys: [],
    loading: false,
  });

console.log("selectedRowKeys", select);

const { selectedRowKeys, loading } = select;

const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
  setSelect({
    ...select,
    selectedRowKeys: [...select.selectedRowKeys, selectedRowKeys],
  });
},
};

return (
<div>
  <Table
    columns={columns}
    rowSelection={rowSelection}
    dataSource={dataSource}
    loading={!props.employeeList}
  />
</div>);

View console.log() screenshot here.

javascript reactjs antd ant-design-pro

Answer 1

Answer №1

Make sure to include a key prop for each object in the dataSource array

const dataSource = [
  {
    key: 1,
    name: `Edward King 1`,
    age: 32,
    address: `London, Park Lane no. 1`
  },
  {
    key: 2,
    name: `Edward King 2`,
    age: 35,
    address: `London, Park Lane no. 2`
  }
];

In the rowSelection object, you should remove this code

[...select.selectedRowKeys, selectedRowKeys]

, as it may lead to duplications when deselecting and selecting an item again. It should be revised as follows:

const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys) => {
      setSelect({
        ...select,
        selectedRowKeys: selectedRowKeys
      });
    }
};

View your updated code here

Answer 2

Make sure to include a key prop for each object in the dataSource array

const dataSource = [
  {
    key: 1,
    name: `Edward King 1`,
    age: 32,
    address: `London, Park Lane no. 1`
  },
  {
    key: 2,
    name: `Edward King 2`,
    age: 35,
    address: `London, Park Lane no. 2`
  }
];

In the rowSelection object, you should remove this code

[...select.selectedRowKeys, selectedRowKeys]

, as it may lead to duplications when deselecting and selecting an item again. It should be revised as follows:

const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys) => {
      setSelect({
        ...select,
        selectedRowKeys: selectedRowKeys
      });
    }
};

View your updated code here

AntD Functional Component with Row Selection Feature

Answer №1

Similar questions

Material UI React's FormControl

Guide on efficiently inserting values into an array of objects

How can the error color for Material-UI TextField/Select be customized using the createMuiTheme function?

Tips for managing the most recent keyup event in a search feature

Every time I attempt to initialize a React project using the command "npx create-react-app," I encounter the error message "enoent ENOENT: no such file or directory."

Guide on Executing a Callback Function Once an Asynchronous For Loop Completes

Leveraging deferred for linking loops involving several ajax requests

Guide to importing the Slider Component in React using Material-UI

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Retrieving data from the database using getStaticProps in Next.js

Javascript functions function properly only if they contain the 'alert()' command

Is there a way to modify the maximum size limit for a POST request package?

Showing post response (XMLHttpRequest) on Chrome extension interface instead of Python console

Storing the state of DevExtreme DataGrid in Angular

The module ~/assets/images/flags/undefined.png could not be found in the directory

The HTML document is having trouble establishing a connection with socketio

There is an issue showing up in the console: $(…).datepicker is not defined as a function

Tips on transforming JSON data into a hierarchical/tree structure with javascript/angularJS

Difficulty in dynamically rendering a component using React Router

The method item.appendChild does not exist as a function