Scrolling Table Component For Vue.js

Install & Download:

# NPM
$ npm install vue-scrolling-table--save

Description:

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 
},