Как объединить два или более поля в таблице материалов React

Question

Я пытаюсь создать столбец «Имя» в моей таблице материалов с конкатенированным firstname, lastname из моего массива, но он принимает только одни данные на поле.

Любое предложение или помощь в его создании возможно?

const client = {
  firstname: "Tracy",
  lastname: "Santos",
  address: {
    address1: "Manila",
    address2: "Philippines",
  }
}

const columns = [
  { title: 'Name', field: 'client.firstname' + ' ' + 'client.lastname' },
  { title: 'Address', field: 'client.address.address1' + ' ' + 'client.address.address2' },
]

<MaterialTable
  column={ columns }
  data={ client }
/>

Answer 1

Ваши столбцы должны иметь значение field, которое существует в объекте данных.

Итак, измените свой columns объект на:

const columns = [
  { title: 'Name', field: 'fullName' },
  { title: 'Address', field: 'fullAddress' },
];

Как только у вас будет столбцы, вам необходимо изменить данные, которые вы передаете в компонент.

const client = {
  firstname: 'Tracy',
  lastname: 'Santos',
  address: {
    address1: 'Manila',
    address2: 'Philippines',
  }
}

// Create the new object
const newData = {
  fullName: `${client.firstname} ${client.lastname}`,
  fullAddress: `${client.address.address1}, ${client.address.address2}`,
};

Затем вы можете передать данные в таблицу:

<MaterialTable columns={columns} data={newData} />

note: здесь я использовал шаблонные литералы , потому что его немного легче читать, но приведенный выше код делает следующее:

const newData = {
  fullName: client.firstname + ' ' + client.lastname,
  fullAddress: client.address.address1 + ', ' + client.address.address2,
};

Answer 2

Альтернативный подход, который не требует изменения данных, которые вы передаете в таблицу, заключался бы в использовании пользовательской функции визуализации для этого поля.

{
  render: (client) => {
    return `${client.firstName} ${client.lastName}`;
  },
  title: 'Client',
},