How to merge two columns when using columnHelper in TypeScript?

[KozyWorks]

I have following randomly generated Person(s) data:

[
  {
    "id": 1,
    "first_name": "Salaidh",
    "last_name": "Vanyakin",
    "email": "[email protected]",
    "gender": "Female",
    "ip_address": "34.109.55.78",
    "phone": "719-928-4414",
    "date": "5/10/2023"
  },
  {
    "id": 2,
    "first_name": "Gordy",
    "last_name": "Ducker",
    "email": "[email protected]",
    "gender": "Male",
    "ip_address": "252.195.50.9",
    "phone": "615-398-4252",
    "date": "5/29/2023"
  }
]

with the following Person type

export type Person = {
  id: number;
  first_name: string;
  last_name: string;
  email: string;
  gender: string;
  ip_address: string;
  phone: string;
  date: string;
};

I am trying to create a column definition using a ColumnHelper that combines first_name and last_name into a single column which creates a new column, full_name, but ain't sure what the best way to achieve this.

The current solution I chose is to create an another type like:

export type PersonTable = Person & {
  full_name: string;
};

and build column definition based on that:

const columnHelper = createColumnHelper<PersonTable>();

export const columnDef = [
  columnHelper.accessor("id", {
    header: () => "ID",
  }),
  columnHelper.accessor("full_name", {
    header: () => "Full Name",
    cell: (cell) => `${cell.row.original.first_name} ${cell.row.original.last_name}`,
  }),
  // columnHelper.accessor("first_name", {
  //   header: () => "First Name",
  // }),
  // columnHelper.accessor("last_name", {
  //   header: () => "Last Name",
  // }),
  columnHelper.accessor("email", {
    header: () => "Email",
  }),
  columnHelper.accessor("gender", {
    header: () => "Gender",
  }),
  columnHelper.accessor("ip_address", {
    header: () => "IP Address",
  }),
  columnHelper.accessor("phone", {
    header: () => "Phone",
  }),
  columnHelper.accessor("date", {
    header: () => "Date",
  }),
];

Any suggestions, please?

Thank you!

[zacBkh]

Hi, have you found the answer?

[liang799]

You could extract a computed full-name value like so:

columnHelper.accessor(row => `${row.firstName} ${row.lastName}`, {
  id: 'fullName',
})

// OR

{
  id: 'fullName',
  accessorFn: row => `${row.firstName} ${row.lastName}`,
}