如何在 mui 数据表的同一列中显示名字和姓氏？

【问题标题】：如何在 mui 数据表的同一列中显示名字和姓氏？
【发布时间】：2023-03-07 12:34:01
【问题描述】：

我有这样的数据：

    data:[{
first_name:"abc",
last_name:"Xyz,
course_id:1,
course_code:csc-1,
course_name:"zxc"
},
{
first_name:"abc",
last_name:"Xyz,
course_id:1,
course_code:csc-1,
course_name:"zxcty"
}]

使用 mui 数据表我需要将名字和姓氏显示为全名

【问题讨论】：

标签： reactjs mui-datatable

【解决方案1】：

您可以使用以下示例。但请确保您呈现两列 first_name 和 last_name 并且这两列在第一和第二索引中，否则它将不起作用。

const columns = [
        {
            name: "first_name",
            label: "First Name",
        },
        {
            name: "last_name",
            label: "Last Name",
        },
        {
            name: "first_name",
            label: "Full Name",
            options: {
                filter: false,
                sort: false,
                customBodyRender: (value, tableMeta, updateValue) => {
                    console.log(tableMeta.rowData, '......');
                    return (
                        <div>{tableMeta.rowData[0]} {tableMeta.rowData[1]}</div>
                    );
                }
            }
        }
    ];

<MUIDataTable
  title={title}
  data={documents} 
  columns={columns}
  options={options} 
/>

【讨论】：