I am working with table in my react application, I am usingReact bootstrap table2 for this, I am successfully rendering the table.
Please do check the edited part
Availability
so it is true and false, what I am trying to do is when it is true show tick mark (right) if false show cross one, I am able to insert new column but I am not able to update the existing one.What I was doing to insert new column
let c = {
dataField: "Class",
text: "Class",
editable: false,
formatter: () => {
return 12;
},
};
d.push(c);
setColumnData(d);
Above d
is columnData
But I am stuck here to update the existing one
My data
{
column_data: [
{
dataField: "first_name",
text: "Name",
sort: true,
},
{
dataField: "last_name",
text: "Last Name",
sort: false,
},
{
dataField: "availability",
text: "Available",
sort: true,
},
],
tableData: [
{
first_name: "simon",
last_name: "chaz",
availability: true,
},
{
first_name: "steve",
last_name: "smith",
availability: false,
},
{
first_name: "michel",
last_name: "gread",
availability: true,
},
{
first_name: "rimon",
last_name: "class",
availability: false,
},
],
}
This is how I am rendering table:
<BootstrapTable
bootstrap4
keyField="certificate_Name"
data={data.tableData}
columns={data.column_data}
wrapperClasses="table-responsive"
classes="table-hover table-bordered"
headerClasses="header-class"
/>;
Availability
is true then I want to show <i className="ri-checkbox-circle-line"></i>
.Availability
is false then <i class="ri-close-line"></i>
I am trying to show my cell data on specific condition
Edit
I have updated my code sandbox withe the above solution,
If it is true I am showing whatever I want to else What else I want to.
{
dataField: "available",
text: "Available",
sort: true,
formatter: columnFormatter // this I am putting
}
And here is my function
const columnFormatter = (cell, row, rowIndex, formatExtraData) => {
if (row && row.availability) {
return <a href="#">check this out</a>;
} else {
return row.availability;
}
};
now in if condition I am trying to put an event
onClick
but I am not able to achieve that.
I was going through this link but this is for on each row click, I want to click on specific column to specific cell.
I suppose you want to conditionally render the icons based on availability based on this
<i className="ri-checkbox-circle-line"></i>
.<i class="ri-close-line"></i>
so try doing this
const columnFormatter = (cell, row, rowIndex, formatExtraData) => {
if (row && row.availability) {
return <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
} else {
return <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
}
};
https://codesandbox.io/s/charming-bird-e389g?file=/src/App.js:228-1118
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.