check uncek react-bootstrap-table reactjs
To check or uncheck checkboxes in React Bootstrap Table, you can use the selected
prop provided by the BootstrapTable
component. The selected
prop accepts an array of row keys that should be checked. To uncheck a checkbox, simply remove the corresponding row key from the selected
array.
Here's an example of how you can use the selected
prop to check or uncheck checkboxes in React Bootstrap Table:
import React, { useState } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
const MyTable = () => {
const [selected, setSelected] = useState([]);
const handleOnSelect = (row, isSelect) => {
if (isSelect) {
setSelected([...selected, row.id]);
} else {
setSelected(selected.filter(id => id !== row.id));
}
};
const columns = [
// Your table columns here
];
const data = [
// Your table data here
];
return (
<BootstrapTable
keyField="id"
data={data}
columns={columns}
selectRow={{
mode: 'checkbox',
selected: selected,
onSelect: handleOnSelect,
}}
/>
);
};
export default MyTable;
In this example, the selected
state is initialized as an empty array using the useState
hook. The handleOnSelect
function is responsible for updating the selected
state based on the checkbox selection. When a checkbox is selected, the corresponding row key is added to the selected
array. When a checkbox is unselected, the corresponding row key is removed from the selected
array.
The BootstrapTable
component is rendered with the selectRow
prop, which configures the table to display checkboxes. The mode
is set to 'checkbox'
, and the selected
array and handleOnSelect
function are passed to the prop.
Please note that you need to replace 'id'
with the actual key field of your table data, and provide the appropriate columns and data for your specific use case.
I hope this helps! Let me know if you have any further questions.