Nested header
Grid.js supports nested (or grouped) headers, all you need to do is to define nested
columns
attribute in your column config. You can also enable "sorting" when using nested headers and use nested header with fixedHeader
option. Sorting always works on the last column level only, because the library assumes that these are actual columns list that the grid displays.
Multi column sort
Grid.js supports multi column sorting. Hold the shift key and click on multiple columns to activate it, and click on a sort button while you're holding the shift key to remove the sort from that column. Multi column sorting is enabled by default and can be turned off by setting
multiColumn
option to false
. In this example multi column sorting is disabled
Custom sort
You can customize the sort plugin by using the
compare
function. Each column accepts a custom compare function. In this example, we are sorting the "Phone Number" column based on the last 4 digits. Sorting in all other columns are not affected as "Phone Number" sort config is applied in the column configuration.
Events
Grid.js has a global EventEmitter object which is used to emit events throughout the application lifecycle. Simply, use the
on
method to capture and bind a function to events. In this example we added 4 events for demonstration: load
, ready
, rowClick
and cellClick
. Open your developer tools console to see the logs.