Collapse Overflowing Table Columns Into A Dropdown – Podtablejs

Category: Javascript , Table | January 15, 2022
Views Total:21 views
Official Page:Go to website
Last Update:January 15, 2022


Collapse Overflowing Table Columns Into A Dropdown – Podtablejs


Podtablejs is a brand new responsive table solution that automatically collapses overflowing table columns into a dropdown when there is no enough space.

How to use it:

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

$ npm i podtable --save

import { Podtable } from ‘podtable’;

2. Or download the package and include the podtable.js on the page.

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

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

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

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

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

5. Specify an array of columns to preserve, which means that the cells in the following columns will never be hidden.

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

6. Emit an event for cells that will be hidden if you want to perform an action for some cells defined in the priority option.

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) {
   = 'block'
        } else {
   = 'none'


v1.1.5 (01/15/2022)

  • Removed use for event config option and minor optimization

v1.1.4 (09/27/2021)

  • podtable now reacts to element resize event not window resize events
  • podtable can now be instantiated with an element or a selector

v1.1.3 (09/27/2021)

  • Remove use for data set in setting column name for child rows and also fix for null selector in SPAs

v1.1.2 (09/12/2021)

  • Fix control toggle toggling empty child rows when no cells is hidden

v1.1.1 (09/06/2021)

  • Added health check for table

v1.1.0 (09/04/2021)

  • added a new config priority option

You Might Be Interested In:

Leave a Reply