简体   繁体   English

大量自定义Material UI DataTable(反应)

[英]Heavily customising Material UI DataTable (React)

I have the default Reactify Material UI DataTable that looks like this image 我有默认的Reactify Material UI DataTable,看起来像这张图片 这里

I need to heavily customise it including removing the download and print functionality and add icons into the columns for status and a drop-down added into the actions column. 我需要对其进行大量自定义,包括删除下载和打印功能,并在状态列中添加图标,并在操作列中添加下拉菜单。 I have been thrown in the deep end with this project and would like to know where to start. 我被这个项目深深吸引了,想知道从哪里开始。 I am using Reactify and I am slowly getting used to React so just need direction on what to research and what to learn. 我正在使用Reactify,但我逐渐习惯了React,因此只需要研究和学习方面的指导。 Do I duplicate the mui-datatables node module and start modifying that? 我是否要复制mui-datatables节点模块并开始对其进行修改?

Thanks 谢谢

You can customized it, just read the docs very carefully. 您可以自定义它,只需非常仔细地阅读文档即可。 https://www.npmjs.com/package/mui-datatables This is the link where you can find its docs and make your data tables customize, for example if you want to remove the download and print functionality you just give false values to download and print option like this https://www.npmjs.com/package/mui-datatables这是您可以找到其文档并使数据表自定义的链接,例如,如果您要删除下载和打印功能,则只需将错误值赋给像这样的下载和打印选项

const options = {
      print: false,
      download: false,
    };

You can add icons in the status just change the value in data array. 您可以在状态中添加图标,只需更改数据数组中的值即可。 for example 例如

let icon = <i className="ti-close" />
const data = [
 ["UserName_Value", "Title_Value", icon , "Date_Value", "Action_Value"],
];

Similarly you can add dropdowns to the action columns as well, just read the docs carefully and you will get the answer. 同样,您也可以在操作列中添加下拉菜单,只需仔细阅读文档即可获得答案。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM