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

Question

我有这样的数据：

    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 数据表，我需要将 first_name 和 lastname 显示为全名

Answer 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} 
/>