0

I have a react-virtualized table where column sorting is enabled. My plan is to add a filter icon next to column headers and do a Material-UI popover when someone clicks on it.

So here is what I did: I enabled headerRenderer

headerRenderer= {this.renderHeader}

My headerRenderer returns a component

  renderHeader = (value) => {
    // console.log(value)
    return <ColumnFilterContainer label= {value.label} />
  }

ColumnFilterContainer is as follows.

import React from 'react'
import ContentClear from 'material-ui/svg-icons/content/clear'
import FilterList from 'material-ui/svg-icons/content/filter-list'

const ColumnFilterContainer = (props) => {
  const {label} = props
  return <span>{label} <a onClick={console.log('TEST')} ><FilterList /></a></span>
}

export default ColumnFilterContainer

But when I click on the svg-icon it consoles out the 'TEST' but also resorts the table. How can I achieve what I would like to do. Is it doable?

Thanks

Community
  • 1
  • 1
Timur Catakli
  • 1,306
  • 1
  • 11
  • 12

1 Answers1

0

Table listens for clicks on sortable headers. (That is, columns that aren't tagged as disableSort that belong to a Table with a sort callback.)

In your case, if you have something within your sortable header that shouldn't trigger sorting- just prevent the event from bubbling and you should be fine. :)

Alternately you could also just ignore the next call to your sort function but I think that would be a hackish solution.

bvaughn
  • 13,300
  • 45
  • 46