React bootstrap table 2 programmatically select filter

Question

I'm trying to follow this example. I've pretty much replicated it line for line, adding in 5 products as that data isn't given in the example. Everything displays correctly so in theory I've set it up correctly, however the filter doesn't seem to work like it does in the example.

Any ideas? This is what I have: https://stackblitz.com/edit/react-mmvhyv?file=Table.js

Vivek Doshi · Accepted Answer · 2020-06-11 06:54:22Z

3

Issue is with products data quality field and selectOption fields , they are is matched

It tries to compare the products data quality with selectOption's key

So either you change products

const products = [
    {"id": "1", "name":"john", "quality":"unknown"},
    {"id": "2", "name":"jane", "quality":"good"},
    {"id": "3", "name":"bob", "quality":"Bad"},
    {"id": "4", "name":"ralph", "quality":"Bad"},
]

To :

const products = [
    {"id": "1", "name":"john", "quality":2},
    {"id": "2", "name":"jane", "quality":0},
    {"id": "3", "name":"bob", "quality":1},
    {"id": "4", "name":"ralph", "quality":1},
]

WORKING DEMO

OR

change selectOptions to :

const selectOptions = {
    'good' : 'good',
    'Bad' : 'Bad',
    'unknown' : 'unknown',
};

const handleClick = () => {
    qualityFilter('good'); // <---- here to
};

WORKING DEMO

edited Jun 11, 2020 at 6:54

answered Jun 11, 2020 at 6:47

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ravi Bhanushali · Accepted Answer · 2021-09-03 10:56:55Z

In case you are calling API and populating your table, you need to check the response data and map it with the text displayed on UI.

For eg:

  {
      "ID": 1,
      "CreatedAt": "2021-09-02T04:30:45.37+05:30",
      "UpdatedAt": "2021-09-02T04:30:45.37+05:30",
      "DeletedAt": null,
      "Gender":"male",
      "roll_no": 1,
      "first_name": "Ravi",
      "use_transport": false
    }

Suppose we want to add select filter on use_transport and Gender. Observe that use_transport is boolean as false and Gender is string "male" not capitalized. On UI if you are representing this two field as use_transport="false" and Gender="Male". Then you need to create options map as follows,

 const genderSelectOptions = {
        "male": "Male",
        "female": "Female",
        "other": "Other"
    };

  const booleanSelectOptions = {
       true:"true",
       false: "false"
  }

The key will be the value coming in response and the value of the map will be the value you are representing on the UI.

NOTE: It is important to have one unique ID in your table, you can keep it hidden. Filter uses that ID internally to distinguish the unique record.

The unique key has to be then bind as keyField in Bootstrap table tag

<BootstrapTable
    striped hover condensed pagination={true} 
    search
    keyField='ID'
    data={this.state.students}
    columns={this.state.columns} 
    filter={filterFactory()}
    pagination={paginationFactory()} />

Collectives™ on Stack Overflow

React bootstrap table 2 programmatically select filter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related