reactjsdatatablesreactify

Heavily customising Material UI DataTable (React)


I have the default Reactify Material UI DataTable that looks like this image here

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. Do I duplicate the mui-datatables node module and start modifying that?

Thanks


Solution

  • 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

    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.