cuz/src/components/Table/cell.js

Front-end modular development kit.

import React, { Component } from 'react';
import classNames from 'classnames';
import { Cell } from 'fixed-data-table';

export default class cuzCell extends Component {

  static propTypes = {
    sortType: React.PropTypes.string,
    children: React.PropTypes.any,
    sortable: React.PropTypes.bool,
    onSortChange: React.PropTypes.func,
    columnKey: React.PropTypes.string,
    isSorted: React.PropTypes.bool,
  };

  static defaultProps = {
    sortType: '',
    sortable: false,
  };

  constructor(props) {
    super(props);
  }

  onSortChange() {
    this.props.onSortChange(
      this.props.columnKey,
      this.props.sortType
    );
  }

  render() {
    const {sortType, sortable, isSorted, children, ...props} = this.props;
    let sortIcon;
    if (isSorted === false) {
      sortIcon = 'fa-sort';
    } else {
      sortIcon = sortType === 'asc' ? 'fa-sort-asc' : 'fa-sort-desc';
    }
    if (sortable) {
      return (
        <Cell {...props}>
          <span className="sort_cell" onClick={this.onSortChange.bind(this)}>
            {children} <i className={classNames('fa', sortIcon)}></i>
          </span>
        </Cell>
      );
    }
    return (
      <Cell {...props}>
          {children}
      </Cell>
    );
  }
}