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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!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> |
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.