Create next-gen HTML tables with Grid.js. 😎
Tags: javascript, tutorial, html, webdev
Published: 2020-08-28 13:10:32

In this tutorial, you'll learn how to create a powerful table with the help of a fairly new library in the JavaScript ecosystem - **[Grid.js](https://gridjs.io/)**. The best part? It's seriously easy to integrate, powerful enough to fetch data asynchronously, and can be styled to whatever the way you want! Next-gen stuff, right?

---
![Next gen GIF](https://media.giphy.com/media/1ymqeu5kuVO2SSSUeZ/giphy.gif)
<figcaption>Ready for some next-gen stuff?</figcaption>
---

## Why choose Grid.js? 🤨

What makes it better than others is the fact that it is:

1. **Ridiculously easy to start with!**
I mean, I made the following demo in a matter of a few minutes. It already comes with some really useful tools which can be easily plugged-in to an existing app. So, you don't need to worry about actually _learn_ another new library.

2. **Use it with or without any framework:**
It has only one external dependency already baked in. Hence, you don't have to worry about managing dependencies if you don't use a package manager like NPM. Use it with Angular, React, Vue, or with just vanilla JS!

3. **React Native support (UPCOMING):**
It is designed to be independent of the web browser context, and the library developer has stated that support for RN is coming!

4. **Fast!**
Grid.js has an internal pipeline that takes care of caching and processing data. This helps in loading, searching, sorting, or displaying the data really quickly.

5. **Powerful CSS integration:**
You can style your tables whichever way you want. It doesn't matter if you're using plain old CSS in a separate stylesheet or _inside JS_ 😏.

---

## What will we make using Grid.js? 😀

This:

![Grid.js Demo](https://dev-to-uploads.s3.amazonaws.com/i/l2jdp2itl5l1cyn7jfs7.gif)


As you see, we'll cover the following features:

- Adding the "Loading..." state.
- Displaying the data.
- Sorting each or multiple rows.
- Searching the contents. 
- Adding pagination.
- Using custom CSS styles.
- Adding internalization.

---

## Let's make this powerful table in a matter of minutes! ⚡

#### Step 1️⃣: Grab the CDN 
For this demo, we'll be installing Grid.js using the quick _grab-the-cdn-and-go!_ method. Also, this is a vanilla JS project where we'll be using this library.

Add the following in your _index.html_ file:

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

This includes Grid.js styles. For the JS, import the library with:

`<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js">`

 
#### Step 2️⃣: Give it a structure and initial style
Start with the HTML. It's just 22 characters! (yes, I did count that number 🥴) as we're only displaying a `div` where our table will be placed.

```html
<div id="table"></div>
```

BOOM! Onto next...

#### Step 3️⃣: Code the table
Instantiate the `gridjs` object in your JS file as:

```js
new gridjs.Grid({})
```

This `gridjs` object holds all the configurations related to what we need in our table:

- **[`data`](https://gridjs.io/docs/config/data)**: where we define the rows and columns of the table. In this demo, let's choose a sample data from [mockaroo.com](https://www.mockaroo.com/). But before we add the data, we need to tell Grid.js on which HTML element we need this data to display. Hence, we use `render()` method where we select the `table` element using the conventional `document.getElementById()` call.

```js
new gridjs.Grid({}).render(document.getElementById("table"));
```

Grid.js stores the data in the form of both `[key: string]` pairs as well as in usual array form `[string, string]`. Here we're using the latter approach. Just add the sample data as a string here. For us to explicitly define the title of columns, just add the next config...

- **[`columns`](https://gridjs.io/docs/config/columns/)**: these are optional and are defined as `string[]` types. Therefore, we add `columns: ["Name", "Email", "Phone Number","Gender"]`. 

- **`Promise` to [resolve data asynchronously](https://gridjs.io/docs/examples/import-async/)**: this is useful for any external HTTP calls and loading data from a server. Also, if you add a `setTimeout()` function inside this async call, you will get the desired shimmer (loading...) effect, as seen in the demo. Here, I went for a 2-second delay so as to mock data fetching.

Now, our `data()` config becomes:

```js
data: () => {
    return new Promise(resolve => {
      setTimeout(() =>
        resolve([
          ["Dirk", "dborkett0@com.com", "(646) 3432270", "Male"],
          ["Maryl", "mchampkins1@dailymail.co.uk", "(980) 3335235", "Female"],
          ["Stefan", "sbrawson2@smh.com.au", "(180) 3533257", "Male"],
          ["Stephanie", "scouronne4@storify.com", "(904) 5358792", "Female"],
          ["Emeline", "esooley5@cyberchimps.com", "(308) 6561908", "Female"],
	      ["Gavra", "gkrout9@foxnews.com", "(383) 4909639", "Female"],
	      ["Roxi", "rvillage1@businessweek.com", "(980) 3335235", "Male"],
	      ["Jamey", "jsheringham0@rakuten.co.jp", "(773) 5233571", "Male"],
	      ["Maye", "mambrosoni8@prweb.com", "(895) 9997017", "Female"]
        ]), 2000);
    });
  }
```
You should now have this data displayed on your webpage on a beautiful table. Time to add the rest of the features now!

Adding the [searching](https://gridjs.io/docs/examples/search/) and [sorting](https://gridjs.io/docs/config/sort/) capability is fairly easy. Just set the Boolean value to the following two configs to `true`:

```js
search: true,
sort: true
```

If the data is large, we definitely need some pagination. For that, Grid.js provides us with the [`pagination`](https://gridjs.io/docs/config/pagination/) object where we can set the `limit` of how many data rows to display at once. The cool thing is it automatically add the pagination controls for us!

```js
pagination: {
    limit: 3
},
```
To further control the default height of your table, set the  [`height`](https://gridjs.io/docs/config/height/) config to the value in pixels. Ex: `height: '200px'`

All the messages you see on the table like the search placeholder with emojis, "Displaying 1 to 3 of 9 Records," etc., are possible due to the language support of the library. It provides us with the [`language`](https://gridjs.io/docs/config/language/) config where we can pass on which text data to change where.

Hence, if you want to change the placeholder text of the `'search'` box, simply add it as a String object to `language` and the same for the `'pagination'`. Here's our `language` object now:

```js
language: {
    'search': {
      'placeholder': '🔍 Search name, email...'
    },
    'pagination': {
      'previous': '⬅️',
      'next': '➡️',
      'showing': '👓 Displaying',
      'results': () => 'Records'
    }
  }
```

Finally, if you like to add some custom CSS classes, we have the [`className`](https://gridjs.io/docs/config/className/) config. To make any changes to your `table`, simply add the respective custom class name as a String like:

```js
className: {
    table: 'table-body'
}
```
Now, in your CSS file, define the newly created `table-body` class with the styles you need to add.

It's done! 🥳

If you're stuck somewhere in the code or just want to see the output, I've embedded the Pen below:

{% codepen https://codepen.io/kvaibhav01/pen/poyeeeB default-tab=result %}

---

## Where to next? 🤔

You've just scratched the surface of Grid.js. It's a relatively new library out there. You can now move ahead by trying out the following things:

- Integrate it with your existing [React](https://gridjs.io/docs/integrations/react/), [Vue](https://gridjs.io/docs/integrations/vue) or (if you're still using it in 2020 🙃) [jQuery](https://gridjs.io/docs/integrations/jquery).

- [Study](https://gridjs.io/docs/plugin/basics) or [write](https://gridjs.io/docs/plugin/writing-plugin) a new plugin.

- Import [server-side data](https://gridjs.io/docs/examples/server), add [CSS-in-JS support](https://gridjs.io/docs/examples/css-in-js) and [learn more](https://gridjs.io/)!

- Finally, support the developer and make contributions to its repository!

{% github grid-js/gridjs no-readme %}

---

_Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)_

---
<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/codeFlaw?src=hash&amp;ref_src=twsrc%5Etfw">#codeFlaw</a> <a href="https://twitter.com/hashtag/developer?src=hash&amp;ref_src=twsrc%5Etfw">#developer</a> <a href="https://twitter.com/hashtag/machinLearning?src=hash&amp;ref_src=twsrc%5Etfw">#machinLearning</a> <a href="https://twitter.com/hashtag/programming?src=hash&amp;ref_src=twsrc%5Etfw">#programming</a> RT <a href="https://twitter.com/msdevUK?ref_src=twsrc%5Etfw">@msdevUK</a>: &quot;Does it work?&quot;<br><br>&quot;Yes but-&quot;<br><br>&quot;Ship it!&quot;<br><br>Image source: <a href="https://t.co/Y0r8DZDEBK">https://t.co/Y0r8DZDEBK</a><a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/Developer?src=hash&amp;ref_src=twsrc%5Etfw">#Developer</a> <a href="https://t.co/PRCmIeLsCo">pic.twitter.com/PRCmIeLsCo</a></p>&mdash; CodeFlaw (@CodeFlawCo) <a href="https://twitter.com/CodeFlawCo/status/1245766183334313990?ref_src=twsrc%5Etfw">April 2, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

<hr/>
_[Daily](https://r.daily.dev/get?r=devto) delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future._
[![Daily Poster](https://dev-to-uploads.s3.amazonaws.com/i/b996k4sm4efhietrzups.png)](https://r.daily.dev/get?r=devto)