我想自定义 mui-datatble 中的行帽数据,如果我在选项中选择"is",则背景颜色应为红色,如果我选择“否”,则背景颜色应为蓝色。我第一次使用 mui-datatable。
我无法使用customRowRender 或customRender。我们如何在 mui-datatable 中使用它
import React from 'react';
import MUIDataTable from "mui-datatables";
class Datatable extends React.Component {
render() {
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true,
customRowRender:(data, dataIndex, rowIndex) => {
console.log('data' + data);
return (
<div>
{data}{' '}{dataIndex}{' '}{rowIndex}
</div>
);
}
}
},
{
name: "company",
label: "Company",
options: {
filter: true,
sort: false,
}
}
];
const data = [
{ name: "Joe James", company: "Test Corp" },
{ name: "John Walsh", company: "Test Corp" }
];
const options = {
filterType: 'checkbox',
};
return (
<React.Fragment>
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
</React.Fragment>
);
}}
export default Datatable;
I should be able to render data in customRender where I will add a conditional render with a <div> and style depending on Yes/No
最佳答案
根据 doc,您已将 customRowRender
属性放入 columns
对象中。它应该位于 options
对象中:
const options = {
filterType: 'checkbox',
customRowRender:(data, dataIndex, rowIndex) => {
console.log('data' + data);
return (
<div>
{data}{' '}{dataIndex}{' '}{rowIndex}
</div>
);
}
};
// render
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
但是这是为了渲染自定义行,如果您想渲染自定义列,那么您可以使用 columns
对象中的 customBodyRender
属性。
关于reactjs - 如何在React mui-Datatable中完成customRender,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56305442/