// App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
const data = [
{
id: 1,
name: 'Rahul',
age: 25,
},
{
id: 2,
name: 'Rakesh',
age: 28,
},
{
id: 3,
name: 'Ritesh',
age: 30,
},
];
const columns = [
{
dataField: 'id',
text: 'ID',
},
{
dataField: 'name',
text: 'Name',
},
{
dataField: 'age',
text: 'Age',
},
];
const App = () => {
const footerData = {
id: 'result',
name: 'Age average',
age: '27.66',
};
return (
<div className="table-responsive">
<table className="table">
<thead>
<tr>
{columns.map((column, index) => (
<th key={index}>{column.text}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, rowIndex) => (
<tr key={row.id}>
{Object.values(row).map((value, columnIndex) => (
<td key={columnIndex}>{value}</td>
))}
</tr>
))}
</tbody>
<tfoot>
<tr className="table-dark">
{Object.values(footerData).map((value, index) => (
<td key={index}>{value}</td>
))}
</tr>
</tfoot>
</table>
</div>
);
};
export default App;