Comments (3)
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
from react-bootstrap-table2.
@Chun-MingChen ask me if you have any concern or questions
from react-bootstrap-table2.
@fuchsberger I am confused, that example is about filtering not sorting, right?
@AllenFang Any plans for this feature?
from react-bootstrap-table2.
Related Issues (20)
- react-bootstrap-table2-paginator is not loading HOT 1
- afterFilter's newResult gives empty object
- Update to React 18? HOT 4
- react boostrap table remote filter not working
- Default Filter with Cookie extension Bug when clicking Clear button
- Does this component support resizable column? HOT 1
- Vulnerable dependency of underscore found in react-bootstrap-table-next
- Is it possible to change the order of the pagination components without fully customizing them?
- Please Update this library to support on React 18 HOT 1
- After upgrading webpack from version 4 to 5 throws arguments is not defined.
- Does this library support React 18 without any breaks to current features?
- Could you please let us know if you will maintain the react-bootstrap-table2?
- Is there a way to freeze certain columns ?
- react-bootstrap-table-next
- Exporting FOOTER in csv with customFunction behaviour is broken!!!
- Support for react 18 HOT 5
- Keyboard Navigation editor mode
- possibility to give at every row (<tr> element) an id. For example it can be `row-${keyField}` with keyField the key that identify the single row HOT 1
- How to export Utf-8 with BOM charset HOT 2
- Dependency Underscore -1.9.1 has CRITICAL Vulnerability - Arbitrary Code Execution in underscore which has patched in >=1.12.1 versions of underscore
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-bootstrap-table2.