Saving filter and pagination values

[chazarabriseis]

I am changing between a table and a show something tab. I want the table to rember the page I was on and the filter terms I put it. However every time I come back from show the table rerenders and I do not know how to save this information/values and to pass it on dynamically. Or perhaps how to surpress a rerender. I tried to find a similar issue but could not find an answer.

I am adding a codebox example to make my problem clear. Going on the second page and the clicking on show and again on table brings me to the first page. Also filtering for example 7 then clicking show and table again I am back at page 1 with the full table.

https://codesandbox.io/s/table-remeber-filter-znohm

Thanks in advance for a pointer how I can do this.

[AllenFang]

I think in your case, the most simplest solution is hide the table component. If you don't want to hide it, the only way is you have to add some listener to listen something changes, like filter, page etc. then populate these data into table when the corresponding tab is active.

for example:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import BootstrapTable from "react-bootstrap-table-next";
import filterFactory, { textFilter } from "react-bootstrap-table2-filter";
import paginationFactory from "react-bootstrap-table2-paginator";

class ProductList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      step: "table",
      currPage: 1,
      currFilter: '',
      selectedCapTableIndices: [],
      dataResultsTable: [
        { id: 1, name: "Item 1", price: 100, color: "#0000ff" },
        { id: 2, name: "Item 2", price: 102, color: "#f000ff" },
        { id: 3, name: "Item 3", price: 100, color: "#0000ff" },
        { id: 4, name: "Item 4", price: 102, color: "#f000ff" },
        { id: 5, name: "Item 5", price: 100, color: "#0000ff" },
        { id: 6, name: "Item 6", price: 102, color: "#f000ff" },
        { id: 7, name: "Item 7", price: 100, color: "#0000ff" },
        { id: 8, name: "Item 8", price: 102, color: "#f000ff" }
      ],
      selectedResultsTableIndex: 0,
      displayColorPicker: false,
      xPosColorPicker: "0px",
      yPosColorPicker: "0px",
      changeColor: "#999",
      color: {
        r: "0",
        g: "9",
        b: "153",
        a: "1"
      },
      columns: [
        {
          dataField: "id",
          text: "Product ID"
        },
        {
          dataField: "name",
          text: "Product Name",
          filter: textFilter({
            placeholder: "Search",
            onFilter: filterVal => this.setState({
              currFilter: filterVal
            }),
            defaultValue: ''
          })
        },
        {
          dataField: "price",
          text: "Product Price"
        }
      ]
    };
  }

  handleTable = () => {
    this.setState({
      step: "table",
      columns: [
        {
          dataField: "id",
          text: "Product ID"
        },
        {
          dataField: "name",
          text: "Product Name",
          filter: textFilter({
            placeholder: "Search",
            onFilter: (filterVal) => {
              if (filterVal !== this.state.currFilter) {
                this.setState({
                  currFilter: filterVal
                })
              }
            },
            defaultValue: this.state.currFilter
          })
        },
        {
          dataField: "price",
          text: "Product Price"
        }
      ]
    });
  };

  handleShow = () => {
    this.setState({ step: "show" });
    this.columns[1].filter = textFilter({
      placeholder: "Search",
      onFilter: filterVal => this.setState({
        ...this.state,
        currFilter: filterVal
      }),
      defaultValue: this.state.currFilter
    })
  };

  handleMultiSelect = row => {
    let listOfSelect = this.state.selectedCapTableIndices;
    let capIdSelected = row.id;

    if (listOfSelect.indexOf(capIdSelected) === -1) {
      listOfSelect.push(capIdSelected);
      this.settate.onUpdateSelectedIndices(listOfSelect);
    } else {
      listOfSelect.splice(listOfSelect.indexOf(capIdSelected), 1);
      this.state.onUpdateSelectedIndices(listOfSelect);
    }
  };

  onPageChange = (newPage, sizePerPage) => {
    this.setState({
      ...this.state,
      currPage: newPage
    });
  };

  render() {
    const selectRowMulti = {
      mode: "checkbox",
      clickToSelect: true,
      selected: this.state.selectedCapTableIndices,
      onSelect: this.handleMultiSelect,
      hideSelectColumn: true,
      style: { backgroundColor: "#0E253A", color: "white" },
      nonSelectable: [1, 3],
      nonSelectableStyle: { backgroundColor: "#BDBDBD", color: "#424242" }
    };
    const customTotal = (from, to, size) => (
      <span className="react-bootstrap-table-pagination-total">
        Showing {from} to {to} of {size} search results
      </span>
    );
    const optionsPag = {
      page: this.state.currPage,
      firstPageText: "First",
      prePageText: "Back",
      nextPageText: "Next",
      lastPageText: "Last",
      nextPageTitle: "First page",
      prePageTitle: "Pre page",
      firstPageTitle: "Next page",
      lastPageTitle: "Last page",
      showTotal: true,
      onPageChange: this.onPageChange,
      paginationTotalRenderer: customTotal,
      sizePerPageList: [
        {
          text: "4",
          value: 4
        }
      ]
    };

    return (
      <div>
        <div style={{ padding: "20px" }}>
          <h1 className="h2">Products</h1>
          <button onClick={this.handleTable}>Table</button>
          <button onClick={this.handleShow}>Show</button>
          {this.state.step === "table" ? (
            <BootstrapTable
              keyField="id"
              data={this.state.dataResultsTable}
              columns={this.state.columns}
              filter={filterFactory()}
              pagination={paginationFactory(optionsPag)}
              selectRow={selectRowMulti}
            />
          ) : (
            this.state.step === "show" && <div>Showing something</div>
          )}
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ProductList />, rootElement);

but so far we don't support the restore filter mechanism natively. so above is just a workaround, i will figure a way to achieve.

[chazarabriseis]

Thanks @AllenFang, will use the workaround. This will be 12 states for 12 columns

[chazarabriseis]

@AllenFang if deleting a filter it still remebers the old one. Seems that the filterVal is not changing if it is changed to "" empty?

https://codesandbox.io/s/table-remeber-filter-znohm

[ThangPk]

@AllenFang if deleting a filter it still remebers the old one. Seems that the filterVal is not changing if it is changed to "" empty?

https://codesandbox.io/s/table-remeber-filter-znohm

I also have the same problem here. @AllenFang