Skip to main content

Hello World

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

Browser

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:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="wrapper"></div>

<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script src="src/index.js"></script>
</body>
</html>

tip

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:

src/index.js
new gridjs.Grid({
columns: ["Name", "Email", "Phone Number"],
data: [
["John", "john@example.com", "(353) 01 222 3333"],
["Mark", "mark@gmail.com", "(01) 22 888 4444"],
["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
]
}).render(document.getElementById("wrapper"));
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";

React

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', 'john@example.com', '(353) 01 222 3333'],
['Mark', 'mark@gmail.com', '(01) 22 888 4444']
]
});

useEffect(() => {
grid.render(wrapperRef.current);
});

return <div ref={wrapperRef} />;
}
tip

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