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.
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless