vue-flexible-table

A flexible table component for Vue.js 2.

This motivation to create this table component was to have a table that

• takes up all space that it has available,
• scrolls when available space is not enough,
• resizes it's columns dynamically,
• has a fixed head when the body is overflowing vertically,
• synchronizes body and head when scrolling horizontally,
• has custom sorting,
• is used somewhat compatible with bootstrap-vue's table.

An example of vue-flexible-table in use can be found here (the table in the middle section). For the source of that example, see here.

Table of Contents

• Install
• Usage
• Development
• Maintainers
• Contribute
• License

Install

npm install vue-flexible-table

Usage

To include the FlexibleTable component globally, add this to your project's main.js:

import FlexibleTable from "vue-flexible-table"
Vue.use(FlexibleTable)

You can also add it to specific components only:

import FlexibleTable from "vue-flexible-table"
export default {
  // ...
  components: { FlexibleTable },
  // ...
}

Both of these methods use the SFC (single-file component) directly, without a build. If you prefer the built version, import it like this:

import FlexibleTable from "vue-flexible-table/style"
import FlexibleTable from "vue-flexible-table/build"
Vue.use(FlexibleTable) // or add to component

For usage examples, please refer to the examples here: https://github.com/gbv/vue-flexible-table/tree/master/src/examples

Development

Development requires Node.js 18 or later.

# Clone repo
git clone https://github.com/gbv/vue-flexible-table.git
# Install dependencies
npm ci
# Start Vite dev server
npm run dev
# Build library
npm run build

Maintainers

@stefandesu

Contribute

PRs accepted.

Small note: If editing the README, please conform to the standard-readme specification.

License

MIT ©2018 Verbundzentrale des GBV (VZG)