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

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Sophia Al-Mansoor

Sophia Al-Mansoor

Global Business & E-Commerce Reporter

Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.

Share this article
Twitter Facebook Pinterest