cuz/src/components/Table/table.js

Front-end modular development kit.

import React, { Component, cloneElement } from 'react';
import { Table } from 'fixed-data-table';
import {utils} from 'react-bootstrap';

export default class cuzTable extends Component {
  static propTypes = {
    onSortChange: React.PropTypes.func,
    defaultSortColumn: React.PropTypes.string,
    defaultSortType: React.PropTypes.string,
    children: React.PropTypes.any,
  };

  static defaultProps = {
    defaultSortType: 'desc',
  };

  constructor(props) {
    super(props);
    this.onSortChange = this.onSortChange.bind(this);
    this.state = {
      sortColumn: this.props.defaultSortColumn,
      sortTypes: {
        [this.props.defaultSortColumn]: this.props.defaultSortType
      }
    };
  }

  onSortChange(columnKey, sortType) {
    const type = sortType === 'desc' ? 'asc' : 'desc';
    this.setState({
      sortColumn: columnKey,
      sortTypes: {
        [columnKey]: type
      }
    });
    if (this.props.onSortChange) {
      this.props.onSortChange(columnKey, type);
    }
  }

  renderCloumnItem(child) {
    const columnKey = child.props.columnKey;
    const cellClone = cloneElement(
      child.props.header,
      {
        isSorted: this.state.sortColumn === columnKey,
        sortType: this.state.sortTypes[columnKey],
        onSortChange: this.onSortChange,
      }
    );
    return cloneElement(
      child,
      {
        header: cellClone
      }
    );
  }

  render() {
    const {onSortChange, children, ...props} = this.props;
    return (
      <Table {...props}>
          {utils.ValidComponentChildren.map(children, this.renderCloumnItem.bind(this))}
      </Table>
    );
  }
}