Filtered table doesn't rerender on prop change

[gjakab]

So when the table is filtered and it's data prop is changed then the table won't rerender until you change the filter again. Is there any way to make it rerender? Or in my case an other option would be to reset the table filters but I didn't find a clear solution for that.

[AllenFang]

So when the table is filtered and it's data prop is changed then the table won't rerender until you change the filter again

HI @gjakab could you please share more? code and flow.

Or in my case an other option would be to reset the table filters but I didn't find a clear solution for that.

We will have a implementation for filter table pragmatically in next version, it can be a workaround for this requirement, anyway, we will implement the clean filter functionality. thanks

[tapioko]

Example flow:

1. Type something in the column filter
2. => At least one row is still visible
3. Somehow remove that row from original data or modify row's data so that row should disappear (because filter text does not match row data anymore)
4. => Row does not disappear
5. Add one character to the column filter and then remove the added character
6. => Table is updated and the row disappears

[AllenFang]

Hi @tapioko when you modify the raw data, did you sync the data to table again? I mean maybe render table by calling setState?

[tapioko]

Here's the code. In essence user data is modified in modal form and saved to backend, and then form is closed and all users are loaded again and setState is called.

class UserList extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      users: [],
      showUserForm: false,
      userId: null
    };

    this.defaultSorted = [{
      dataField: 'username',
      order: 'asc'
    }];

    const getDefaultColumn = (dataField) => {
      const messageId = 'users.fields.' + dataField;
      return {
        dataField: dataField,
        text: this.props.intl.formatMessage({ id: messageId }),
        filter: textFilter({ placeholder: ' ' })
      };
    };
    this.columns = [
      getDefaultColumn('username'),
      {
        dataField: '',
        text: '',
        formatter: (cell, row) => (
          <div>
            <Button bsSize="small" onClick={() => this.handleOpenForm(row.id)}>
              Edit
            </Button>
          </div>
        )
      }
    ];

    this.handleOpenForm = this.handleOpenForm.bind(this);
    this.handleCloseForm = this.handleCloseForm.bind(this);
  }

  componentDidMount() {
    this.loadUsers();
  }

  handleOpenForm(userId) {
    this.setState({ showUserForm: true, userId });
  }

  handleCloseForm(modified) {
    this.setState({ showUserForm: false, userId: null });
    if (modified) {
      this.loadUsers();
    }
  }

  loadUsers() {
    axios.get('/api/v1/admin/users?size=1000')
      .then(response => {
        this.setState({ users: response.data });
      });
  }

  render() {
    const s = this.state;
    return (
      <div className={styles.container}>
        {!s.showUserForm ? null :
        <UserForm
          handleClose={this.handleCloseForm}
          userId={s.userId}
        />
        }

        <BootstrapTable
          columns={this.columns}
          data={s.users}
          defaultSorted={this.defaultSorted}
          filter={filterFactory()}
          keyField="id"
          striped
        />
      </div>
    );
  }
}

[AllenFang]

@tapioko understand, thanks~

[AllenFang]

https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/05/13/version-bump.html

Fixed on react-bootstrap-table2-filter@0.1.7