LKT Table

Vue component (Vue.js 3.0) allowing a simple yet powerful table component.

Features

• Custom slots per column
• Hide columns by config
• Automatically hide empty columns
• Full support of Sortable.js features:
  • Supports touch devices
  • Supports drag handles and selectable text
  • Smart auto-scrolling
  • No jQuery dependency
• Keeps in sync HTML and view model list

Installation

With npm

npm i -S lkt-table

Typical use:

In your main.js

import LktTable from 'lkt-table';
  
app.use(LktTable);

In your component:

<lkt-table v-model="myArray" v-bind:columns="columns"></lkt-table>

import {createColumn} from 'lkt-table';


export default {
    data() {
        return {
            columns: [
                createColumn({key: 'name', label: 'Name'}),
                createColumn({key: 'surname', label: 'Surname', sortable: false}),
            ],
            items: [
                {name: 'a', surname: 'n'},
                {name: 'b', surname: 'n1'},
            ]
        }
    }
}

With custom column slots:

<lkt-table v-model:value="myArray" v-bind:columns="columns">
    <template v-slot:name="{item}">{{item.name}}</template
</lkt-table>

Usage of createColumn:

const column = createColumn({
  key: '', // Element property
  label: '', // Column text,
  sortable: true,
  hidden: false,
  formatter: undefined,
  emptyChecker: undefined,
  colspan: undefined
})

Props

value

Type: Array Required: true Default: []

Input data array to display.

<lkt-table v-model:value="myArray"></lkt-table>

columns

Type: Array Required: true Default: []

Columns configuration (data to be shown, order, ...)

<lkt-table v-bind:columns="columns"></lkt-table>

sorter

Type: Function Required: false Default: undefined

Sorting function which will be triggered each time a th is clicked (if column is sortable)

<lkt-table v-bind:sorter="sorter"></lkt-table>

export default {
    methods: {
        sorter(datum1, datum2, column, sortDirection) {
            return 1;
        }
    },
    ...
}

sortable

Type: Boolean Required: false Default: false

Enables drag and drop

<lkt-table v-bind:sortable="true"></lkt-table>

hideEmptyColumns

Type: Boolean Required: false Default: false

Enables automatic hide empty columns

<lkt-table v-bind:hide-empty-columns="true"></lkt-table>

draggableChecker

Type: Function Required: false Default: (evt) => true

A function to determine if an item can be dragged

<lkt-table v-bind:draggable-checker="fn"></lkt-table>

checkValidDrag

Type: Function Required: false Default: (evt) => true

A function to determine if an item can be dropped in a certain position

<lkt-table v-bind:check-valid-drag="fn"></lkt-table>

Events

• LktTable emits these events:

  • update:modelValue (for value v-model)
  • sort (same as input, but after sorting)

HTML:

<lkt-table v-on:sort="doSomething"></lkt-table>

Slots

custom column slot

LktTable generates one slot per column, so you can always control how a column will be shown.

The custom column slot will be named with the column key.

Slot props:

• value the element value for that column
• item the element itself
• column the column config
• i the row index

<lkt-table v-model:value="myArray" v-bind:columns="columns">
    <template v-slot:name="{item, value}">
        <div>{{value}}, {{item.surname}}</div>
    </template
</lkt-table>