Skip to main content

Hello World

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

note

We are currently working on developing wrappers for React, Angular and Vue

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.development.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", "[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"]
]
}).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', '[email protected]', '(353) 01 222 3333'],
['Mark', '[email protected]', '(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.

Last updated on by Afshin Mehrabani