A Vue component to create tables with vertical and horizontal scrolling. Based on CSS flexbox.
How to use it:
1. Import and register the component.
import VueScrollingTable from "vue-scrolling-table" // stylesheet import "/node_modules/vue-scrolling-table/dist/style.css" createApp(App) .component(VueScrollingTable.name, VueScrollingTable) .mount("#app")
2. Add the vue-scrolling-table component to your template.
<vue-scrolling-table> <template #thead> <tr> <th v-for="col in columns" :class="col.cssClasses" :key="col.id">{{ col.title }}</th> </tr> </template> <template #tbody> <tr v-for="item in items" :key="item.id"> <td v-for="col in columns" :class="col.cssClasses" :key="col.id">{{ item[col.id] }}</td> </tr> </template> </vue-scrolling-table>
3. Available component props.
deadAreaColor: { type: String, required: false, default: "#CCC" }, includeFooter: { type: Boolean, required: false, default: false }, syncHeaderScroll: { type: Boolean, required: false, default: true }, syncFooterScroll: { type: Boolean, required: false, default: true }, scrollHorizontal: { type: Boolean, required: false, default: true }, scrollVertical: { type: Boolean, required: false, default: true },
Preview:
Changelog:
v2.0.0 (03/13/2022)
- Simplify implementation (requires Vue 3.2). Border/BG styles easier to override.
v1.0.3 (02/06/2021)
- update
02/03/2021
- Migration to vue3/vite/ts
Download Details:
Author: richardtallent
Live Demo: https://tallent.us/vue-scrolling-table/
Download Link: https://github.com/richardtallent/vue-scrolling-table/archive/master.zip
Official Website: https://github.com/richardtallent/vue-scrolling-table
Install & Download:
# NPM
$ npm install vue-scrolling-table--save