Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react boostrap table remote filter not working #1798

Open
maargali opened this issue Apr 21, 2023 · 0 comments
Open

react boostrap table remote filter not working #1798

maargali opened this issue Apr 21, 2023 · 0 comments
Assignees

Comments

@maargali
Copy link

maargali commented Apr 21, 2023

i am trying to implement remote filter, and following below documentation to implement..

https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Remote&selectedStory=Remote%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

my code.

    const columns = [{
    dataField: 'vhRegNo',
    text: 'Vehicle Number',
    sort: true,
    filter: textFilter()
  }, {
    dataField: 'type',
    text: 'Fuel Type',
    sort: true,

  }];

my remote code

 const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
<div>
  <BootstrapTable striped hover
    remote={ { filter: true , pagination: true} }
    condensed
    keyField='id'
    data={data}
    columns={columns}
    rowEvents={rowEvents}
    expandRow={expandRow}
    filter={ filterFactory() }
    pagination={paginationFactory({ page, sizePerPage, totalSize })}
    onTableChange={onTableChange}
  />
</div>

);

const handleTableChange = (type, { page, sizePerPage }) => {

pagination.selectedPage = page;
pagination.sizePerPage = sizePerPage;
retrieveVehicleEntries(pagination);

}

const retrieveVehicleEntries = (pagination) => {
VehicleDataService.getAll(pagination.selectedPage, pagination.sizePerPage)
  .then(response => {
    setVehicleEntries(response.data.pageableObj);
    setPageMO(response.data);
    console.log(response.data);
  })
  .catch(e => {
    console.log(e);
  });

};

also i am able to get the filter datafield with below code..

for (const dataField in filters) {
      const { filterVal, filterType, comparator } = filters[dataField];

      if (filterType === 'TEXT') {
        if (comparator === Comparator.LIKE) {
          valid = row[dataField].toString().indexOf(filterVal) > -1;
        } else {
          valid = row[dataField] === filterVal;
        }
      }

my page

image

but the issue is, when ever i type a value in the filter text box, the value is not retaining after my table get refreshed with new set of pagination data. but in the example link the text is getting retained, not able to debug what is issue, since there are no issues in the console either... need help on this..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants