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.