Author: | gauthierblanpain |
---|---|
Views Total: | 252 views |
Official Page: | Go to website |
Last Update: | March 19, 2022 |
License: | MIT |
Preview:

Description:
A tiny JavaScript responsive table library that adds a scrollbar under the table when the content overflows its container and applies inset shadows to both sides that tell the visitor there are more table columns to scroll.
See Also:
How to use it:
1. Load the stylesheet table-scroll-shadow.min.css and JavaScript table-scroll-shadow.min.js in the document.
<link rel="stylesheet" href="dist/table-scroll-shadow.min.css" /> <script src="dist/table-scroll-shadow.min.js"></script>
2. Wrap your HTML table into a DIV container with the CSS class of ‘table-scroll’.
<div class="table-wrapper"> <div class="table-scroll"> <table> ... </table> </div> </div>
3. Initialize the library and set the shadow color & size.
const table = new TableScrollShadow({ shadowColor: 'rgba(0, 0, 0, 0.25)', size: '2em', }) table.init()
4. Override the default throttle delay. Default: 75.
const table = new TableScrollShadow({ shadowColor: 'rgba(0, 0, 0, 0.25)', size: '2em', throttleDelay: 80, })
5. Override the default CSS selectors.
const table = new TableScrollShadow({ shadowColor: 'rgba(0, 0, 0, 0.25)', size: '2em', wrapperClass: '.table-wrapper', scrollAreaClass: '.table-scroll', })