react simple table component

react-simple-table.js

import React, { Component } from "react";

export default class Table extends Component {
  render() {
    const { keyMapper, records, ...rest } = this.props;
    return (
      <table {...rest}>
        <thead>
          <tr>
            {/* 渲染头部 */}
            {keyMapper.map((item, i) => {
              const { filter, hFilter, key, title, thProps } = item;
              return (
                <th key={key || i} {...thProps}>
                  <div>{hFilter ? hFilter(key, item) : title}</div>
                </th>
              );
            })}
          </tr>
        </thead>
        {/* 渲染记录 */}
        <tbody>
          {records.map((record, i) => {
            return (
              <tr key={i}>
                {keyMapper.map((item, idx) => {
                  const { filter, key, title, tdProps } = item;
                  return (
                    <td key={key || idx} {...tdProps}>
                      <div>
                        {filter ? filter(record[key], item) : record[key]}
                      </div>
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }
}