Grid.js Modern Javascript Data Table Library For Rendering Data Tutorial for Beginners

Welcome folks today in this blog post we will be showing the grid.js library of javascript to display tabular data inside the browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

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>
        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"));
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<link

href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"

rel="stylesheet"

</head>

<body>

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"));

</script>

</body>

</html>

As you can see in the above html code we are including the cdn links for the css and the javascript for grid.js library. And also we have the div tag where we are rendering the table and inside the javascript we are providing the data source which will be rendered inside the table we are providing the column names and then actual data. And then we are using the render() method to actually mount the table on the div element having the id wrapper as shown below.