Is the autocomplete filter doesn't work for columns with numeric values in react-data-grid version 2.0.0?

Question

I am trying to implement a dropdown filter(Singleselect/multiselect/autocpmplete) for a column in my table which contains numeric values for a use case, but in react-data-grid version 2.0.0 and react-data-grid-addons version 2.0.0 I am not able to do this. Is there any work around? and the autocomplete filter only works for columns that have string values. In the below code the Singleselect filter doesn't work at all and the columns such as ftPad, ptmPad which have numeric value, if I apply autocomplete filter it doesn't work as well, However, it works for string values. Any workarounds to implement this filter on columns with numeric value?

import React, { Component } from 'react';
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data, Filters} from "react-data-grid-addons";

const Selectors = Data.Selectors;
const AutoCompleteFilter = Filters.AutoCompleteFilter;
const NumericFilter = Filters.NumericFilter;
const SingleSelectFilter = Filters.SingleSelectFilter;

export default class PadMonitoringReport extends Component {
  constructor(props) {
     super(props);
     this._columns = [
    {
        key: 'nodeId',
        name: 'WarehouseId',
        sortable: true,
        filterable: true,
        filterRenderer: SingleSelectFilter
    },
    {
        key: 'nodeType',
        name: 'Node Type',
        filterable: true,
        sortable: true,
        resizable: true,
        filterRenderer: AutoCompleteFilter
    },
    {
        key: 'backlog',
        name: 'Backlog',
        sortable: true,
        filterable: true,
        filterRenderer: NumericFilter
    },
    {
        key: 'ptmPad',
        name: 'PTM Pad',
        filterable: true,
        sortable: true,
        filterRenderer: NumericFilter
    },
    {
        key: 'ftPad',
        name: 'FT Pad',
        filterable: true,
        sortable: true,
        filterRenderer: NumericFilter
    },
    {
        key: 'maxCPTRisk',
        name: 'Max CPT Risk',
        sortable: true,
        filterable: true,
        filterRenderer: NumericFilter
    },
    {
        key: 'pickToManifestTimeInSeconds',
        name: 'Pick to manifest (time in sec)',
        sortable: true,
        filterable:true,
        filterRenderer: NumericFilter
    }
    ];
    this.state = {
        rows: props.data,
        filters: {},
        sortColumn: null, 
        sortDirection: null
    };
    this.rowGetter = this.rowGetter.bind(this);
    this.handleGridSort = this.handleGridSort.bind(this);
    this.handleFilterChange = this.handleFilterChange.bind(this);
    this.onClearFilters = this.onClearFilters.bind(this);
    this.getRows = this.getRows.bind(this);
    this.getSize = this.getSize.bind(this);
    this.getValidFilterValues = this.getValidFilterValues.bind(this);
}

getRows() {
   return Selectors.getRows(this.state);
}

getSize() {
    return this.getRows().length;
}

rowGetter(i) {
    //console.log("it is............")
    //console.log(this.state.rows[i])
    let rows = this.getRows();
    return rows[i];
}

handleGridSort(sortColumn, sortDirection) {
    this.setState({ sortColumn: sortColumn, sortDirection: sortDirection });
}

handleFilterChange(filter) {
    let newFilters = Object.assign({}, this.state.filters);
    if (filter.filterTerm) {
        newFilters[filter.column.key] = filter;
    } else {
        delete newFilters[filter.column.key];
    }
    this.setState({ filters: newFilters });
}

onClearFilters() {
    // all filters removed
    this.setState({filters: {} });
}

getValidFilterValues(columnId) {
   let values = this.state.rows.map(r => r[columnId]);
   return values.filter((item, i, a) => { return i === a.indexOf(item); });
}

render() {
   return  (
   <div>
      <ReactDataGrid
           onGridSort={this.handleGridSort}
           enableCellSelect={true}
           columns={this._columns}
           rowGetter={this.rowGetter}
           rowsCount={this.getSize()}
           toolbar={<Toolbar enableFilter={true}/>}
           onAddFilter={this.handleFilterChange}
           getValidFilterValues={this.getValidFilterValues}
           onClearFilters={this.onClearFilters} 
      />
    </div>  
           );
}

}

Answer 1

I don't know is it relevant now or not, I faced this issue and solved it. You need to convert your number array to string array for getValidFilterValues props

For instance:

getValidFilterValues={this.getValidFilterValues}

getValidFilterValues = (columnId) => {
    let values = this.state.rows.map(r => r[columnId]);
    var r = values.filter((item, i, a) => { 
        return i === a.indexOf(item); 
    });
    return r.map(v => v.toString());
};