Introducing Grid.js | An open-source advance JavaScript table plugin or library

Tan Papercraft Art DIY YouTube Thumbnail (16).png

Grid.js is a free and open-source advanced javascript table plugin or library which works with most of popular Javascript web application frontend development frameworks such as React, Vue, Angular, Vanilla, etc.

Grid.js can be used to easily create very responsive and modern javascript-enabled tables as it is been supported by all web browsers, MIT licensed, works on all frontend web development frameworks, is very fast, and requires or consumes a very small and negligible space in the disk. It was developed to address or solve multiple problems rating to the creation and implementation of javascript table at a time and easily. It has no vendor lock-in, which means it can also be used without web frameworks like React, Vue, Angular, etc.

I would be explaining how to install and use Grid.js of web applications using web frontend frameworks like React, Vue, Angular, etc and also web applications without web frontend frameworks.

INSTALLATION OF GRID.JS

Installation of Grid.js can be done on web frontend frameworks using npm package installer using the code below which would install all dependencies:

npm install gridjs --save

Then include the js and css by importing the following code:

import { Grid } from "gridjs";
import "gridjs/dist/theme/mermaid.css";

Also, the zip file for Grid.js containing of dependency files can be download via this link then carefully link up the files in the zip folder downloaded into web projects.

Installation of Grid.js can also be done using CDN by linking both the Js and CSS using the following code:

<script type="module">
    import {
        Grid,
        html
    } from "https://unpkg.com/gridjs?module";
</script>


<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>


USAGE

After successfully installing Grid.js using any of the above methods, Grid.js can now be used.

To use Grid.js on web application without web frontend frameworks, below is the format to follow:

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

The above code includes the CDN links of both the Js and CSS. If you should observe their is an index.js file added below the javascript CDN link, which means that and additional index.js has to be created manually then add the following code to it in other to initialize Grid.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"));

The above javascript code containing table data would autmatically generate a responsive javascript enabled table on the HTML webpage.

To use Grid.js with web frontend framework such as React, the following code is used:

import Grid.js using

import { Grid } from "gridjs";
import "gridjs/dist/theme/mermaid.css";

then use the following code to implement Grid.js

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} />;
}

Other table functionality can then be added such as search bars that asynchronously search through table data using javascript, table sorting, table pagnation, table styling, etc. An instance is given below:

new Grid({
  // ...
  language: {
    'search': {
      'placeholder': '🔍 Search...'
    },
    'pagination': {
      'previous': '⬅️',
      'next': '➡️',
      'showing': '😃 Displaying',
      'results': () => 'Records'
    }
  }
});

After following the above explained procedure and still finding issue using Grid.js, kindly feel free to drop your issue as comment as I would gladly attend to them. Also, I would be dropping another post which would be a detailed explaination with practical implementation of Grid.js soon, so stay tuned.

You can also refer to the offical documentation of Grid.js via this link.

Thanks for reading, don't forget to like, comment, and share.

programming development ocd ocdb software javascript palnet neoxian creativecoin proofofbrain
0
0
0.000
3 comments

You may need to chill with the way you cross post. It’s best you make a decision of which community you truly want to publish before posting. Often Multiple cross posting makes one look desperate.

0
0
0.000
Reply