CODEWITHSUNDEEP
antd
Aaqil Ahmed
Aaqil Ahmed

Reputation: 3

How to display Multiple data into a single column/cell in Antd Table?

For example:- I got four json format data from firebase

  {
     "firstName":"FName1",
     "lastName":"LName1",
     "initial":"F.L1",
     "Age":"25"
  },
  {
     "firstName":"FName2",
     "lastName":"LName2",
     "initial":"F.L2",
     "Age":"23"
  }
``

I want to show all three data into a single column: Like--

     **Full Name**             **Age**
     FName1 LName1 (F.L1)        25
     FName2 LName2 (F.L2)        23

Upvotes: 0

Views: 5558

Answers (1)

LChuan
LChuan

Reputation: 363

Use render for the column that show multiple data

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Table } from 'antd';

const columns = [
  {
    title: "Full Name",
    dataIndex: "fullname",
    render: (text, record) => (
      <span>{record.firstName} {record.lastName} ({record.initial})</span>
    )
  },
  {
    title: "Age",
    dataIndex: "Age"
  },
];

const data = [
  {
    "firstName":"FName1",
    "lastName":"LName1",
    "initial":"F.L1",
    "Age":"25"
 },
 {
    "firstName":"FName2",
    "lastName":"LName2",
    "initial":"F.L2",
    "Age":"23"
 }
];

ReactDOM.render(
  <Table columns={columns} dataSource={data} pagination={false} />,
  document.getElementById("container")
);

Upvotes: 9

Related Questions