React Remote Sortable Columns

Sort table data using remote api by click and toggle the table columns.

Install via NPM

npm install --save react-remote-sortable-columns

Install via Yarn

yarn add react-remote-sortable-columns

Components Usage

The package will provide 2 components TR and TH:

TR Table Row Component Props

Prop | type | default | description ----------- | ---------- | ----------------- | ---------------------------------------------------------------------------------------- sortKey | string | Null | The current sort column name/key sortDir | string | Null | The current sort direction onChange | function | Null | Function will called on column clicked and will pass the column identifier and direction ascClass | string | fa fa-sort-asc | Css class on ASC sorting descClass | string | fa fa-sort-desc | Css class on Desc sorting children | components | | Header row columns using <TH ...></TH> component

TH Table Header Component Props

Prop | Type | Description ---------- | ---------- | ----------------- column | string | Column identifier children | components | Column text

Other props will be passed to the th component such as className, colSpan ...etc.

Example

import React, {Component} from 'react'
import {TR, TH} from 'react-remote-sortable-columns'

class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      params: {
        sort:      'id',
        direction: 'asc'
      }
    }
  }

  // fetch data for the first time
  componentDidMount() {
    this.props.dispatch(fetchRecords(this.state.params))
  }

  // fetch only when params get updated
  componentDidUpdate(prevProps, prevState) {
    if (this.state.params !== prevState.params) {
      this.props.dispatch(fetchRecords(this.state.params))
    }
  }

  // update params state when sortable column is clicked
  handleSortChange(sort, direction) {
    this.setState({params: {
      ...this.state.params,
      key,
      direction
    }})
  }

  render() {
    const {sort, direction} = this.state.params
    return (
      <table className="table table-hover table-bordered">
        <thead>

          // Here is the TR and TH components
          <TR sortKey={sort} sortDir={direction} onChange={this.handleSortChange.bind(this)}>
            <TH column="id">ID</TH>
            <TH column="name" className="w-50" colSpan={2}>Employee Name</TH>
            <TH column="role">Role</TH>
            <TH column="status">Status</TH>
            <TH>Actions</TH>
          </TR>

        </thead>
        <tbody>
          <tr>
            ....
          </tr>
        </tbody>
      </table>
    )
  }
}

TODO:

• [x] allow to customize the internal class names
• [ ] write test

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

License

The gem is available as open source under the terms of the MIT License.