vue-flexible-table

A flexible Vue 3 table component.

The 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 its 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

Register the component globally as a plugin in your project's main.js. The package ships an idiomatic Vue 3 plugin via its .install method, so use it with app.use:

import { createApp } from "vue"
import App from "./App.vue"
import FlexibleTable from "vue-flexible-table"
import "vue-flexible-table/dist/style.css"

const app = createApp(App)
app.use(FlexibleTable)
app.mount("#app")

Or register the component locally in a single-file component using the Options API:

import FlexibleTable from "vue-flexible-table"
import "vue-flexible-table/dist/style.css"

export default {
  name: "MyComponent",
  components: { FlexibleTable },
}

A minimal example using <script setup> and the fields/items props:

<script setup>
import FlexibleTable from "vue-flexible-table"
import "vue-flexible-table/dist/style.css"

const fields = [
  { key: "c1", label: "Column 1", sortable: true, minWidth: "200px" },
  { key: "c2", label: "Column 2", minWidth: "200px" },
]
const items = [{ c1: "Hello", c2: "World" }]
</script>

<template>
  <flexible-table :fields="fields" :items="items" />
</template>

The layout can be configured with CSS classes and the following CSS variables:

• --flexible-table-line line below header and end of table (default: 1px solid rgba(0,0,0,0.4))
• --flexible-table-section-line line below and above optional slocts BEFORE_SECTION (default: 1px dotted rgba(0,0,0,0.1)`)
• --flexible-table-hover color of hovered row (default: rgba(0,0,0,0.1))

For more usage examples, including custom sections via named slots, please refer to the examples.

Development

Development requires Node.js 26 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

Please stick to a common coding style:

npm run lint    # check coding style
npm run fix     # fix style

Tests are run with Vitest.

# Run unit tests
npm test
# build examples and serve them for testing
npm run app

The examples app is also deployed at https://gbv.github.io/vue-flexible-table/ from main and at https://gbv.github.io/vue-flexible-table/dev/ from dev branch.

Maintainers

@nichtich

Contribute

PRs accepted. Feel free to open an issue to ask questions or report problems.

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

License

MIT ©2018- Verbundzentrale des GBV (VZG)