2.0.10 • Published 5 months ago

lkt-table v2.0.10

Weekly downloads
-
License
MIT
Repository
-
Last release
5 months ago

LKT Table

ts js vue node

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>
                :icon="Settings.defaultSaveIcon"
                :disabled="!ableToSave"
                :confirm-modal="saveConfirm"
                :confirm-data="confirmData"
                :resource="saveResource"
                :resource-data="computedSaveResourceData"
                :split="splitSave"
                :tooltip-engine="saveTooltipEngine"
1.4.3

5 months ago

1.4.2

6 months ago

1.4.1

6 months ago

1.4.0

6 months ago

2.0.3

5 months ago

2.0.2

5 months ago

2.0.5

5 months ago

2.0.4

5 months ago

2.0.7

5 months ago

2.0.6

5 months ago

1.3.10

9 months ago

2.0.9

5 months ago

2.0.8

5 months ago

1.3.13

9 months ago

1.3.14

9 months ago

1.3.11

9 months ago

1.3.12

9 months ago

1.3.17

8 months ago

1.3.18

8 months ago

1.3.15

9 months ago

2.0.0

5 months ago

1.3.16

8 months ago

1.3.19

8 months ago

1.3.20

7 months ago

1.3.21

6 months ago

1.3.9

9 months ago

1.3.8

9 months ago

1.3.22

6 months ago

1.3.23

6 months ago

1.3.7

9 months ago

1.3.6

9 months ago

2.0.10

5 months ago

1.3.5

9 months ago

1.3.4

9 months ago

1.3.3

9 months ago

1.3.2

9 months ago

1.3.1

9 months ago

1.3.0

9 months ago

1.2.26

9 months ago

1.2.23

11 months ago

1.2.24

11 months ago

1.2.22

11 months ago

1.2.25

10 months ago

1.2.0

1 year ago

1.2.18

1 year ago

1.2.19

12 months ago

1.2.8

1 year ago

1.2.7

1 year ago

1.2.6

1 year ago

1.2.5

1 year ago

1.2.4

1 year ago

1.2.3

1 year ago

1.2.2

1 year ago

1.1.3

1 year ago

1.2.1

1 year ago

1.1.2

1 year ago

1.2.20

12 months ago

1.2.21

12 months ago

1.2.9

1 year ago

1.2.12

1 year ago

1.2.13

1 year ago

1.2.10

1 year ago

1.2.11

1 year ago

1.2.16

1 year ago

1.2.17

1 year ago

1.2.14

1 year ago

1.2.15

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.19

1 year ago

1.0.20

1 year ago

1.0.18

1 year ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago