Responsive data table with podtablejs

Afuwape sunday — Wed, 25 Aug 2021 23:45:03 +0000

This post is about creating responsive datatable but before we proceed with the march ui designers and developers have evolve with ideas on creating a responsive table some of which are:

horizontal overflow on mobile
Hiding some cells on mobile and more

The above listed approach are some of the approach designers have evolve with in making tables responsive below i will show you the podtable approach.

Enough of the talk lets head down to the coding aspect but wait what approach are we going to use to make the table responsive? i will explain that below.

How are we going to do it?

We are going to make use of a plain javascript table library to make the table responsive but before we proceed with code lets look at the result.

Lets begin With it

If you want to get started quick check the github page here
https://github.com/inlogicstudio/podtable and don't forget star the repo or continue reading we begin by installing the library from npm i believe you know about npm; of course you should.

npm i podtable

After installing the package then we need to pull it in our page to use it. by including the css in the head and the javascript at the end of the body tag both of them are important.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, 
      <link rel="stylesheet" href="podtable/dist/podtable.css">
  </head>                          
  <body>

    <script src="podtable/dist/podtable.js"></script>
  </body>
</html>

Next we proceed with the table markup which needs to be structured well and it will include some few spices to make it look good.

A data-grid-colname attributes which value will be the name of the column
An empty th, td for head and body element which will serve as control column

<table id="table" class="table" width="100%">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
               ...
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-grid-colname="Firstname">Mark</td>
            <td data-grid-colname="Lastname">Spencer</td>
               ...
            <td></td>
        </tr>
    </tbody>
</table>

First dont forget to style your table so as to make it look sweet but if you notice the html mark up we have a data-grid-colname attribute this will be use in the child row as the child item name also we have an empty th and td like i said earlier this will be the control toggle for the the row next we write the js that handles the magic for us

window.addEventListener('DOMContentLoaded', () => {
    new Podtable.Podtable('#table');
})

The above code will instantiate the table library and what does the podtable library do open your browser and reload your page and reduce the size of your browser gradually and watch podtable hide cells from the right when there are no more room to show it there are more option that can be passed to the podtable instance let see that below

window.addEventListener('DOMContentLoaded', () => {
    new Podtable.Podtable('#table'{
      keepCell: [1, 6]
    });
})

The keepCell option what does it do ? just like the name suggest its an array to specify the index of cells not to hide with the above code the second cell and the seventh cell wont be hidden you might be wondering why did i say second and and seventh cell and 1 & 6 is up in the code don't forget in programming the counting starts from 0.

alright thats it here is the github link to read more
https://github.com/inlogicstudio/podtable

DEV Community: Afuwape sunday

Responsive data table with podtablejs

How are we going to do it?

Lets begin With it