   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
:
`js
const column = createColumn({
key: '', // Element property
label: '', // Column text,
sortable: true,
hidden: false,
formatter: undefined,
emptyChecker: undefined,
colspan: undefined
})
`Props
$3
Type:
Required:
Default: Input data array to display.
html
`$3
Type:
Required:
Default: Columns configuration (data to be shown, order, ...)
html
`$3
Type:
Required:
Default: Sorting 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:
Required:
Default: Enables drag and drop
html
`$3
Type:
Required:
Default: Enables automatic hide empty columns
html
`$3
Type:
Required:
Default: A function to determine if an item can be dragged
html
`$3
Type:
Required:
Default: A function to determine if an item can be dropped in a certain position
html
`
$3
* LktTable emits these events:
-
(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
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"