Grid.js uses Preact under the hood to render the table and other components like search, pagination, etc.
A Grid.js plugin is a
class or a
function that render a Virtual Node. This interface is very similar to a React component.
Once you have a component that can render an element, then you can add it to the list of Grid.js plugin and Grid.js will take care of rendering and calling your plugin.
A Plugin has following properties:
id is a unique string,
position defines where that plugin should be rendered and there is an optional
property to change the ordering of plugins in a specific plugin position (e.g. header).
Grid.js can render a plugin in different positions. Simply import
PluginPosition enum from
gridjs package and use it
when you are calling the
If you need to render your plugin in a position that doesn't already exist, please open a GitHub issue and we will add a new PluginPosition!
Adding a Plugin
Adding a plugin to a Grid.js instance is as easy as calling
gridjs_instance.plugin.add(...), for instance:
id are mandatory fields and
component is the actual plugin class or function that we want to render.
You can render the same plugin multiple times by calling the
plugin.add() function and passing an unqiue ID.
Ordering of plugins
You can pass an optional
order property to
plugin.add() to define the ordering of your components:
In above example,
myfirstplugin renders first and then
mysecondplugin will be rendered.
Now, let's take a look at writing a simple plugin.