Navigation
-
Main
- Dashboard No pending orders
- Layouts
- Themes
- Starter kit
- Changelog 4.0
-
Forms
- Form components
- Text editors
- Pickers
- Form layouts
-
Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
-
Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
-
Data visualization
- Echarts library
- D3 library
- C3 library
- Google charts
- Maps integration
-
Extensions
- Extensions
- File uploaders
- Event calendars
- Internationalization
-
Tables
- Basic tables
- Grid.js tables
- Data tables
- Data tables extensions
-
Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
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.
© 2023 EVISAFI