React-remote-sortable-columns NPM

React Remote Sortable Columns

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

alt='Example'

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>
    )
  }
}