CODEWITHSUNDEEP
reactjsreact-data-grid
Lalith kumar
Lalith kumar

Reputation: 103

ReactDataGrid - Filter not working on particular column when its cell values are passed as DOM instead of strings

I am using React-data-grid with Filter options in the table. For some column cells, i am passing a DOM object (not as a string). And for this column, the filter functionality is not working.

       this._columns = [
        {
            key: 'date',
            name: 'Shipment date',
            width: 220,
            sortable: true,
            filterable: true,
        },{
            key: 'price',
            name: 'Shipment Price',
            width: 220,
            sortable: true,
            filterable: true,
        }];

And here are the Rows...

    let rows = [];
    _.each(response, function(value, index){
    rows.push({
            date: value.date
            price: <div>{value.currencySymbol} <span>{value.price}</span></div>
           })
    });

So, this is my Column Metadata , and Rows. I am passing this metadata to ReactDataGrid Component. Now the date filter is working fine. However this price filter is not working well due to this inline DOM element.

Can Someone please help me to get this solved?

Upvotes: 0

Views: 959

Answers (1)

Lalith kumar
Lalith kumar

Reputation: 103

Resolved this by using 'formatter' or else we could use 'getRowMetaData'

formatter: an adaptor/middleware for rendering the value in DOM getRowMetaData: it is used to get the adjacent cell values of the row. And, We could achieve using props.dependentValues where it will have all the column data of the row. I used this in 'Shipment Price' column, to get the other column values of that row. 

this._columns = [
        {
            key: 'date',
            name: 'Shipment date',
            width: 220,
            sortable: true,
            filterable: true,
            formatter: (props)=>(<div style={{border: '0px'}}>{props.value}</div>),
        },{
            key: 'price',
            name: 'Shipment Price',
            width: 220,
            sortable: true,
            filterable: true,
            formatter: (props) => (this.getTrackingUrl(props.dependentValues.rawObj, props.dependentValues.indexVal)),
            getRowMetaData: (row) => (row)
        }];

Upvotes: 0

Related Questions