Collapse Overflowing Table Columns Into A Dropdown – Podtablejs

Preview:

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. Determine whether to use the row group feature. You can ignore specific rows using the data-ptr-ignore attribute:

<table id="table" class="table" width="100%">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr data-ptr-ignore="">
      <td colspan="3"></td>
    </tr>
    <tr>
      <td>Mark</td>
      <td>Spencer</td>
      <td></td>
    </tr>
  </tbody>
</table>

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

7. 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'
        }
      }
  });
})

8. Destroy the instance.

podtable.destroy()

Changelog:

v1.1.9 (10/12/2022)

• fixed control toggle from showing in the footer

v1.1.8 (05/26/2022)

• Added a new destroy() method for podtable instance which reverts any alteration made to the target table in the DOM

v1.1.7 (02/12/2022)

• Added Row grouping
• Added Row ignore in which cells of such row wont be hidden using data attributes

v1.1.6 (02/12/2022)

• Fix method config option is not a function error and minor optimization
• updated var names

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