Column filters

Implement column filtering to help users refine and sort data.

Example

Id
Filter mode:
Name
Filter mode:
Category
Filter mode:
Price Retail
Filter mode:
1
Luxurious Bamboo Tuna
Clothing
266.92
2
Fantastic Bronze Table
Sports
124.8
3
Handcrafted Concrete Cheese
Home & Garden
480.58
4
Ergonomic Steel Cheese
Clothing
127.56
5
Sleek Concrete Hat
Sports
77.61
6
Modern Gold Salad
Home & Garden
321.32
7
Gorgeous Aluminum Cheese
Clothing
41.82
8
Handmade Plastic Shirt
Sports
487.32
9
Ergonomic Wooden Keyboard
Sports
485.29
10
Frozen Bamboo Soap
Electronics
165.47
Per page:
Page 1 of 5
Showing 1 to 10 of 50 rows

Key Points

  1. TMeta Generic for Better IntelliSense:

    You can pass an additional type to ColumnDef<InventoryItem, YOUR_TYPE>[] to enhance IntelliSense support for the _meta field.

  2. Using _meta for Custom Data:

    The _meta field allows you to pass any custom data while keeping it fully typed.

  3. Checking If a Column is Filterable:

    You can determine if a column is filterable by accessing its options: column.options.filterable

  4. Choosing Which Filters to Render:

    datagrid does not enforce a specific way to determine which filters to render.
    For example, you can use the _meta field like this:

    _meta: {
    	filterType: 'range'
    }

    This is just an example—you can use any structure that suits your needs.

  5. Passing Options For Select:

    I found it easy to pass options in this way, again it’s up to you.

    filterOptions: [
    	{ label: 'Computers', value: 'Computers' },
    	{ label: 'Clothing', value: 'clothing' }
    ]