Table.tsx

// import './Table.css'

type TableParams = {
  className: string
  columns: string[],
  data: any[][],
  onClick?: (element: React.MouseEvent<HTMLTableRowElement>, index: number) => void
}

export const Table = ({ className, columns, data, onClick }: TableParams) => {
  const Header = () => {
    return (
      <thead>
        <tr >
          {columns.map(column =>
            <th
              className="border-b font-medium p-4 first:pl-8 last:pr-8 pt-0 pb-3 
                text-left text-slate-800"
              key={column}>
              {column}
            </th>)}
        </tr>
      </thead>
    );
  };

  const Body = () => {
    return (
      <tbody className="bg-white">
        {
          data.map((row, index) => {
            return <tr
              className="hover:bg-slate-200 text-slate-500
               hover:text-slate-800 hover:cursor-pointer"
              onClick={(el) => onClick?.(el, index)}
              key={index}>
              {row.map((el, index) => {
                return <td
                  className="border-b border-slate-100 
                  p-4 first:pl-8 last:pr-8 text-left"
                  key={index}>
                  {el}
                </td>
              })}
            </tr>;
          })
        }
      </tbody>
    )
  }

  return (
    <div className="w-full bg-slate-100 shadow-lg rounded-xl">
      <table className={"table-auto w-full text-sm mt-8 mb-6"}>
        <Header />
        <Body />
      </table>
    </div>

  )
}