Как выполнить customRender в React mui-Datatable - PullRequest
Новая
       37

Как выполнить customRender в React mui-Datatable

2 голосов
/ 25 мая 2019

Я хочу настроить данные строки в 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

1 Ответ

0 голосов
/ 25 мая 2019

Вы поместили свойство 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}
    />

Но этодля отображения пользовательской строки, если вы хотите отобразить пользовательский столбец, вы можете использовать свойство customBodyRender в объекте columns.

...