Open logysis opened 7 years ago
confirmed, I tried to work on the example also, copy and paste the exact same codes, doesn't work
@UkiMiawz the only way to get it working is write your own sort/paging/filter handlers.
@hyojin, can I make the filter section displayed by default?
@logysis I'm going to add the props which can handle the search bar. #44
Great news @hyojin
Hi, how do you simulate a click on the cell in an Enzyme test?
@hyojin can you make filter section displayed by default with some value in it?
@logysis yes, you can use props, headerToolbarMode and filterValue. here is example
@hyojin thank you!
@hyojin just wondering, when are you going to release a version with built-in paging/sort/filter?
@hyojin another question, is there a way to place the cursor in search box by default?
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]))```
Sorting, Paging, Filtering all don't work. Wasted half day on it.