TableComponent

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

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