如何在 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} 
/>