   allowing a simple yet powerful table component.
* 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
``bash`
npm i -S lkt-table
js
import LktTable from 'lkt-table';
app.use(LktTable);
`In your component:
`html
`
`js
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'},
]
}
}
}
`
$3
`html
{{item.name}}
`Usage of
createColumn:
`js
const column = createColumn({
key: '', // Element property
label: '', // Column text,
sortable: true,
hidden: false,
formatter: undefined,
emptyChecker: undefined,
colspan: undefined
})
`Props
$3
Type: Array
Required: true
Default: []Input data array to display.
`html
`$3
Type: Array
Required: true
Default: []Columns configuration (data to be shown, order, ...)
`html
`$3
Type: Function
Required: false
Default: undefinedSorting function which will be triggered each time a th is clicked (if column is sortable)
`html
`
`js
export default {
methods: {
sorter(datum1, datum2, column, sortDirection) {
return 1;
}
},
...
}
`
$3
Type: Boolean
Required: false
Default: falseEnables drag and drop
`html
`$3
Type: Boolean
Required: false
Default: falseEnables automatic hide empty columns
`html
`$3
Type: Function
Required: false
Default: (evt) => trueA function to determine if an item can be dragged
`html
`$3
Type: Function
Required: false
Default: (evt) => trueA function to determine if an item can be dropped in a certain position
`html
`
$3
* LktTable emits these events:
-
update:modelValue (for value v-model)
- sort (same as input, but after sorting)HTML:
`HTML
`$3
#### 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`html
{{value}}, {{item.surname}}
`` :icon="Settings.defaultSaveIcon"
:disabled="!ableToSave"
:confirm-modal="saveConfirm"
:confirm-data="confirmData"
:resource="saveResource"
:resource-data="computedSaveResourceData"
:split="splitSave"
:tooltip-engine="saveTooltipEngine"