rsuite table 呈现动态列和行
rsuite table render dynamic column and row
我想根据传递的数据在 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>
);
}
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 中动态呈现 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>
);
}
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>
);
不要因为使用地图而忘记照顾钥匙