Implement multi column sort

[AllenFang]

[AllenFang]

@Chun-MingChen ask me if you have any concern or questions

[fuchsberger]

a multi-column sort can easily be achieved when using remote={ filter: true }. Here is my implementation (in case it helps):

MyComponent.js

import React from "react"
import { connect } from 'react-redux'
import SmartTable from '../../components/layout/smart_table'

class MyComponent extends React.Component {

  constructor(props){
    super(props)

    this.handleSearchChange = this.handleSearchChange.bind(this)
    this.handleTableChange = this.handleTableChange.bind(this)

    this.columns = [{
      dataField:        'id',
      hidden:           true,
      text:             'id'
    },{
      dataField:        'name',
      text:             'Name',
      sort:             true
    }, {
      dataField:        'email',
      text:             'Email',
      sort:             true
    }];

    this.state = {
      data:           this.props.users || [],
      search:         ''
    }
  }

  handleSearchChange(e){
    this.handleTableChange('filter', { search: e.target.value })
  }

  handleTableChange(type, { search }){
    setTimeout(() => {
      const result = (!search || search.length === 0) ? this.props.users
      : this.props.users.filter((row) => {
        const searchstring = search.toLowerCase()
        return (
          row.name.toLowerCase().toString().indexOf(searchstring) > -1 ||
          row.email.toLowerCase().toString().indexOf(searchstring) > -1
        );
      });
      this.setState({ data: result, search });
    }, 500);
  }

  render(){
    return (
      <Container>
        <SmartTable
          columns       = { this.columns }
          data          = { this.state.data }
          keyField      = 'id'
          onTableChange = { this.handleTableChange }
        />
        <Input
          name        =  "search"
          onChange    = { this.handleSearchChange }
          placeholder = 'Search...'
          type        = "search"
        />
      </Container>
    );
  }
}

const mapStateToProps = function(store) {
  return { users: store.admin.users }
}
export default connect(mapStateToProps)(MyComponent)

SmartTable.js

import React from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory from 'react-bootstrap-table2-filter';

const SmartTable = (props) => {
  const { columns, data, keyField, onTableChange } = props

  return (
    <BootstrapTable
      columns       = { columns }
      data          = { data }
      filter        = { filterFactory() }
      keyField      = { keyField }
      onTableChange = { onTableChange }
      remote        = {{ filter: true }}
    />
  );
}

export default SmartTable

[pastinepolenta]

@fuchsberger I am confused, that example is about filtering not sorting, right?

@AllenFang Any plans for this feature?