How to accomplish customRender in React mui-datatables

Question

I want to customize the row hat data in mui-datatble in such a way that if I get Yes in the option, background color should be Red and if I say No, background color should be Blue. I am using mui-datatable first time.

I am unable to use customRowRender or customRender. How do we use it in 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

Stephane L · Accepted Answer · 2019-05-25 14:08:56Z

3

You have put the customRowRender property in the columns object, according to the doc it should be in the options object :

   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}
    />

But this is for rendering a custom row, if you want to render a custom column, then you can use customBodyRender property in the columns object.

answered May 25, 2019 at 14:08

Stephane L

3,3351 gold badge40 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dhwanika chhabria Over a year ago

So, I want to customise only the cells in one particular column, wherein If I get a Yes, bgColor will be Red, and if it is a No, Bgcolor will be blue. What would be the best way that I can do it.

Stephane L Over a year ago

I am not sure about this, maybe you can use selectableRows option to have a checkbox and use onRowsSelect callback to change style on selected rows.

Collectives™ on Stack Overflow

How to accomplish customRender in React mui-datatables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related