DEV Community

loading...
Cover image for Create next-gen HTML tables with Grid.js. 😎
daily.dev

Create next-gen HTML tables with Grid.js. 😎

vaibhavkhulbe profile image Vaibhav Khulbe Originally published at daily.dev ・6 min read

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

Ready for some next-gen stuff?

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

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.

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

BOOM! Onto next...

Step 3️⃣: Code the table

Instantiate the gridjs object in your JS file as:

new gridjs.Grid({})

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

  • data: where we define the rows and columns of the table. In this demo, let's choose a sample data from 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.
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: these are optional and are defined as string[] types. Therefore, we add columns: ["Name", "Email", "Phone Number","Gender"].

  • Promise to resolve data asynchronously: 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:

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 and sorting capability is fairly easy. Just set the Boolean value to the following two configs to true:

search: true,
sort: true

If the data is large, we definitely need some pagination. For that, Grid.js provides us with the 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!

pagination: {
    limit: 3
},

To further control the default height of your table, set the 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 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:

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 config. To make any changes to your table, simply add the respective custom class name as a String like:

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:


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:

GitHub logo grid-js / gridjs

Advanced table plugin


Thanks for reading, I appreciate it! Have a good day. (βœΏβ—•β€Ώβ—•βœΏ)


πŸ“« Subscribe to my weekly developer newsletter πŸ“«


Daily 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

Discussion

pic
Editor guide
Collapse
Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Yes! Looks nice 😎

Collapse
abdurrkhalid333 profile image
Abdur Rehman Khalid

That looks a lot of help for Angular Developers Like Me, I will surly looking forward to using this in my current ongoing projects as well.

Thank you very much for writing such a helpful post.

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

For sure! And thanks for reading. 😁

Collapse
devtony101 profile image
Miguel Manjarres

This sure will be helpful for future projects. Nice explanation.

Collapse
vaibhavkhulbe profile image
Collapse
juanfrank77 profile image
Juan F Gonzalez

Noice

That's like the Angular Material table but better!

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Ah, didn't knew about that. Thanks for sharing!