Problem
I want to add custom header column to filter data in data grid.
Solution
Utilize headerRenderer and customize DataGridHeaderColumn.
Detailed explanation
http://github.com/trung/filterdatagridhttp://github.com/trung/filterdatagridInspired by Alex's post about itemRenderer
I just put some code together to make a FilterDataGrid which allows to add filter in each column header to sort out the data as you type.
The filter can be implemented in different way. In the attaced example, I implemented 2 filters: TextInputHeaderColumn and ComboBoxHeaderColumn
- TextInputHeaderColumn and TextInputHeaderRenderer are responsible to render a text field in header column and filter out data in the grid using RegEx.
- ComboBoxHeaderColumn and ComboBoxHeaderRenderer caputure the unique data for that column and add to a combobox which is renderered in the header column.
Further customization of filter header columns can be done by implementing Filterable interface.
The following is the initial result of the FilterDataGrid
Code might not be clean so please feel free to download the code and enhance it. I'll make it as the opensource as soon as I find time.
Update: Many thanks for all your comments. I haven't been actively maintaining the code. Eventhough it's now open sourced. Code is available at http://github.com/trung/filterdatagrid.
