@evercode-lab/electrode-sortable-table NPM

electrode-sortable-table

Sortable table

You can use this package without Electrode App

Installation

The easiest way to use electrode-sortable-table is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

You can also use the standalone build by including dist/electrode-sortable-table.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

$ npm install @evercode-lab/electrode-sortable-table --save

Usage Example

import React from "react";
import {connect} from "react-redux";
import {SortableTable} from "electrode-sortable-table";
import fontAwesome from "../styles/font-awesome/css/font-awesome.min.css";
import homeStyles from "../styles/home.css";
import bootstrap from "../styles/bootstrap/css/bootstrap.min.css";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import transitionsStyles from "../styles/transitions.css";


const CustomSorter = {
  desc: (data, key) => {
    return data.sort((_a, _b) => {
      const a = _a[key];
      const b = _b[key];
      if (a <= b) {
        return 1;
      } else if (a > b) {
        return -1;
      }
      return 0;
    });
  },

  asc: (data, key) => {
    return data.sort((_a, _b) => {
      const a = _a[key];
      const b = _b[key];
      if (a.localeCompare(b)) {
        return 1;
      } else if (a >= b) {
        return -1;
      }
      return 0;
    });
  }
};

export class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }

render() {
     const delay = 1000;
     setTimeout(() => {
       this.setState({
         data: [
           {id: 3, name: "New York", population: 17800000, country: "USA", continent: "North America"},
           {id: 1, name: "Tokyo", population: 33200000, country: "Japan", continent: "Asia"},
           {id: 2, name: "London", population: 8278000, country: "London", continent: "Europe"},
           {id: 4, name: "Paris", population: 9645000, country: "France", continent: "Europe"},
           {id: 7, name: "Moscow", population: 10500000, country: "Russia", continent: "Europe"},
           {id: 5, name: "Deli", population: 14300000, country: "India", continent: "Asia"},
           {id: 6, name: "Beijing", population: 8614000, country: "China", continent: "Asia"}
         ]
       });
     }, delay);
     const columns = [
       {
         header: "ID",
         key: "id",
         defaultSorting: "ASC",
         headerStyle: {textAlign: "right"},
         headerProps: {className: "align-left"},
         dataStyle: {fontSize: "15px", backgroundColor: "#6fff5b"},
         render: (id) => {
           return <a href={`country/${ id}`}>{id}</a>;
         }
       },
       {
         header: "City",
         key: "name",
         headerStyle: {textAlign: "right"},
         headerProps: {className: "align-left"},
         descSortFunction: CustomSorter.desc,
         ascSortFunction: CustomSorter.asc
       },
       {
         header: "Population",
         key: "population",
         headerProps: {className: "align-left"},
         headerStyle: {textAlign: "right"},
         sortable: true
       },
       {
         header: "Country",
         key: "country",
         headerProps: {className: "align-left"},
         headerStyle: {textAlign: "right"},
         sortable: true,
         render: (country, row) => {
           return <div> {country} ({row.continent})</div>;
         }
       }
     ];

    const tableStyle = {
      backgroundColor: "#eee"
    };

    const tableProps = {
      className: [bootstrap.table,
        bootstrap["table-responsive"],
        bootstrap["text-right"]].join(" ")
    };

    const tbody = (rows) => {
      return (
        <ReactCSSTransitionGroup
          component="tbody"
          transitionName={{
            enter: transitionsStyles["fadein-enter"],
            leave: transitionsStyles["fadein-leave"],
            enterActive: transitionsStyles["fadein-enter-active"],
            leaveActive: transitionsStyles["fadein-leave-active"]
          }}
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {rows}
        </ReactCSSTransitionGroup>
      );
    };

    return (
      <div className={bootstrap.container}>
        <div className={bootstrap.row}>
          <div className={bootstrap["col-xs-12"]}>
            <SortableTable
              data={this.state.data}
              columns={columns}
              tableStyle={tableStyle}
              tableProps={tableProps}
              iconDesc={(<i
                className={[fontAwesome.fa, fontAwesome["fa-sort-desc"], homeStyles["right-align"], homeStyles.icon].join(" ")}/>)}
              iconAsc={(<i
                className={[fontAwesome.fa, fontAwesome["fa-sort-asc"], homeStyles["right-align"], homeStyles.icon].join(" ")}/>)}
              iconBoth={(<i
                className={[fontAwesome.fa, fontAwesome["fa-sort"], homeStyles["right-align"], homeStyles.icon].join(" ")}/>)}
              tbodyRender={tbody}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default connect((state) => state)(Home);