Table_new.jsx

/* eslint-disable react/prop-types */
import { buildTableRow, RECOIL_COLUMNS, RECOIL_DATA } from './data';

function Table() {
  return (
    <>
      <table border='1' style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            <th />
            <th colSpan='6'>LQEd rate Plan Details </th>
            <th colSpan='6'>Hogan Rate Details </th>
          </tr>
        </thead>
        <tbody>
          <tr key='first-row-column'>
            <td />
            {RECOIL_COLUMNS.map((col) => (
              <td key={col.value}>{col.key}</td>
            ))}
          </tr>
          {RECOIL_DATA.map((row) => {
            const rowDataList = buildTableRow(row);
            return rowDataList.map((rowData) => {
              return (
                <tr key={rowData.idx}>
                  {rowData.rowSpan && (
                    <>
                      <td rowSpan={rowData.rowSpan}>
                        <input type='checkbox' name='Select' />
                      </td>
                      <td rowSpan={rowData.rowSpan}>{rowData.ratePlan}</td>
                      <td rowSpan={rowData.rowSpan}>{rowData.rateCodeDesc}</td>
                      <td rowSpan={rowData.rowSpan}>{rowData.product}</td>
                      <td rowSpan={rowData.rowSpan}>{rowData.effectiveDate}</td>
                    </>
                  )}
                  <td>{rowData.ledBalanceValue}</td>
                  <td>{rowData.ledTierValue}</td>
                  {rowData.hoganRowSpan && (
                    <>
                      <td rowSpan={rowData.hoganRowSpan}>
                        {rowData.interestCode}
                      </td>
                      <td rowSpan={rowData.hoganRowSpan}>{rowData.matrixid}</td>
                      <td rowSpan={rowData.hoganRowSpan}>
                        {rowData.localMarketId}
                      </td>
                    </>
                  )}
                  <td>{rowData.hoganBalanceValue}</td>
                  <td>{rowData.hoganTierValue}</td>
                  {rowData.hoganRowSpan && (
                    <td rowSpan={rowData.hoganRowSpan}>{rowData.exception}</td>
                  )}
                </tr>
              );
            });
          })}
        </tbody>
      </table>
    </>
  );
}

export default Table;