Как отобразить массив элементов внутри столбца с помощью MUI-Data-Tables? - PullRequest
Новая
       15

Как отобразить массив элементов внутри столбца с помощью MUI-Data-Tables?

0 голосов
/ 27 октября 2019

У меня есть список текстов, которые должны отображаться внутри таблицы данных с использованием компонента MUI-Data-Table, но я сталкиваюсь с проблемой отображения не одного элемента в столбце, а списка элементов. У меня есть пункт под названием система. Он содержит массив стран, поэтому я хочу отобразить этот массив только в одном столбце, но я не знаю, как это сделать.

это мой json: 

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

и этоВот как я настраиваю свой столбец, потому что есть определенный шаблон, которому я должен следовать: 

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

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

    }
},

Для более подробного объяснения имя опции должно быть таким же, как в json, и оно отображает только один объект, но тему.systeme.system_country - это массив идентификаторов стран, которые я хочу отобразить, но он не даст мне знать, как настроить свои столбцы, чтобы сделать такую ​​вещь, или если есть способ, который я могу сделать, чтобы сделать этослучается

1 Ответ

2 голосов
/ 27 октября 2019

Вы можете предоставить customBodyRender для указанного поля. Пример можно найти здесь: 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);
...