Expand Wide HTML Table To Fullscreen - jQuery largetable

File Size: 6.35 KB
Views Total: 2659
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Expand Wide HTML Table To Fullscreen - jQuery largetable

largetable is a small jQuery plugin to prevent wide tables from breaking through its parent container.

The plugin adds an horizontal scrollbar to the bottom as well as a scroll shadow to the right side of the wide HTML table.

It also generates a expand button that enables the user to maximize the HTML table for better readability. To close the maximized table, click to the collapse button or press the ESC key.

How to use it:

1. Load the stylesheet largetable.css and JavaScript largetable.js in the HTML file.

<link rel="stylesheet" href="largetable.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="largetable.js"></script>

2. Call the function to the HTML table and enable the Maximize functionality.

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
$(function(){
  $("table").largetable({
    enableMaximize: true
  })
});

3. Trigger an event when toggling the fullscreen mode.

$("table").largetable({
  enableMaximize: true
}).on("toggleMaximize", function() {
  console.log("toggleMaximize event");
})

4. Trigger an event when maximized.

$("table").largetable({
  enableMaximize: true
}).on("maximize", function () {
  console.log("maximize event");
})

5. Trigger an event when unmaximized.

$("table").largetable({
  enableMaximize: true
}).on("unmaximize", function () {
  console.log("unmaximize event");
});

Changelog:

v1.0.2 (2023-03-02)

  • Fix largetable broken when undefined options

This awesome jQuery plugin is developed by edinum. For more Advanced Usages, please check the demo page or visit the official website.