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.
© 2022 Limitless
Web App Kit