// TableComponent.js
import React from 'react';
function TableComponent({ data, headers }) {
if (!data || data.length === 0) {
return <div>No data available.</div>;
}
return (
<div className="section mt-2">
<div className="section-title">Default</div>
<div className="card">
<div className="table-responsive">
<table className="table">
<thead>
<tr>
{headers.map((header, index) => (
<th key={index} scope="col">
{header}
</th>
))}
</tr>
</thead>
<tbody>
{data.map((item, rowIndex) => (
<tr key={rowIndex}>
{headers.map((header, colIndex) => (
<td key={colIndex} className={header === 'Balance' ? 'text-end text-primary' : ''}>
{item[header]}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
}
export default TableComponent;
JavaScript
How To Use
// YourMainComponent.js
import React from 'react';
import TableComponent from './TableComponent';
function YourMainComponent() {
// Sample data for demonstration
const data = [
{ 'User ID': 15323, Name: 'John', Title: 'Manager', Balance: '$ 509.40' },
{ 'User ID': 55212, Name: 'Mark', Title: 'User', Balance: '$ 230.95' },
{ 'User ID': 44623, Name: 'Jane', Title: 'User', Balance: '$ 3,420.50' },
];
// Manually configure column headers
const headers = ['User ID', 'Name', 'Title', 'Balance'];
return (
<div>
<TableComponent data={data} headers={headers} />
</div>
);
}
export default YourMainComponent;
JavaScript