Just a responsive table plugin
npm install @schascha/utable
> Just a responsive table plugin
https://schascha.github.io/utable/
``sh`
npm install @schascha/utable
`js
import { UTable } from '@schascha/utable';
const table = new UTable('table', {
// Options
});
`
| Option | Type | Default | Description |
| -------------------- | -------- | -------------- | --------------------------------------- |
| buttons | boolean | true | Enable or disable buttons |overlays
| | boolean | true | Enable or disable overlays |sticky
| | boolean | true | Enable or disable sticky observer |width
| | string | auto | Width of the table, auto or fixed |classBody
| | string | tbody | Class name for body element |classButtonLeft
| | string | button-left | Class name for left button |classButtonRight
| | string | button-right | Class name for right button |classHead
| | string | thead | Class name for head element |classOverlayLeft
| | string | scroll-left | Class name for left overlay |classOverlayRight
| | string | scroll-right | Class name for right overlay |classScroller
| | string | scroller | Class name for scroller |classSticky
| | string | is-sticky | Class name if table header is sticky |classTop
| | string | top | Class name for top element |classWrapper
| | string | utable | Class name for wrapper element |textButtonLeft
| | string | Left | Text for left button |textButtonRight
| | string | Right | Text for right button |titleButtonLeft
| | string | Scroll left | Title for left button |titleButtonRight
| | string | Scroll right | Title for right button |onClickButtonLeft
| | function | - | Callback function on left button click |onClickButtonRight
| | function | - | Callback function on right button click |onScroll
| | function | - | Callback function on scroll |onScrollend
| | function | - | Callback function on scroll end |onUpdate` | function | - | Callback function on update |
|
The table is highly customizable and does not force you to embed styles. However, it is recommended to apply at least some base styles to ensure the table displays correctly. You can rewrite CSS classes or deactivate features, like buttons or overlay, via the module configuration. Just use it as you need it for your layout.
Basic styles and an example table layout can be found here: utable.css
Please let me know: https://github.com/Schascha/utable/issues
Support this project and others via PayPal. Thanks
Copyright (c) 2024 Sascha Künstler