CODEWITHSUNDEEP
reactjsantd
Jgarnie
Jgarnie

Reputation: 489

Nested antd tables not renderring antd

I am trying to render a nested table inside a table in antd,the issue is that the rows are not being displayed, there is the proper space between rows but for some reason I am not able to see the data.

the way I am doing it is on my parent table on the property 'expandedRowRender':

<Table
          rowKey="uuid"
          columns={this.getColumns()}
          data={data}
         expandedRowRender={record => this.expandedRowRender(record.children)}
/>

columns on my parent table are:

getColumns() {
    const columns = [
      {
        title: translate('name'),
        dataIndex: 'name',
      },
      {
        title: translate('type'),
        width: '30%',
        dataIndex: 'docType',
        render: (val, rec) => {
          return rec.parent
            ? `${translate('subcategory')} (${rec.parent[0].name})`
            : translate('category')
        },
      },
    ]

    columns[0] = this.addSearchFilter({
      column: columns[0],
      key: 'name',
      type: 'search',
      refreshKey: 'categories',
    })

    return columns
  }

and the table that is nested and should be displaying:

expandedRowRender = row => {
   
    const columnas = [
      {
        title: translate('name'),
        key: 'name',
        render: val => {
          return <div>{val.name}</div>
        },
      },
      {
        title: translate('docType'),
        key: 'docType',
        render: (val, rec) => {
          return (
            <div>
             {rec.data},
            </div>
          )
        },
      },
    ]

    return (
      <Table
        columns={columnas}
        dataSource={row}
        rowKey={row.uuid}
      />
    )
  }

I have been browsing around but I couldnt find any help on this, there was sth about the unique keys on rows but I am already pointing at the keys on both tables

UPDATE

I found the problem, apparently is a matter of specifying the key to the nested table:

<Table
       columns={columns}
          dataSource={row}
          pagination={false}
          rowKey={record => record.uuid}
          key="a"
/>

Upvotes: 0

Views: 2338

Answers (1)

Jgarnie
Jgarnie

Reputation: 489

ANSWER

I found the problem, apparently is a matter of specifying the key to the nested table:

<Table
       columns={columns}
          dataSource={row}
          pagination={false}
          rowKey={record => record.uuid}
          key="a"
/>

Upvotes: 1

Related Questions