import React from 'react';
import './FixedColumnTable.css';

function fixCls(c) {
  return c.fixed ? 'kole-fixed kole-fixed-' + c.fixed : '';
}

export default function FixedColumnTable({ data = [], columns = [] }) {
  return (
    <div className="kole-fixtable-wrap">
      <table className="kole-fixtable">
        <thead>
          <tr>
            {columns.map((c) => (
              <th key={c.key} className={fixCls(c)} style={{ minWidth: c.w + 'px' }}>
                {c.title}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, i) => (
            <tr key={i}>
              {columns.map((c) => (
                <td key={c.key} className={fixCls(c)} style={{ minWidth: c.w + 'px' }}>
                  {row[c.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}