![](/img/trans.png)
[英]How to add href to react-bootstrap-table column dynamically?
[英]How to put event for column using react-bootstrap-table
我正在我的反应应用程序中使用表格,为此我使用了React bootstrap table2 ,我成功地呈现了表格。
请检查编辑的部分
Availability
列,所以它是真的和假的,我想要做的是当它是真的时显示刻度线(右)如果假显示交叉一,我可以插入新列,但我不能更新现有的。我在做什么来插入新列
let c = {
dataField: "Class",
text: "Class",
editable: false,
formatter: () => {
return 12;
},
};
d.push(c);
setColumnData(d);
d
上方是 columnData
但我被困在这里更新现有的
我的资料
{
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,
},
],
}
这就是我渲染表格的方式:
<BootstrapTable
bootstrap4
keyField="certificate_Name"
data={data.tableData}
columns={data.column_data}
wrapperClasses="table-responsive"
classes="table-hover table-bordered"
headerClasses="header-class"
/>;
Availability
为真,那么我想显示<i className="ri-checkbox-circle-line"></i>
。Availability
为 false,则<i class="ri-close-line"></i>
我正在尝试在特定条件下显示我的单元格数据
编辑
我已经使用上述解决方案更新了我的代码沙箱,
如果是真的,我会展示我想要的任何东西 else 我想要的东西。
{
dataField: "available",
text: "Available",
sort: true,
formatter: columnFormatter // this I am putting
}
这是我的功能
const columnFormatter = (cell, row, rowIndex, formatExtraData) => {
if (row && row.availability) {
return <a href="#">check this out</a>;
} else {
return row.availability;
}
};
现在在 if 条件下,我试图将event
放在onClick
但我无法实现。
我正在浏览此链接,但这是针对每一行点击,我想点击特定列到特定单元格。
我想您想根据此条件根据可用性有条件地呈现图标
<i className="ri-checkbox-circle-line"></i>
。<i class="ri-close-line"></i>
所以尝试这样做
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.