如何使用 MUI 数据表在列内呈现项目数组?
How do I render an array of items inside column using MUI-Data-Tables?
我有使用 MUI-Data-Table 组件显示在 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 中的名称相同,它只呈现一个对象,但 theme.systeme.system_country 是我想显示的一组国家 ID,但它赢了不要让我知道如何自定义我的专栏来做这样的事情,或者我是否可以做一些技巧来实现它
您可以为指定字段提供 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);
此外,您可以return只输入您想要的字符串
(不需要在 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) },
}
];
我有使用 MUI-Data-Table 组件显示在 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 中的名称相同,它只呈现一个对象,但 theme.systeme.system_country 是我想显示的一组国家 ID,但它赢了不要让我知道如何自定义我的专栏来做这样的事情,或者我是否可以做一些技巧来实现它
您可以为指定字段提供 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);
此外,您可以return只输入您想要的字符串 (不需要在 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) },
}
];