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.