How do I render an array of items inside column using mui-datatables?

Question

I have list of texts that are to be displayed inside a data-table using the MUI-Data-Table component but i am facing this problem of displaying not a single item in the column but a list of items. I have an item called system. It contains an array of countries so I want to display that array inside only one column but i don't know how to do it.

this is my json :

systeme:{
          archived: 0
           id: 1
           nomSysteme: "Environnement Tn"
           systeme_country: Array(1)
                   {
                    0: {id: 1}
                   length: 1
                     }
        }

and this is how i customize my column because there is a certain pattern that i need to follow :

 {
    name: "titre",
    label: "Titre",
    options: {
        filter: true,
        sort: false,
    }
},
{

    name: "theme.systeme.systeme_country",
    label: "Countries",
    options: {
        filter: true,
        sort: false,

    }
},

For more explanation the option name must be the same as in the json and it renders only one object but the theme.systeme.system_country is an array of countries's ids that i want to display but it won't let me i didn't know how to customize my columns to do such a thing or if there is a trick that i can do to make it happen

Klaus · Accepted Answer · 2019-10-27 18:17:13Z

6

You could provide a customBodyRender for the specified field. An example could be found here: https://github.com/gregnb/mui-datatables/blob/master/examples/component/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import MUIDataTable from "mui-datatables";

function App() {
  const data = [{ user: "john", langs: ["en", "de", "fr"] }];
  const columns = [
    { name: "user" },
    {
      name: "langs",
      options: {
        customBodyRender: (value, tableMeta, updateValue) => (
          <div>{value.join(",")}</div>
        )
      }
    }
  ];
  return <MUIDataTable data={data} columns={columns} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

edited Oct 27, 2019 at 18:17

answered Oct 27, 2019 at 18:04

Klaus

1,2402 gold badges14 silver badges29 bronze badges

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

5 Comments

AOUADI Slim Over a year ago

can i put the filters not inside the data-table but outside , it's like changing it's render place

Andrew Irwin Over a year ago

How can I display only the first element of an object in an array i.e children[0].childName

Klaus Over a year ago

You mean the first element of the list you want to render?

TheCodeLearner Over a year ago

Is it okay if i put customBodyRender: () => {} with an empty parameter?

Klaus Over a year ago

If you dont require one of value, tableMeta, updateValue it should work

Ar26 · Accepted Answer · 2020-09-22 08:42:29Z

0

In addition, you can return just the string you want (not needed to be inside a div)

  const colData = (colArrayData: any) => {
        return colArrayData.map((item: any) => item.name).join(", ")
  }


  const columns = [
    { name: "user" },
    {
      name: "langs",
      options: { customBodyRender: (colArrayData: any) => colData(colArrayData) },
    }
  ];

answered Sep 22, 2020 at 8:42

Ar26

1,1391 gold badge15 silver badges35 bronze badges

Collectives™ on Stack Overflow

How do I render an array of items inside column using mui-datatables?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related