Basic example
Grid.js is a lightweight Javascript grid plugin written in Typescript. It is developed to be used with all popular JavaScript frameworks include React, Angular.js, Vue or without any frameworks! The library is extremely fast due to an internal pipeline that takes care of caching and processing data. Grid.js uses Preact under the hood to render the templates (Note: but it can be used with any JavaScript frameworks) and employs a minimal Flux architecture to communicate with other components.
Sorting
Sort has 2 config options: 1) Generic config: to enable sort for all columns, enable multi column sort, server-side integration etc; 2) Column specific config: to enable sort on a specific column, to set custom comparator function, etc. To simply enable sort for all columns, set sort option to true. Optionally control server side integration and multi column sorting with a few available properties.
Search
Grid.js supports global search on all rows and columns. Set search: true in your JS configuration to enable the search plugin. Optionally you can also add server config to your search definition to enable server-side search. Besides generic settings, you can also specify a custom selector to customize searchable fields and tell the engine to ignore hidden columns (they are searchable by default).
Pagination
To enable grid pagination, add pagination: true to your configuration. You can customize nearly everything - limit, starting page, labels, language, number of buttons etc. Add server property to the pagination config to enable server-side pagination. Also, make sure the total property is correctly defined in the main server config block.
Resizable columns
Simply add resizable: true to your config to enable resizable columns. Resize handle is displayed in table header cells next to sorting icon, and appears on hover. By default it has 5px width and theme's primary background color. You can customize general appearance in CSS variables if you need to make it more prominent.
Hidden columns
Add hidden: true to the columns definition to hide them. The following example uses same dataset as other grids, but in this particular example the email column is hidden by default. Note: enabling the hidden flag only affects the rendering process of your Grid.js instance. Hidden columns are still searchable.
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