Press "Enter" to skip to content

A Lightweight Responsive Collapse Overflowing Table Columns Library | Podtablejs

Podtable is a non-dependency table library to fit a large set of table data into smaller device screens with various options to achieve a responsive spreadsheet.

expandcollapse table column javascript, html table expandcollapse rows example, expandable and collapsible html tables, collapsible panel inside table

How to make use of it:

1. Install and import the Podtablejs as an ES module.

# NPM
$ npm i podtable --save
import { Podtable } from ‘podtable’;

2. Or download the package deal and embody the podtable.js on the web page.

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

3. Add empty th and td to your HTML table.

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

4. Initialize the Podtablejs on the HTML table and accomplished.

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

5. Specify an array of columns to protect, which signifies that the cells within the following columns won’t ever be hidden.

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

6. Emit an occasion for cells that shall be hidden if you wish to carry out a motion for some cells outlined within the precedence possibility.

window.addEventListener('DOMContentLoaded', () => {
  new Podtable.Podtable('#table',{
      event: true,
      priority: [2,4,5],
      method: (event) => {
        let el = document.querySelector('#demo');
        
        if (event.current <= 5 && event.isCurrentShown === false) {
            el.style.display = 'block'
        } else {
            el.style.display = 'none'
        }
      }
  });
})

Collapse Overflowing Table Columns Into A Dropdown, Podtablejs Plugin/Github, jquery expandcollapse table rows example, html collapsible table without javascript


See Demo And Download

Official Website(inlogicstudio): Click Here

This superior jQuery/javascript plugin is developed by inlogicstudio. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.