React-table: How to create a Filter component detached from the ReactTable?

[lefnire]

Design spec I'm working with has a "filter by department" select outside the table. Working with the existing column.Filter prop and moving it with CSS is messy (since it needs to be positioned relative to neighbor components). My initial thought was to give the ReactTable a ref and call a method directly, here's what I tried:

class MyComponent extends Component {
  defaultFilterMethod = (filter, row, column) => {
    debugger; // This line never reached
    const id = filter.pivotId || filter.id;
    return row[id] !== undefined ? row[id].department === filter.value : true;
  };

  render() {
    const data = [{
      name: 'Tanner Linsley',
      department: 1,
    },{
      name: 'Jason Maurer',
      department: 2,
    }];

    const columns = [{
      Header: 'Name',
      accessor: 'name'
    }, {
      Header: 'Department',
      accessor: 'department'
    }];

    return (
      <div>
        <select onChange={e => this.reactTable.filterColumn('department', e.target.value)}>
          <option value="all">All</option>
          <option value="1">Department One</option>
          <option value="2">Department Two</option>
        </select>

        <ReactTable
          ref="reactTable"
          columns={columns}
          defaultFilterMethod={this.defaultFilterMethod}
          data={data}
          filterable={true}
        />
      </div>
    );
  }
}

However, the debugger; statement above is never reached. Is there a smarter way about this?

[tannerlinsley]

This seems like a good candidate for the functional rendering feature.
On Tue, Jun 6, 2017 at 5:10 PM Tyler Renelle [e-mail]
wrote:

Problem Description

include a detailed explanation of the problem here...

Design spec I'm working with has a "filter by department" select outside
the table. Working with the existing column.Filter prop and moving it
with CSS is messy (since it needs to be positioned relative to neighbor
components). My initial thought was to give the ReactTable a ref and call
a method directly, here's what I tried:

class MyComponent extends Component {
defaultFilterMethod = (filter, row, column) => {
debugger; // This line never reached
const id = filter.pivotId || filter.id;
return row[id] !== undefined ? row[id].department === filter.value : true;
};

render() {
const data = [{
name: 'Tanner Linsley',
department: 1,
},{
name: 'Jason Maurer',
department: 2,
}];

const columns = [{
  Header: 'Name',
  accessor: 'name'
}, {
  Header: 'Department',
  accessor: 'department'
}];

return (
  <div>
    <select onChange={e => this.reactTable.filterColumn('department', e.target.value)}>
      <option value="all">All</option>
      <option value="1">Department One</option>
      <option value="2">Department Two</option>
    </select>

    <ReactTable
      ref="reactTable"
      columns={columns}
      defaultFilterMethod={this.defaultFilterMethod}
      data={data}
      filterable={true}
    />

  </div>
);

}
}

However, the debugger; statement above is never reached. Is there a
smarter way about this?
Code Snippet(s) or Codepen (
http://codepen.io/tannerlinsley/pen/QpeZBa?editors=0010) Steps to
Reproduce

1. list the steps
2. to reproduce the issue

System Information

• Browser & Browser Version:
• Node Version:
• OS Version:
• NPM Version:
• Yarn Version:

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/328, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AFUmCez7sMM0KRq2NPcTR2y1ZOcIWmgSks5sBdxggaJpZM4NyBvs
.

[lefnire]

Here's an update that I did get working. My bad, I needed to pass the column object directly, not just the accessor/id.

class MyComponent extends Component {
  data = [{name: 'Tanner Linsley', department: 1}, {name: 'Jason Maurer', department: 2}];
  columns = [{Header: 'Name', accessor: 'name'}, {Header: 'Department', id: 'department', accessor: 'department'}];

  defaultFilterMethod = (filter, row, column) => {
    const id = filter.pivotId || filter.id;
    return row[id] !== undefined ? row[id].department === filter.value : true;
  };

  onChange = e => this.refs.reactTable.filterColumn(this.columns[1], e.target.value);

  render() {
    return (
      <div>
        <select onChange={this.onChange}>
          <option value="">All</option>
          <option value="1">Department One</option>
          <option value="2">Department Two</option>
        </select>

        <ReactTable
          ref="reactTable"
          columns={this.columns}
          defaultFilterMethod={this.defaultFilterMethod}
          data={this.data}
          filterable={true}
        />
      </div>
    );
  }
}

Functional rendering does indeed look like the proper approach; cleaner and more idiomatic. I'll update this ticket with that sample code if I get that working.

[alexrborton]

Did anyone have an example of the above using Functional Rendering?

[dan-kez]

I would also be happy to put a PR with the above in the docs if we don't have a good example of functional rendering.

This is a fairly common use case. Prior reading this thread I was just manipulating the input data prop (via state) - this is much better & faster.

[Khangeldy]

@lefnire Which is more preferable? Deleting filterable flag from ReactTable or hiding filter-row it in css?

[zachsa]

@dan-kez - is there documentation on this? I'm attempting to do a filter that is a component distinct from the ReactTable - as shown in the example by @lefnire. But calling this.refs.reactTable.filterColumn(this.columns[0], val) doesn't result in the filter being fired.

I can't find any documentation on reactTable.filterColumn either. Is there any?

[jerrybuks]

@dan-kez - is there documentation on this? I'm attempting to do a filter that is a component distinct from the ReactTable - as shown in the example by @lefnire. But calling this.refs.reactTable.filterColumn(this.columns[0], val) doesn't result in the filter being fired.

I can't find any documentation on reactTable.filterColumn either. Is there any?

@zachsa please did you find a way around this, I'm stuck on the same issue?

[zachsa]

@dan-kez - is there documentation on this? I'm attempting to do a filter that is a component distinct from the ReactTable - as shown in the example by @lefnire. But calling this.refs.reactTable.filterColumn(this.columns[0], val) doesn't result in the filter being fired.
I can't find any documentation on reactTable.filterColumn either. Is there any?

@zachsa please did you find a way around this, I'm stuck on the same issue?

If I remember correctly I changed track and implemented a filter myself with the table component that came with the library I was using (react-md).

I passed filtered data to a controlled table component