import * as React from 'react';
import './index.scss';
export interface columsProps {
  title: string;
  datakey: string | number;
  dataIndex: string | number;
  render?: (data: any) => React.ReactNode;
}
interface Iprops {
  colums: columsProps[];
  dataSource: any[];
  rowKey: (any) => any;
}
const Table: React.FC<Iprops> = (props) => {
  const { colums, dataSource, rowKey } = props;
  return (
    <table cellPadding={0} cellSpacing={0} className='table-wrapper'>
      <thead>
        <tr>
          {colums.map((element) => {
            return (
              <th align='left' key={element.datakey}>
                {element.title}
              </th>
            );
          })}
        </tr>
      </thead>
      <tbody>
        {dataSource.map((element) => {
          return (
            <tr key={rowKey(element)}>
              {colums.map((item) => {
                return (
                  <td align='left' key={item.datakey}>
                    {item.render ? item.render(element) : element[item.datakey]}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};
export default Table;
