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:

<!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:

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