React-data-grid: How to override default filter method, to write custom filtering logic.

[Gaurang-M]

HAVE YOU ALREADY SEARCHED FOR SIMILAR ISSUES? PLEASE HELP US OUT AND DOUBLE-CHECK FIRST!

ALSO, PLEASE DON'T BE THAT PERSON WHO DELETES THIS TEMPLATE. IT'S HERE FOR A REASON.

THANKS!

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[ ] v0.14.x

Community Supported:
[ ] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[ ] Chrome

Should work:
[ ] Firefox
[ ] Safari

---

I'm submitting a ... (check one with "x")

[ ] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior

Expected/desired behavior

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?

What is the motivation / use case for changing the behavior?

[GenoD]

Should be achievable by giving a filterRenderer

const columns = [
              {
                  key: 'ProductNum',
                  name: <Translate value="prod_no"/>,
                  resizable: true,
                  sortable: true,
                  width: 80,
                  filterRenderer: FilterByStart,
              }

Documentation found here:
http://adazzle.github.io/react-data-grid/examples.html#/custom-filters

[Gaurang-M]

Hi GenoD,

This is how my col looks like:

This is my col config:

[...,
 { key: 'status', name: 'Status' , sortable: true, filterable: true, formatter: StatusFormatter },...]

This is my Data:

[{
status: true,...
},
{
status: false,...
},....]

I am unable to filter through the column as the data associated with the column for each row is a "Boolean". Here i need to write my custom filter renderer function.
somthing like this, in the column config

{ key: 'status', name: 'Status' , sortable: true, filterable: true, formatter: StatusFormatter. filterRenderer: function(col,row,filterValue){ //write some condition on the row obj AND filterValue if(CONDITION) return true; else return false; } },

It would be great if you can help me with a simple example where i can over write the filter callback and do the decession making on my own.

[mikepc]

The link that you provide for custom filters doesn't demonstrate implementing a custom filter, but instead just demonstrates the filters provided with addons.

Documentation on how to implement a custom filter would be awesome!

My use case is I have to provide a link to one of the row items, so I have to implement a custom formatter to embed a link, the link text is the name property and the link points to the id of the row, so I have to pass the value as an object pairing the two.

I don't mind implementing a custom formatter for this, but I need the filter to point at the formatted object's name.

[GenoD]

@mikepc apologies. Towards the top right there is a link "Jump to source" although the source code is the extent of their documentation

[GenoD]

I believe you must pass a react component for the filterRenderer.

In my case _FilterByStart_ is a React component with a custom onChange function given for the filter term input.

class FilterByStart extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  filterValues(row, columnFilter, columnKey) {
    if (columnFilter.filterTerm == null) {
      return true;
    }
    let result = false;
    // implement default filter logic
    let value = row[columnKey];
    let rule = columnFilter.filterTerm;
      if (value.indexOf(rule) == 0) {
        result = true;
      }
    return result;
  }

  handleChange(e) {
    let value = e.target.value;
    this.props.onChange({filterTerm: value, column: this.props.column, rawValue: value, filterValues: this.filterValues });
  }

  render() {
    let inputKey = 'header-filter-' + this.props.column.key;
    let columnStyle = {
      float: 'left',
      marginRight: 0,
      maxWidth: '100%'
    };

    return (
        <div style={columnStyle}>
          <input key={inputKey} type="text" placeholder="e.g. 01" className="form-control input-sm byStart" onChange={this.handleChange} />
        </div>
    );
  }
}

FilterByStart.propTypes = {
  onChange: React.PropTypes.func.isRequired,
  column: React.PropTypes.shape(ExcelColumn)
};

export default FilterByStart;

Hope this helps!
@Gaurang-M
@mikepc

[mikepc]

That solution was perfect for me, thank you very much!

[Gaurang-M]

@GenoD,

Thanks for the solutioning, but i am running into error while implementing the same at me end,

This is my Filter, as suggested by you:

import React from 'react';

class StatusFilter extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  filterValues(row, columnFilter, columnKey) {
   // Filter logic goes here
    return true;
  }

   handleChange(e) {
    let value = e.target.value;
    this.props.onChange({filterTerm: value, column: this.props.column, rawValue: value, filterValues: this.filterValues });
  }

  render() {
    let inputKey = 'header-filter-' + this.props.column.key;
    let columnStyle = {
      float: 'left',
      marginRight: 0,
      maxWidth: '100%'
    };

    return (
        <div style={columnStyle}>
          <input key={inputKey} type="text" placeholder="e.g. 01" className="form-control input-sm byStart" onChange={this.handleChange} />
        </div>
    );
  }
}

StatusFilter.propTypes = {
  onChange: React.PropTypes.func.isRequired,
  column: React.PropTypes.shape(ExcelColumn)
};

export default StatusFilter;

This is how my Col Config looks like

import React from 'react';
import StatusFilter from './StatusFilter';
[...,
{ 
  key: 'status', 
  name: 'Status' , 
   sortable: true, 
  filterable: true, 
  formatter: StatusFormatter.
  filterRenderer: <StatusFilter onChange={() => {}}/>
},...
]

This is the error i'm getting on console

Kindly elaborate end to end implementation for the same, so that i can close the issue asap. I am not finding any help for how to import "ExcelColumn " into my app.

I'm not even sure for the way i've passed "onChange" function to Status Filter

.

@mikepc , if you can share youre implementation, that would be great.

Thanks for the help guyz !!!

[GenoD]

@Gaurang-M

"ExcelColumn" should be imported this way:

import { shapes } from 'react-data-grid';
const { ExcelColumn } = shapes;

As for the implementation of logic. I am going to assume you want to type "True" or "False" to filter out accordingly.

 filterValues(row, columnFilter, columnKey) {
    if (columnFilter.filterTerm == null) {
        // This will return all rows if there exists no filterTerm
        return true;
    }
    let result = false;
    let value = row[columnKey]; 
    // row[columnKey] will assign the column contents to filter by. In your case the values True || False

      // It is important to use "==" and not "===" here as it will be String to Boolean comparison
      if (value == columnFilter.filterTerm) {
        result = true;
      }
    return result;
  }

[Gaurang-M]

@GenoD,

It is becoming a really difficult to implement this feature. A standalone example & doc for the feature is highly recomended.

Below is my error:

Please Help .. !!

[GenoD]

Not enough context in your error message to be honest. From the message though, it doesn't seem to be related to your custom filter component.

[Gaurang-M]

@GenoD,

Can you please create a fidler implementing above logic you've explained. It would be very helpfull for me to understand and implement it. May be i am missing it as there is no implementation showcased on react data grid web site. A very basic example will do.

I really appreciate youre efforts ..!!
Thanks in advance mate.

[Gaurang-M]

@GenoD any update on this ?

[amanmahajan7]

Closing due to inactivity. Here is an example for custom filters
http://adazzle.github.io/react-data-grid/scripts/example22-custom-filters.js

[mattnedrich]

@amanmahajan7 link is broken