rsuite table 呈现动态列和行

Question

我想根据传递的数据在 rsuite table 中动态呈现 table 列和行，而不对列和数据进行硬编码。

从 'rsuite-table' 导入 { Table、Column、HeaderCell、Cell、RowDataType }；导入 'rsuite-table/dist/css/rsuite-table.css'

从 'react'

导入 React

导出默认函数 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>
);

}

Answer 1

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>
);

不要因为使用地图而忘记照顾钥匙

rsuite table 呈现动态列和行

rsuite table render dynamic column and row

javascript

reactjs

typescript

rsuite