how do i display firstname and lastname in same column in mui data tables?

Question

I have a data like:

    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"
}]

using mui datatables I need to display first_name and lastname as full name

Answer 1

You can use following example. but pls make sure you render two columns first_name and last_name and these two column is in first and second index, otherwise it will not work.

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