Collapse Overflowing Table Columns Into A Dropdown – Podtablejs

Category: Javascript , Table | November 25, 2021
Author:inlogicstudio
Views Total:13 views
Official Page:Go to website
Last Update:November 25, 2021
License:MIT

Preview:

Collapse Overflowing Table Columns Into A Dropdown – Podtablejs

Description:

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
$ 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%">
  <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 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) {
            el.style.display = 'block'
        } else {
            el.style.display = 'none'
        }
      }
  });
})

Changelog:

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