reactjs - 如何在 React mui-Datatable 中完成 customRender
问题描述
我想自定义 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
对象中,根据文档,它应该在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}
/>
但这是用于渲染自定义行,如果要渲染自定义列,则可以customBodyRender
在columns
对象中使用属性。
推荐阅读
- rabbitmq - RabbitMQ 使用 IIS 跺反向代理
- c++ - 在 C++ 中定义 boost 库无锁队列时出现声明错误
- powershell - Powershell CSV 插入变量
- spring-boot - Sleuth 显示不正确的 traceId
- python - 包括 QStackedLayout 会打乱布局
- python - 双重问题解决后的支持向量机偏差太大了
- javascript - 如何实现对象数组的接口?
- sql-server - 从 SQL Server 中的 XML 列获取数据
- javascript - 尝试将对象添加到数组时出现意外结果
- jetbrains-ide - 在 JetBrains IDE 中进行 linting 时忽略 yaml 文件