Sorting Data Table in React

by Muthuraman B

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app"></div>

CSS

.radio .cr {
  border-radius: 50%;
}
.checkbox {
  width:20px;
  padding: 0;
  margin: 0 auto;
}
.checkbox > label {
  margin: 0;
  padding: 0;
  display: flex;
}
.checkbox > label:after {
  content: '';
  display: table;
  clear: both;
}
.checkbox > label > input[type="checkbox"] {
  display: none;
}
.checkbox > label > input[type="checkbox"]:disabled + .cr, .checkbox > label > input[type="checkbox"]:disabled + .br {
  opacity: .5;
}
.checkbox > label > span.cr, .checkbox > label > span.br {
  background: #FFF;
  border: 1px solid #a9a9a9;
  width: 20px;
  height: 20px;
  display: flex;
  cursor: pointer;
  margin: 0;
}

.checkbox > label > span.cr > .cr-icon, .checkbox > label > span.br > .cr-icon {
  font-size: 12px;
  margin: auto;
  color: #FFF;
  top: 0;
}
input[type="checkbox"] + .cr > .cr-icon, input[type="checkbox"] + .br > .cr-icon {
  transform: scale(3) rotateZ(-20deg);
  opacity: 0;
  transition: all .3s ease-in;
}
input[type="checkbox"]:checked + .cr {
  background: #54c2c8;
  border-color: #54c2c8;
}
input[type="checkbox"]:checked + .br {
  background: #097FBE;
  border-color: #097FBE;
}
input[type="checkbox"]:checked + .cr > .cr-icon, input[type="checkbox"]:checked + .br > .cr-icon {
  transform: scale(1) rotateZ(0deg);
  opacity: 1;
}
.glyphicon-sort {
  opacity: 0.2;
}
.glyphicon-sort-by-attributes, .glyphicon-sort-by-attributes-alt {opacity: 0.5;}
.wid40 {width:40px;}
.cursorPointer {cursor: pointer;}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      items: [
        { FundName: 'DEN81 1.1',FundId: 'DEN81 1.1' },
        { FundName: 'DEN81 1.2',FundId: 'DEN81 1.2' },
        { FundName: 'DEN81 1.3',FundId: 'DEN81 1.3' },
        { FundName: 'DEN81 1.4',FundId: 'DEN81 1.4' },
        { FundName: 'DEN81 1.5',FundId: 'DEN81 1.5' },
        { FundName: 'DEN81 1.6',FundId: 'DEN81 1.6' },
        { FundName: 'DEN81 1.7',FundId: 'DEN81 1.7' },
        { FundName: 'DEN81 1.8',FundId: 'DEN81 1.8' },
        { FundName: 'DEN81 1.9',FundId: 'DEN81 1.9' },
        { FundName: 'DEN81 1.10',FundId: 'DEN81 1.10' },
        { FundName: 'DEN81 2.1',FundId: 'DEN81 2.1' },
        { FundName: 'DEN81 2.2',FundId: 'DEN81 2.2' },
        { FundName: 'DEN81 2.3',FundId: 'DEN81 2.3' },
        { FundName: 'DEN81 2.4',FundId: 'DEN81 2.4' },
        { FundName: 'DEN81 2.5',FundId: 'DEN81 2.5' },
        { FundName: 'DEN81 2.6',FundId: 'DEN81 2.6' },
        { FundName: 'DEN81 2.7',FundId: 'DEN81 2.7' },
        { FundName: 'DEN81 2.8',FundId: 'DEN81 2.8' },
        { FundName: 'DEN81 2.9',FundId: 'DEN81 2.9' },
        { FundName: 'DEN81 2.10',FundId: 'DEN81 2.10' },
      ],
      disableAddFund: true,
      fundUId: "",
      fundId: "",
      fundName: "",
      sort: { column: 'FundName', direction: 'asc' },
      activePage: 1
    }

    this.handleFundSelection = this.handleFundSelection.bind(this);
    this.onSort = this.onSort.bind(this);
    this.setArrow = this.setArrow.bind(this);
    this.handlePageChange = this.handlePageChange.bind(this);
    this.resetState = this.resetState.bind(this);

  }

  handleFundSelection(item) {
    if (item.FundId === "") {
      this.setState({ fundUId: item.FundUId, fundId: item.FundId, fundName: item.FundName, disableAddFund: true });
    } else {
      this.setState({ fundUId: item.FundUId, fundId: item.FundId, fundName: item.FundName, disableAddFund: false });
    }        
  }

  ...