[英]Adding Edit button with icon in a react-bootstrap-table2
I want a column like this in the table to edit the whole corresponding row corresponding to each edit button in react-Bootstrap_ table2我想在表像这样的列编辑对应于每个编辑按钮,整个相应的行反应,Bootstrap_表2
Sample Image of What I want to do:我想做的事情的示例图片:
import React from "react";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import cellEditFactory from "react-bootstrap-table2-editor";
export class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{
id: 1,
dn: "Gob",
f: "wah",
ct: "2",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 2,
dn: "Buster",
f: "wah",
ct: "5",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 1,
dn: "Gob",
f: "wah",
ct: "2",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 2,
dn: "Buster",
f: "wah",
ct: "5",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
},
{
id: 3,
dn: "George Michael",
f: "wah",
ct: "4",
cr: "acha",
dsf: 12,
dsp: 30
}
],
columns: [
{
dataField: "dn",
text: "Doctor Name",
sort: true
},
{
dataField: "f",
text: "Facility",
sort: true
},
{
dataField: "ct",
text: "Consultation Type",
sort: true
},
{
dataField: "cr",
text: "Consultation Rate",
sort: true
},
{
dataField: "dsf",
text: "Doctor Share (Fixed)",
sort: true,
style: { backgroundColor: "#e0f7fa" }
},
{
dataField: "dsp",
text: "Doctor Share(%)",
sort: true,
style: { backgroundColor: "#fbe9e7" }
},
{
dataField: "edit",
text: "Edit",
editCellStyle: (cell, row, rowIndex, colIndex) => {
const icon = { style: 'class="glyphicon glyphicon-pencil">' };
return { icon };
}
}
]
};
}
render() {
const selectRow = {
mode: "checkbox",
clickToSelect: true
};
// const editFormatter = (cell, row, rowIndex, formatExtraData) => {
// <Button
// icon
// labelPosition="left"
// onClick={() => deleteMe(rowIndex, rowId)}
// >
// <Icon name="remove" /> Remove{" "}
// </Button>;
// };
const customTotal = (from, to, size) => (
<span className="react-bootstrap-table-pagination-total">
Showing {from} to {to} of {size} Results
</span>
);
return (
<div className="container" style={{ marginTop: 50 }}>
<BootstrapTable
striped
hover
keyField="dn"
data={this.state.data}
columns={this.state.columns}
pagination={paginationFactory({ nextPageText: "Next" })}
selectRow={selectRow}
cellEdit={cellEditFactory({ mode: "click" })}
/>
</div>
);
}
}
How can I add buttons in the column of Edit ?如何在Edit列中添加按钮? so that I should be able to edit a row.
这样我就可以编辑一行了。 I know there must be some mechanism to customize the column and add Icons like mentioned in the Image.
我知道必须有某种机制来自定义列并添加图像中提到的图标。
You can add a dummy field in your column definitions and reference a formatter that can render a component in the column for each row.您可以在列定义中添加一个虚拟字段,并引用可以为每一行在列中呈现组件的格式化程序。 The component, in our case, is an ActionsFormater that we use to render several buttons (view,edit,delete) that can act on the id passed in for each row.
在我们的例子中,组件是一个 ActionsFormater,我们用它来呈现几个按钮(查看、编辑、删除),这些按钮可以作用于为每一行传入的 id。
{
dataField: 'actions',
text: 'Actions',
isDummyField: true,
csvExport: false,
formatter: this.actionsFormatter,
},
actionsFormatter = (cell, row) => <ActionsFormatter id={row.id} />;
Which looks like so:看起来像这样:
I made this function and returned the EditIcon button component.我创建了这个函数并返回了 EditIcon 按钮组件。
function rankFormatter(cell, row, rowIndex, formatExtraData) {
return (
< div
style={{ textAlign: "center",
cursor: "pointer",
lineHeight: "normal" }}>
< EditIcon
style={{ fontSize: 20 }}
color="disabled"
/>
</div>
); }
This is the column where I have assigned the rankFormatter function to the formatter.这是我将 rankFormatter 函数分配给格式化程序的列。
{ dataField: "edit",
text: "Edit",
sort: false,
formatter: rankFormatter,
headerAttrs: { width: 50 },
attrs: { width: 50, class: "EditRow" }
}
This works exactly the way I wanted it to be..!这完全按照我想要的方式工作..!
the solutions from the other users work, but I just noticed that the current version of reactstrap-table-next has built-in support for this so I will this answer for future users.其他用户的解决方案有效,但我只是注意到当前版本的 reactstrap-table-next 内置了对此的支持,所以我将为未来的用户提供这个答案。
It's possible to show an extra column by setting the property expandRow.showExpandColumn
to true.可以通过将属性
expandRow.showExpandColumn
设置为 true 来显示额外的列。 Then to expand rows only when clicking this column the property expandRow.expandByColumnOnly
must be set to true as well.然后仅在单击此列时扩展行,属性
expandRow.expandByColumnOnly
必须设置为 true。 The side where this column appears can be set through the property expandRow.expandByColumnOnly
whose value can either be left
or right
该列出现的一侧可以通过属性
expandRow.expandByColumnOnly
设置,其值可以是left
或right
Finally we must also pass a renderer for this column through the property 'expandRow.expandColumnRenderer' which takes a function like this ({ expanded, rowKey, expandable }) => ()
最后,我们还必须通过属性 'expandRow.expandColumnRenderer' 传递此列的渲染器,该属性采用这样的函数
({ expanded, rowKey, expandable }) => ()
expandRow example : expandRow 示例:
const expandRow = {
renderer: row => ...,
expandByColumnOnly: true,
expandColumnPosition: 'right',
showExpandColumn: true,
expandColumnRenderer: ({expanded, rowKey, expandable}) => {
const onclick = (event) => {
console.log("clicked on row ", rowKey)
}
if (!expandable) {
return;
}
return (
<button type="button" onClick={onclick} className="btn btn-outline-primary"/>
);
}
};
...
<BootstrapTable ... expandRow={expandRow} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.