jQuery Plugin to Scroll In/Maximize Large Tables | largetable

How to make use of it:

1. Load the stylesheet largetable.css and JavaScript largetable.js within 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 performance to the HTML table and allow the Maximize performance.

<table>
  <tr>
    <th>Col 1</th>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <th>Col 2</th>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <th>Col 3</th>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <th>Col 4</th>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <th>Col 5</th>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <th>Col 6</th>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr>
    <th>Col 7</th>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
</table>

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");
});

Expand Wide HTML Table To Fullscreen, largetable Plugin/Github

See Demo And Download