Skip to content

Raw Data Table - Custom Column Filter

This demo shows you how to use default filter components for "commission" and "qtysold" and also create a custom filter component for the "pricepaid" column in the raw data table below. The class MyComponent is a custom filter component implementing the ag-grid filter component structure and also includign the filter selection in the Interaction Manager:

For more information about the ag-grid filter components structure check the AG Grid Filter Components article.

If you want to see the demo in full screen click here

Review the complete source code and copy/paste it to create your own. 
1
{"action": "import", "url": "../cf-demos/raw-data-table-custom-filter/index.html"}

1
{"action": "import", "url": "../cf-demos/raw-data-table-custom-filter/style.css"}

1
{"action": "import", "url": "../cf-demos/raw-data-table-custom-filter/index.js"}

1
{"action": "import", "url": "../cf-demos/raw-data-table-custom-filter/MyComponent.js"}

The Ticket Sales data is derived from the Amazon’s Sample Database for Redshift. The data represents ticket sales activity for the fictional TICKIT web site, where users buy and sell tickets online for different types of events.