NOTHING IS WORKING.

[logysis]

Sorting, Paging, Filtering all don't work. Wasted half day on it.

[UkiMiawz]

confirmed, I tried to work on the example also, copy and paste the exact same codes, doesn't work

[logysis]

@UkiMiawz the only way to get it working is write your own sort/paging/filter handlers.

[logysis]

@hyojin, can I make the filter section displayed by default?

[hyojin]

@logysis I'm going to add the props which can handle the search bar. #44

[advance512]

Great news @hyojin

[logysis]

Hi, how do you simulate a click on the cell in an Enzyme test?

[hyojin]

@logysis please check this :)

[logysis]

@hyojin can you make filter section displayed by default with some value in it?

[hyojin]

@logysis yes, you can use props, headerToolbarMode and filterValue. here is example

[logysis]

@hyojin thank you!

[logysis]

@hyojin just wondering, when are you going to release a version with built-in paging/sort/filter?

[logysis]

@hyojin another question, is there a way to place the cursor in search box by default?

[michalpokojski]

my implementation of sort, filter and pagination :

import DataTables from 'material-ui-datatables'
import users from '../data/users.json'
import { sortByStringAscending, sortByStringDescending } from '../helpers/sorting'
import { TABLE_COLUMNS_USERS } from '../constants/tableColumnsSpecifications'

class Users extends Component {
  state = {
    searchPhrase: "",
    page: 1,
    rowSize: 10,
  }

  handleFilter = value => {
    this.setState({
      searchPhrase: value
    })
  }

  handlePreviousPageClick = () => {
    this.setState({page: this.state.page - 1})
  }

  handleNextPageClick = () => {
    this.setState({page: this.state.page + 1})
  }

  handleRowSizeChange = (rowSizeIndex, rowSize) => {
    this.setState({page: 1, rowSize});
  }

  render() {

    let data = sortByStringAscending([...users], 'email')
      .filter(row =>
        row.email.includes(this.state.searchPhrase) ||
        row.lastName.includes(this.state.searchPhrase) ||
        row.firstName.includes(this.state.searchPhrase))

    let displayData = data.slice(this.state.rowSize * (this.state.page - 1), this.state.rowSize * (this.state.page))

    const handleSort = (key, order) => order === 'desc' ? sortByStringDescending(displayData, key) : sortByStringAscending(displayData, key)

    return (
      <DataTables
        height={'auto'}
        showRowHover={true}
        columns={TABLE_COLUMNS_USERS}
        data={displayData}
        showCheckboxes={false}
        onSortOrderChange={handleSort}
        showHeaderToolbar={true}
        showHeaderToolbarFilterIcon={false}
        initialSort={{column: 'email', order: 'asc'}}
        onFilterValueChange={this.handleFilter}
        headerToolbarMode={'filter'}
        count={data.length}
        page={this.state.page}
        rowSize={this.state.rowSize}
        onPreviousPageClick={this.handlePreviousPageClick}
        onNextPageClick={this.handleNextPageClick}
        onRowSizeChange={this.handleRowSizeChange}
      />
    )
  }
}

export default Users
/////////////////////////////////////////////////////////////////////
and now for COLUMNS : 
/////////////////////////////////////////////////////////////////////
export const TABLE_COLUMNS_USERS = [
  {
    key: 'firstName',
    label: 'First Name',
    sortable: true
  }, {
    key: 'lastName',
    label: 'Last Name',
    sortable: true
  }, {
    key: 'email',
    label: 'Email',
    sortable: true
  }, {
    key: 'type',
    label: 'Type',
    sortable: true
  },
]
/////////////////////////////////////////////////////////////////////
and sort logic : 
/////////////////////////////////////////////////////////////////////
export const sortByStringAscending = (array, condition)  => array.sort((a, b) => a[condition].localeCompare(b[condition]))
export const sortByStringDescending = (array, condition)  => array.sort((a, b) => b[condition].localeCompare(a[condition]))```