import React from 'react';
import './index.less';

function Table(props) {
  const { columns = [], data = [] } = props;
  return (
    <div className="table">
      <div className="tr">
        {columns.map(column => {
          return (
            <div style={{ width: column.width, textAlign: column.align }} className={`th ${column.className || ''}`}>
              {column.title}
            </div>
          );
        })}
      </div>
      {data.length === 0 && <div className="empty">暂无数据</div>}
      {data.map(row => {
        return (
          <div className="tr">
            {columns.map(column => {
              return (
                <div
                  style={{ width: column.width, textAlign: column.align }}
                  className={`td ${column.className || ''}`}
                >
                  {column.render ? column.render(row, row[column.key]) : row[column.key]}
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}
Table.propTypes = {};
export default Table;