Skip to main content

Hello World

Now that we have installed the library, let's write a simple example.


You don't need any build tools to use Grid.js. Simply include the JavaScript and CSS files in your project and then call the Grid class to create a new instance:

<!DOCTYPE html>
<html lang="en">
<div id="wrapper"></div>
<script src=""></script>
<script src="src/index.js"></script>

Grid.js is available as gridjs in the global scope (e.g. window.gridjs)

And then instantiate gridjs.Grid class in your index.js file:

new gridjs.Grid({
columns: ["Name", "Email", "Phone Number"],
data: [
["John", "[email protected]", "(353) 01 222 3333"],
["Mark", "[email protected]", "(01) 22 888 4444"],
["Eoin", "[email protected]", "0097 22 654 00033"],
["Sarah", "[email protected]", "+322 876 1233"],
["Afshin", "[email protected]", "(353) 22 87 8356"]
Edit gridjs-hello-world

Node.js module#

You can import gridjs in your application using:

import { Grid } from "gridjs";
import "gridjs/dist/theme/mermaid.css";


Here is an example of using Grid.js in a React app (without the gridjs-react wrapper)

import { Grid } from "gridjs";
import "gridjs/dist/theme/mermaid.css";
function helloWorld () {
const wrapperRef = useRef(null);
const grid = new Grid({
columns: ['Name', 'Email', 'Phone Number'],
data: [
['John', '[email protected]', '(353) 01 222 3333'],
['Mark', '[email protected]', '(01) 22 888 4444']
useEffect(() => {
return <div ref={wrapperRef} />;

Above example is just to demonstrate how to import and initiate Grid.js. Please use the gridjs-react component instead. See React integration.

Last updated on by Afshin Mehrabani