rsuite table render dynamic column and row

I would like to render table columns and rows in rsuite table dynamically according to the data passed without hardcoding the column and data.

import { Table, Column, HeaderCell, Cell, RowDataType } from 'rsuite-table'; import 'rsuite-table/dist/css/rsuite-table.css'

import React from 'react'

export default function App() {

// Sample table data const sampleData : any[] = [ { firstName: 'Gourav', lastName: 'Hammad', city: 'Mhow' }, { firstName: 'Rithik', lastName: 'Verma', city: 'Indore' }, { firstName: 'Kartik', lastName: 'Malik', city: 'Raipur' }, { firstName: 'Nikhil', lastName: 'Kapoor', city: 'Rau' }, { firstName: 'Ayush', lastName: 'Singh', city: 'Dewas' } ] return ( <div style={{ display: 'block', width: 700, paddingLeft: 30 }}> <h4>React Suite Table Component</h4> <Table height={500} data={sampleData} > here I want to generate the column and row based on given data </Table> </div> ); 

}

1 Answer

const sampleData = [{}, {}, {}] // some array of objects const keys = Object.keys(sampleData[0]); return ( <div style={{ display: 'block', width: 700, paddingLeft: 30 }}> <h4>React Suite Table Component</h4> <Table height={500} data={sampleData} > /// here I want to generate the column and row based on given data { keys.map(data_key => ( <Column> <HeaderCell>{data_key}</HeaderCell> <Cell dataKey={data_key} /> </Column> )) } </Table> </div> ); 

dont forget take care off key because using map