Ant design Table configuration

Question

I am working with the Ant Design Table component and not able to figure out different column structures for extended property compares to the root table.

Now if you run the below code you will find the parent column structure and child or may say extended table structure is the same.

I want to know how can I make the parent and child column structure different.

NOTE: I can not use the "expandedRowRender" property because we don't want to show the extension property for each row.

Structer shown in this image

      NAME(Column Name)    Age              Address
      Mick                 1                New York No. 1 Lake Park
+     John Brown sr.       2               New York No. 2 Lake Park
           Name            Age              Address
           John Brown      1                New York No. 1 Lake Park
           Any Name        2                New York No. 2 Lake Park
      Amey                 3                New York No. 3 Lake Park

You can see the level 1 and level 2 column structure is the same I am trying to figure out how I can give different structure and you see all row does not have extension property. Only the second row has that property.

Sensior apologies if I couldn't able to ask the question in a proper way.

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

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: '12%',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: '30%',
    key: 'address',
  }
];

const data = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        aa: 11111,
        bb: 22222,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      },
      {
        key: 12,
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            age: 16,
            address: 'New York No. 3 Lake Park',
          },
        ],
      },
      {
        key: 13,
        name: 'Jim Green sr.',
        age: 72,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: 131,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 2 Lake Park',
            children: [
              {
                key: 1311,
                name: 'Jim Green jr.',
                age: 25,
                address: 'London No. 3 Lake Park',
              },
              {
                key: 1312,
                name: 'Jimmy Green sr.',
                age: 18,
                address: 'London No. 4 Lake Park',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

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

Answer 1

NOTE: I can not use the "expandedRowRender" property because we don't want to show the extension property for each row.

I had to do similar things. So I used expandedRowRender and also different class name for row (based on whether they have expanded property(item.children)) and used css property to hide the expand button on row which don't have children.

.class_name_to_hide_expand .ant-table-row-expand-icon-cell .ant-table-row-expand-icon{
  opacity: 0;
  pointer-events: none
}