React-bootstrap-table2: Custom Search Bar Without Button?

[Jayboy75]

The default Searchbar has no tag for its input, so it is not accessible to users with disabilities. I am therefore trying to create a custom searchbar component that is otherwise identical to the default, where search text is entered and the table responds without the user having to click a button. The only example in the documentation, however, uses a button. How would I set up a custom search bar so it responds to text input rather than a button click?

[Jayboy75]

Answered my own question. For the benefit of others this may help in future, here's how I did it (note disabled lines won't be necessary unless you are using eslint):

import React from 'react';

const TableSearchBar = (props) => {
  let input;
  const handleChange = () => {
    props.onSearch(input.value); //eslint-disable-line
  };
  return (
    <div>
      <label htmlFor="table-search-bar" className="w-100">
        <span className="sr-only">Search This Data Table</span>
        <input
          id="table-search-bar"
          className="form-control form-control-sm"
        ref={n => input = n} //eslint-disable-line
          type="text"
          placeholder="Search"
          onChange={handleChange}
        />
      </label>
    </div>
  );
};

export default TableSearchBar;

[AllenFang]

I think react-bootstrap-table2 already support a lots of way to let developer to custom the search bar, export csv button, pagination etc. here is an example to show how to completely custom a search component.

[Jayboy75]

@AllenFang Any examples on how to do the same with pagination? I didn't see a full customization in the docs.

[Jayboy75]

@AllenFang Also the dropdown filters that can be added to table columns - I need a way to customize those so I can add a element to them for accessibility. Is there any way to do that?

[AllenFang]

@Jayboy75
docs
example

---

use column.formatter to custom your column.

[Jayboy75]

@AllenFang Thanks for pointing me in the right direction. Is there a way to create a custom filter dropdown so I can add a tag to it? This is a necessity for 508/accessibility and from the docs it doesn't look like I can actually create my own filter with HTML in the same way as with the pagination buttons and search bar.