Web development and Tech news Blog site. WEBISFREE.com
Usage and Example of Checkbox in antd Table Component
Last Modified : 15 Oct, 2023 / Created : 15 Oct, 2023By using the Table component of the antd library, you can display list-type data as a table. Let's find out how to use a checkbox in the table. In addition, we will also learn how to select and deselect all using the checkbox.
Using a checkbox to select in a table is widely used. You can select or deselect the desired row, and it's also possible to select or deselect all.
Since the Table component is not set to use checkboxes by default, you need to set options if you want to use them. The necessary option values are rowSelection and rowKey.
If you look at the code above, you can see that rowSelection is used in Table. By adding rowSelection and rowKey to props like this, checkboxes will appear. Note that there may be differences in checkbox implementation depending on the antd version, so please refer to that.
First, rowSelection is an object value, and you can set an array value to store the selected row and options. And rowKey refers to the value that will be the standard for which value of the selected row will be stored. For example, if you set the rowKey to 'id', the selected value is stored as an array of ids. Let’s look at a simple example code below.
The following code is an example code of the Table component with checkboxes applied. Let's briefly look at the Table code with rowKey and rowSelection.
Looking at the code above, 'id' is set as rowKey. So, when you select a row of the table, the onSelectChange function registered in onChange callback is called. Here, the id value of the corresponding row is stored, and at this time, it is stored in selectedRowKeys declared as state. This part is the most important. You need to be aware of how the selection of a row in the table proceeds like above.
Below is the full code of the myList component created as an example.
Up to this point, we have learned about how to use checkboxes (Checkbox) in the Table component of the antd library.
Note that if you look at the above code, you can see that all ids of the selected rows are stored in selectedRowKeys. At this time, only the id, which is the rowKey value, is stored. What if you need the entire object value of the selected row, not just the id from the used data? In this case, you need to find the value containing the id inside the collection. You can find it using a loop statement such as for and one of the array methods, the built-in function filter().
Using Checkbox with antd Table Component
Using a checkbox to select in a table is widely used. You can select or deselect the desired row, and it's also possible to select or deselect all.
How to Use a Checkbox in Table?
Since the Table component is not set to use checkboxes by default, you need to set options if you want to use them. The necessary option values are rowSelection and rowKey.
import { Table } from 'antd';
render () {
return (
<Table
rowSelection={}
rowKey={}
...
/>
)
}
render () {
return (
<Table
rowSelection={}
rowKey={}
...
/>
)
}
If you look at the code above, you can see that rowSelection is used in Table. By adding rowSelection and rowKey to props like this, checkboxes will appear. Note that there may be differences in checkbox implementation depending on the antd version, so please refer to that.
First, rowSelection is an object value, and you can set an array value to store the selected row and options. And rowKey refers to the value that will be the standard for which value of the selected row will be stored. For example, if you set the rowKey to 'id', the selected value is stored as an array of ids. Let’s look at a simple example code below.
Viewing Example of Using Checkbox in antd Table Component
The following code is an example code of the Table component with checkboxes applied. Let's briefly look at the Table code with rowKey and rowSelection.
constructor(props) {
super(props);
this.state = {
selectedRowKeys: []
}
}
onSelectChange = (selectedRowKeys: any) => {
this.setState({
selectedRowKeys
});
};
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange
};
(생략 ...)
<Table
rowSelection={rowSelection}
rowKey={'id'}
...
/>
super(props);
this.state = {
selectedRowKeys: []
}
}
onSelectChange = (selectedRowKeys: any) => {
this.setState({
selectedRowKeys
});
};
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange
};
(생략 ...)
<Table
rowSelection={rowSelection}
rowKey={'id'}
...
/>
Looking at the code above, 'id' is set as rowKey. So, when you select a row of the table, the onSelectChange function registered in onChange callback is called. Here, the id value of the corresponding row is stored, and at this time, it is stored in selectedRowKeys declared as state. This part is the most important. You need to be aware of how the selection of a row in the table proceeds like above.
Below is the full code of the myList component created as an example.
class myList extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [],
mySites: [] // Collection data of sites
}
}
onSelectChange = (selectedRowKeys: any) => {
this.setState({
selectedRowKeys
});
};
render() {
const columns: any = [
{
title: 'ID',
dataIndex: 'id',
},
{
title: 'Title',
dataIndex: 'contents',
}
];
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange
};
return (
<Table
rowSelection={rowSelection}
rowKey={'id'}
dataSource={this.state.mySites}
columns={columns}
/>
)
}
}
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [],
mySites: [] // Collection data of sites
}
}
onSelectChange = (selectedRowKeys: any) => {
this.setState({
selectedRowKeys
});
};
render() {
const columns: any = [
{
title: 'ID',
dataIndex: 'id',
},
{
title: 'Title',
dataIndex: 'contents',
}
];
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange
};
return (
<Table
rowSelection={rowSelection}
rowKey={'id'}
dataSource={this.state.mySites}
columns={columns}
/>
)
}
}
Up to this point, we have learned about how to use checkboxes (Checkbox) in the Table component of the antd library.
In Conclusion
Note that if you look at the above code, you can see that all ids of the selected rows are stored in selectedRowKeys. At this time, only the id, which is the rowKey value, is stored. What if you need the entire object value of the selected row, not just the id from the used data? In this case, you need to find the value containing the id inside the collection. You can find it using a loop statement such as for and one of the array methods, the built-in function filter().
Perhaps you're looking for the following text as well?