Home
Table
Scrolling Table Component For Vue.js

Scrolling Table Component For Vue.js

richardtallent Last Updated: 7 months ago

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:

Scrolling Table Component For Vue.js

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

Related Posts

Add Comment