我想以mui-datatble自定义行帽数据,如果我在选项中获得肯定,背景颜色应该是红色的,如果我说否,背景颜色应该应该蓝色。我是第一次使用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
您已将customRowRender
属性放在columns
对象中,根据DOC,它应该在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
属性。