Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    @evercode-lab/electrode-sortable-tablepublic

    electrode-sortable-table NPM version Dependency Status

    Sortable table

    Powered by Electrode Component Archetype

    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 (<= b) {
            return 1;
          } else if (> 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 (>= 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);

    Demo

    Demo

    Properties

    For more explanations see usage example

    • data: PropTypes.array.isRequired,
    • columns: PropTypes.array.isRequired,
    • tableStyle: PropTypes.object,
    • iconStyle: PropTypes.object,
    • iconBoth: PropTypes.element,
    • tbodyStyle: PropTypes.object,
    • tbodyProps: PropTypes.object,
    • iconAsc: PropTypes.element,
    • iconDesc: PropTypes.element,
    • tableProps: PropTypes.object,
    • tbodyRender: PropTypes.func,
    • theadRender: PropTypes.func
    • trProps: PropTypes.object,
    • trStyles: PropTypes.object

    Notes

    This project is a fork of react-sortable-table

    install

    npm i @evercode-lab/electrode-sortable-table

    Downloadsweekly downloads

    0

    version

    1.0.6

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar
    • avatar