How to push dynamic columns and row data to antd table

user_16552343 0
Viewed 1866

enter image description here

The below code is not accepting for an array of rows and columns

Here is antd example:

const data = [];
for (let i = 0; i < 4; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32
    //  address: `London, Park Lane no. ${i}`
  });
}

Tried same logic in below: 
// columns :datacloumns1
// rows :rowdata

const data = [];
for (let i = 0; i < 4; i++) {
   for (var j = 0; j < reportDataRows?.length; j++){
  data.push({
  datacloumns1[i]:rowdata[i] // here i am binding row to the exact column but this is not accepting
  });
}
}
antd reactjs javascript
1 Answers

Thank you for your suggestions.

Here is the solution: have changed my result to title and dataIndex format, so I realized that antd table accepts only the title and dataIndex format.

let datacloumns = reportDataRows && Object.keys(reportDataRows[0])?.map((key) => (
    <span >{cloumns.push({
        title: key, dataIndex: key,
        //defaultSortOrder: 'descend',
        sorter: true
    })}
    </span>))

< Table 
  rowClassName = {(record, index) => index % 2 === 0 ? 'table-row-light' : 'table-row-dark'} 
  size = { 'default'} 
  columns = { cloumns } 
  bordered = { true} 
  sortDirections = { ['ascend', 'descend'] } 
  loading = { reportDataRows === undefined ? true : false} 
  pagination = {{ pageSize: 10 }} dataSource = { reportDataRows === undefined ? [] : reportDataRows} 
/>
user_165523430
Related