lkt-table 1.1.2 → 1.2.0

package/dist/style.css

@@ -1 +1 @@
-.lkt-table{width:var(--table-width);overflow-x:auto;font-family:var(--table-font-family)}.lkt-table>table{width:100%;max-width:100%;border-collapse:separate;border-radius:var(--table-border-radius);border-spacing:0}.lkt-table th,.lkt-table td{vertical-align:middle;text-align:var(--table-text-align);padding:var(--table-row-padding);font-size:var(--table-row-font-size);color:var(--table-row-color)}.lkt-table th{font-family:var(--table-header-font-family);padding:var(--table-header-padding)}.lkt-table thead tr{background-color:var(--table-header-background)}.lkt-table tbody tr{background-color:var(--table-row-background)}.lkt-table tbody tr:nth-child(odd){background-color:var(--table-row-background-odd)}.lkt-table [data-sort=asc]>div,.lkt-table [data-sort=desc]>div{display:inline-block}.lkt-table [data-sort=asc]>div:after,.lkt-table [data-sort=desc]>div:after{font-family:var(--table-sort-icon-font-family);display:inline-block;font-size:var(--table-sort-icon-font-size)}.lkt-table [data-sort=asc]>div:after{content:var(--table-sort-asc-icon-content)}.lkt-table [data-sort=desc]>div:after{content:var(--table-sort-desc-icon-content)}.lkt-table td[data-role=drag-indicator],.lkt-table td[data-role=invalid-drag-indicator]{width:var(--table-drag-indicator-width);height:40px;padding:0!important;position:relative;background:#eee;cursor:pointer}.lkt-table td[data-role=drag-indicator]:before,.lkt-table td[data-role=invalid-drag-indicator]:before{content:"";display:block;background:#eee;width:18px;height:36px;margin:auto}.lkt-table td[data-role=drag-indicator]:after,.lkt-table td[data-role=invalid-drag-indicator]:after{content:"…";color:#000;display:block;position:absolute;top:50%;left:50%;font-weight:700;width:15px;height:7px;transform:rotate(90deg);transform-origin:center center}[data-lkt=empty-table]{border:1px solid #ddd;border-radius:var(--table-border-radius);width:100%;padding:10px;background-color:#f8f7e5;font-family:var(--table-font-family);font-size:13px;color:#444;text-align:var(--table-text-align)}.sortable-chosen{border:var(--table-sortable-chosen-border)}.sortable-chosen.ghost{background:var(--table-sortable-chosen-ghost-background)}
+.lkt-table-page,.lkt-table-page-content-wrapper{display:flex;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table{width:var(--lkt-table-width);overflow-x:auto;font-family:var(--lkt-table-font-family),serif}.lkt-table>table{width:100%;max-width:100%;border-collapse:separate;border-radius:var(--lkt-table-border-radius);border-spacing:0}.lkt-table th,.lkt-table td{vertical-align:middle;text-align:var(--lkt-table-text-align);padding:var(--lkt-table-padding-row);font-size:var(--lkt-table-font-size-row);color:var(--lkt-table-color-row)}.lkt-table th{font-family:var(--lkt-table-font-family-header),serif;padding:var(--lkt-table-padding-header)}.lkt-table thead tr{background-color:var(--lkt-table-bg-header)}.lkt-table tbody tr{background-color:var(--lkt-table-bg-row)}.lkt-table tbody tr:nth-child(odd){background-color:var(--lkt-table-bg-row-odd)}.lkt-table [data-sort=asc]>div,.lkt-table [data-sort=desc]>div{display:inline-block}.lkt-table [data-sort=asc]>div:after,.lkt-table [data-sort=desc]>div:after{font-family:var(--lkt-table-font-family-sort-icon),serif;display:inline-block;font-size:var(--lkt-table-font-size-sort-icon)}.lkt-table [data-sort=asc]>div:after{content:var(--lkt-table-sort-icon-content-asc)}.lkt-table [data-sort=desc]>div:after{content:var(--lkt-table-sort-icon-content-desc)}.lkt-table td[data-role=drag-indicator],.lkt-table td[data-role=invalid-drag-indicator]{width:var(--lkt-table-width-drag);height:40px;padding:0!important;position:relative;background:#eee;cursor:pointer}.lkt-table td[data-role=drag-indicator]:before,.lkt-table td[data-role=invalid-drag-indicator]:before{content:"";display:block;background:#eee;width:18px;height:36px;margin:auto}.lkt-table td[data-role=drag-indicator]:after,.lkt-table td[data-role=invalid-drag-indicator]:after{content:"…";color:#000;display:block;position:absolute;top:50%;left:50%;font-weight:700;width:15px;height:7px;transform:rotate(90deg);transform-origin:center center}[data-lkt=empty-table]{border:1px solid #ddd;border-radius:var(--lkt-table-border-radius);width:100%;padding:10px;background-color:#f8f7e5;font-family:var(--lkt-table-font-family);font-size:13px;color:#444;text-align:var(--lkt-table-text-align)}.sortable-chosen{border:var(--lkt-table-border-sortable-chosen)}.sortable-chosen.ghost{background:var(--lkt-table-bg-sortable-chosen-ghost)}.lkt-table td.lkt-table-nav-cell{padding:0}.lkt-table-nav-container{display:flex;align-items:center;flex-direction:column;justify-content:center}.lkt-table-page-buttons{position:sticky;top:calc(-1 * var(--lkt-table-gap-buttons));display:flex;align-items:center;gap:var(--lkt-table-gap-buttons);transition:all linear .15s;background:transparent;z-index:2}.lkt-table-page-buttons-bottom{justify-content:center}.lkt-table-page-buttons>.switch-edition-mode{margin-left:auto}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "",
   "keywords": [
     "lkt",
@@ -16,12 +16,15 @@
     ".": {
       "import": "./dist/build.js"
     },
-    "./styles": "./dist/style.css"
+    "./styles": "./dist/style.css",
+    "./theme": "./theme/default.css",
+    "./theme/default": "./theme/default.css"
   },
   "types": "./dist/index.d.ts",
   "files": [
     "dist/*",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "theme/**/*.css"
   ],
   "license": "MIT",
   "sideEffects": false,
@@ -43,17 +46,22 @@
     "node": ">=18"
   },
   "dependencies": {
+    "lkt-button": "^1.1.16",
+    "lkt-data-state": "^1.0.10",
     "lkt-events": "^1.0.4",
-    "lkt-field-check": "^1.0.0",
+    "lkt-field-file": "^1.1.1",
     "lkt-field-select": "^1.0.0",
     "lkt-field-switch": "^1.0.0",
     "lkt-field-text": "^1.0.0",
+    "lkt-field-textarea": "^1.1.3",
     "lkt-http-client": "^1.0.19",
+    "lkt-i18n": "^1.0.4",
     "lkt-loader": "^1.0.2",
+    "lkt-paginator": "^1.1.4",
     "lkt-string-tools": "^1.0.3",
     "lkt-ts-interfaces": "^1.0.2",
+    "sortablejs": "^1.15.2",
     "vue": "^3.3",
-    "vue-router": "^4.2.5",
-    "vuedraggable": "^4.1.0"
+    "vue-router": "^4.2.5"
   }
 }

package/src/components/CreateButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {Settings} from "../settings/Settings";
+import {__} from "lkt-i18n";
+
+const emit = defineEmits(['click']);
+
+const props = withDefaults(defineProps<{
+    disabled: boolean
+    text: boolean
+}>(), {
+    disabled: false,
+    text: '',
+});
+
+const hasCreateButtonSlot = computed(() => {
+        return Settings.createButtonSlot !== '';
+    }),
+    createButtonSlot = computed(() => {
+        return Settings.createButtonSlot;
+    }),
+    computedText = computed(() => {
+        if (props.text.startsWith('__:')) {
+            return __(props.text.substring(3));
+        }
+        return props.text;
+    })
+</script>
+
+<template>
+    <lkt-button
+        palette="table-create"
+        :disabled="disabled"
+        @click="emit('click')">
+        <template v-if="hasCreateButtonSlot">
+            <component
+                :is="createButtonSlot"/>
+        </template>
+        <template v-else>
+            <i class=""/> {{computedText}}
+        </template>
+    </lkt-button>
+</template>

package/src/components/DropButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {Settings} from "../settings/Settings";
+import {__} from "lkt-i18n";
+
+const emit = defineEmits(['click']);
+
+const props = withDefaults(defineProps<{
+    disabled: boolean
+    text: boolean
+}>(), {
+    disabled: false,
+    text: '',
+});
+
+const hasButtonSlot = computed(() => {
+        return Settings.dropButtonSlot !== '';
+    }),
+    buttonSlot = computed(() => {
+        return Settings.dropButtonSlot;
+    }),
+    computedText = computed(() => {
+        if (props.text.startsWith('__:')) {
+            return __(props.text.substring(3));
+        }
+        return props.text;
+    })
+</script>
+
+<template>
+    <lkt-button
+        palette="table-delete"
+        :disabled="disabled"
+        @click.prevent.stop="emit('click')">
+        <template v-if="hasButtonSlot">
+            <component
+                :is="buttonSlot"/>
+        </template>
+        <template v-else>
+            <i class=""/> {{computedText}}
+        </template>
+    </lkt-button>
+</template>

package/src/components/LktHiddenRow.vue

@@ -1,26 +1,33 @@
-<script lang="ts">
-export default {name: "LktHiddenRow", inheritAttrs: false}
-</script>
-
 <script lang="ts" setup>
 import {createLktEvent} from "lkt-events";
 import {getColumnDisplayContent} from "../functions/table-functions";
 import {LktTableColumn} from "../instances/LktTableColumn";
 import LktTableCell from "./LktTableCell.vue";
-import {ref, watch, PropType} from "vue";
+import {ref, watch} from "vue";
+import {LktObject} from "lkt-ts-interfaces";
 
 const emit = defineEmits(['update:modelValue', 'click']);
 
-const props = defineProps({
-    isDraggable: {type: Boolean, default: true},
-    sortable: {type: Boolean, default: true},
-    i: {type: [Number], default: 0},
-    hiddenColumnsColSpan: {type: Number, default: 0},
-    visibleColumns: {type: Array as PropType<LktTableColumn[]>, default: (): LktTableColumn[] => []},
-    hiddenColumns: {type: Array as PropType<LktTableColumn[]>, default: (): LktTableColumn[] => []},
-    emptyColumns: {type: Array as PropType<string[]>, default: (): string[] => []},
-    hiddenIsVisible: {type: Boolean, default: false},
-    modelValue: {type: Object as PropType<any>, default: () => ({})},
+const props = withDefaults(defineProps<{
+    modelValue: LktObject
+    isDraggable: boolean
+    sortable: boolean
+    hiddenIsVisible: boolean
+    i: number
+    hiddenColumnsColSpan: number
+    visibleColumns: LktTableColumn[]
+    hiddenColumns: LktTableColumn[]
+    emptyColumns: string[]
+}>(), {
+    modelValue: () => ({}),
+    isDraggable: true,
+    sortable: true,
+    hiddenIsVisible: false,
+    i: 0,
+    hiddenColumnsColSpan: 0,
+    visibleColumns: () => [],
+    hiddenColumns: () => [],
+    emptyColumns: () => [],
 });
 
 const item = ref(props.modelValue);
@@ -45,17 +52,17 @@ watch(item, () => emit('update:modelValue', item.value));
                 <tr :data-i="i">
                     <td v-for="(column, i) in hiddenColumns"
                         v-bind:data-column="column.key"
-                        v-bind:title="getColumnDisplayContent (column, item, i)"
+                        v-bind:title="getColumnDisplayContent (column, item, i, hiddenColumns)"
                         v-on:click="onClick($event, item, column)">
                         <template v-if="!!$slots[column.key]">
                             <slot v-bind:name="column.key"
                                   v-bind:value="item[column.key]"
                                   v-bind:item="item"
                                   v-bind:column="column"
-                                  v-bind:i="i"></slot>
+                                  v-bind:i="i"/>
                         </template>
                         <template v-else>
-                            <lkt-table-cell :column="column" v-model="item" :i="i"></lkt-table-cell>
+                            <lkt-table-cell :column="column" :columns="hiddenColumns" v-model="item" :i="i"/>
                         </template>
                     </td>
                 </tr>

package/src/components/LktTableCell.vue

@@ -1,19 +1,23 @@
-<script lang="ts">
-export default {name: "LktTableCell", inheritAttrs: false}
-</script>
-
 <script lang="ts" setup>
 import {getColumnDisplayContent} from "../functions/table-functions";
 import {LktTableColumn} from "../instances/LktTableColumn";
-import {nextTick, ref, watch, PropType, computed} from "vue";
+import {nextTick, ref, watch, computed} from "vue";
 import {LktObject} from "lkt-ts-interfaces";
 
-const emit = defineEmits(['edited']);
+const emit = defineEmits(['update:modelValue']);
 
-const props = defineProps({
-    modelValue: {type: Object as PropType<LktObject>, default: () => ({})},
-    column: {type: Object as PropType<LktTableColumn>, default: () => ({})},
-    i: {type: [Number], default: 0},
+const props = withDefaults(defineProps<{
+    modelValue: LktObject
+    column: LktTableColumn
+    columns: LktTableColumn[]
+    i: number
+    editModeEnabled: boolean
+}>(), {
+    modelValue: () => ({}),
+    column: () => ({}),
+    columns: () => [],
+    i: 0,
+    editModeEnabled: false
 });
 
 const item = ref(props.modelValue),
@@ -21,10 +25,10 @@ const item = ref(props.modelValue),
     inputElement = ref(null),
     loadingColumn = ref(props.column.showLoading());
 
-watch(value, () => {
+watch(value, (v) => {
     const payload = JSON.parse(JSON.stringify(item.value));
-    payload[props.column.key] = value.value;
-    emit('edited', payload, props.i);
+    payload[props.column.key] = v;
+    emit('update:modelValue', payload);
 })
 
 watch(() => props.modelValue, (v) => {
@@ -56,44 +60,47 @@ const slotData = computed(() => {
     </template>
     <template v-else-if="column.type === 'text'">
         <lkt-field-text
-            v-bind:read-mode="!column.editable"
+            v-bind:read-mode="!column.editable || !editModeEnabled"
             :ref="(el:any) => inputElement = el"
             :edit-slot="column.editSlot"
             :value-slot="column.valueSlot"
             :slot-data="slotData"
-            v-model="value"></lkt-field-text>
+            v-model="value"/>
     </template>
     <template v-else-if="column.type === 'email'">
         <lkt-field-text
-            v-bind:read-mode="!column.editable"
+            v-bind:read-mode="!column.editable || !editModeEnabled"
             :ref="(el:any) => inputElement = el"
             :edit-slot="column.editSlot"
             :value-slot="column.valueSlot"
             :slot-data="slotData"
             is-email
-            v-model="value"></lkt-field-text>
+            v-model="value"/>
     </template>
     <template v-else-if="column.type === 'tel'">
         <lkt-field-text
-            v-bind:read-mode="!column.editable"
+            v-bind:read-mode="!column.editable || !editModeEnabled"
             :ref="(el:any) => inputElement = el"
             :edit-slot="column.editSlot"
             :value-slot="column.valueSlot"
             :slot-data="slotData"
             is-tel
-            v-model="value"></lkt-field-text>
+            v-model="value"/>
     </template>
     <template v-else-if="column.type === 'check'">
-        <lkt-field-switch is-check v-bind:read-mode="!column.editable" :ref="(el:any) => inputElement = el" v-model="value"></lkt-field-switch>
+        <lkt-field-switch is-check v-bind:read-mode="!column.editable || !editModeEnabled" :ref="(el:any) => inputElement = el" v-model="value"/>
     </template>
     <template v-else-if="column.type === 'switch'">
-        <lkt-field-switch v-bind:read-mode="!column.editable" :ref="(el:any) => inputElement = el" v-model="value"></lkt-field-switch>
+        <lkt-field-switch v-bind:read-mode="!column.editable || !editModeEnabled" :ref="(el:any) => inputElement = el" v-model="value"/>
+    </template>
+    <template v-else-if="column.type === 'file'">
+        <lkt-field-file v-bind:read-mode="!column.editable || !editModeEnabled" :ref="(el:any) => inputElement = el" v-model="value"/>
     </template>
     <template v-else-if="column.type === 'select'">
         <lkt-loader v-if="loadingColumn"></lkt-loader>
         <lkt-field-select
             v-else
-            v-bind:read-mode="!column.editable"
+            v-bind:read-mode="!column.editable || !editModeEnabled"
             :ref="(el:any) => inputElement = el"
             v-model="value"
             :slot-data="slotData"
@@ -102,10 +109,11 @@ const slotData = computed(() => {
             v-bind:resource-data="column.resourceData"
             v-bind:options="column.options"
             v-bind:multiple="column.isMultiple"
+            v-bind:tags="column.tags"
             v-bind:multiple-display="column.multipleDisplay"
-            v-bind:multiple-display-edition="column.multipleDisplayEdition"></lkt-field-select>
+            v-bind:multiple-display-edition="column.multipleDisplayEdition"/>
     </template>
     <template v-else>
-        {{ getColumnDisplayContent(column, item, i) }}
+        {{ getColumnDisplayContent(column, item, i, columns) }}
     </template>
 </template>

package/src/components/LktTableRow.vue

@@ -1,71 +1,149 @@
-<script lang="ts">
-export default {name: "LktTableRow", inheritAttrs: false}
-</script>
-
 <script lang="ts" setup>
 import {createLktEvent} from "lkt-events";
 import {getColumnDisplayContent, getHorizontalColSpan, canRenderColumn} from "../functions/table-functions";
 import {LktTableColumn} from "../instances/LktTableColumn";
 import LktTableCell from "./LktTableCell.vue";
-import {ref, watch, PropType} from "vue";
+import {ref, watch, computed} from "vue";
 import {LktObject} from "lkt-ts-interfaces";
+import {Settings} from "../settings/Settings";
+import DropButton from "./DropButton.vue";
+import CreateButton from "./CreateButton.vue";
 
-const emit = defineEmits(['edited', 'click', 'show']);
+const emit = defineEmits(['update:modelValue', 'click', 'show', 'item-up', 'item-down', 'item-drop']);
 
-const props = defineProps({
-    isDraggable: {type: Boolean, default: true},
-    sortable: {type: Boolean, default: true},
-    i: {type: [Number], default: 0},
-    displayHiddenColumnsIndicator: {type: Boolean, default: false},
-    visibleColumns: {type: Array as PropType<LktTableColumn[]>, default: (): LktTableColumn[] => []},
-    emptyColumns: {type: Array as PropType<string[]>, default: (): string[] => []},
-    hiddenIsVisible: {type: Boolean, default: false},
-    item: {type: Object as PropType<any>, default: () => ({})},
+const props = withDefaults(defineProps<{
+    modelValue: LktObject
+    isDraggable: boolean
+    sortable: boolean
+    displayHiddenColumnsIndicator: boolean
+    hiddenIsVisible: boolean
+    addNavigation: boolean
+    latestRow: boolean
+    canDrop: boolean
+    editModeEnabled: boolean
+    i: number
+    visibleColumns: LktTableColumn[]
+    emptyColumns: string[]
+    dropConfirm: string
+    dropText: string
+}>(), {
+    modelValue: () => ({}),
+    isDraggable: true,
+    sortable: true,
+    displayHiddenColumnsIndicator: false,
+    hiddenIsVisible: false,
+    addNavigation: false,
+    latestRow: false,
+    canDrop: false,
+    editModeEnabled: false,
+    i: 0,
+    visibleColumns: () => [],
+    emptyColumns: () => [],
+    dropConfirm: '',
+    dropText: '',
 });
 
-const Item = ref(props.item);
+const Item = ref(props.modelValue);
 
 const onClick = ($event: any, item: any, column: LktTableColumn) => {
-    emit('click', $event, createLktEvent('', {item, column}))
-};
-const onShow = ($event: any, i: any) => {
-    emit('show', $event, createLktEvent('', {i}))
-};
-
-const onEdited = (payload: LktObject, i: any) => {
-    Item.value = payload;
-}
+        emit('click', $event, createLktEvent('', {item, column}))
+    },
+    onShow = ($event: any, i: any) => {
+        emit('show', $event, createLktEvent('', {i}))
+    },
+    classes = computed(() => {
+        let r = [];
+        if (props.sortable && props.isDraggable) r.push('handle');
+        return r.join(' ');
+    }),
+    hasNavButtonSlot = computed(() => {
+        return Settings.navButtonSlot !== '';
+    }),
+    navButtonSlot = computed(() => {
+        return Settings.navButtonSlot;
+    }),
+    hasDropButtonSlot = computed(() => {
+        return Settings.dropButtonSlot !== '';
+    }),
+    dropButtonSlot = computed(() => {
+        return Settings.dropButtonSlot;
+    }),
+    onClickUp = () => {
+        emit('item-up', props.i);
+    },
+    onClickDown = () => {
+        emit('item-down', props.i);
+    },
+    onClickDrop = () => {
+        emit('item-drop', props.i);
+    };
 
-watch(() => props.item, (v) => Item.value = v);
-watch(Item, () => emit('edited', Item.value, props.i));
+watch(() => props.modelValue, (v) => Item.value = v);
+watch(Item, (v) => {
+    emit('update:modelValue', v, props.i)
+}, {deep: true});
 </script>
 
 <template>
-    <tr :data-i="i" :data-handle-drag="isDraggable">
-        <td v-if="sortable && isDraggable" data-role="drag-indicator"></td>
-        <td v-else-if="sortable" data-role="invalid-drag-indicator"></td>
+    <tr :data-i="i" :data-draggable="isDraggable">
+        <td v-if="sortable && isDraggable && editModeEnabled" data-role="drag-indicator" :class="classes" />
+        <td v-else-if="sortable && editModeEnabled" data-role="invalid-drag-indicator"/>
+        <td v-if="addNavigation && editModeEnabled" class="lkt-table-nav-cell">
+            <div class="lkt-table-nav-container">
+                <lkt-button palette="table-nav" :disabled="i === 0" @click="onClickUp">
+                    <template v-if="hasNavButtonSlot">
+                        <component
+                            :is="navButtonSlot"
+                            direction="up"/>
+                    </template>
+                    <template v-else>
+                        <i class=""/> UP
+                    </template>
+                </lkt-button>
+                <lkt-button palette="table-nav" :disabled="latestRow" @click="onClickDown">
+                    <template v-if="hasNavButtonSlot">
+                        <component
+                            :is="navButtonSlot"
+                            direction="down"/>
+                    </template>
+                    <template v-else>
+                        <i class=""/> DOWN
+                    </template>
+                </lkt-button>
+            </div>
+        </td>
         <td v-if="displayHiddenColumnsIndicator"
             v-on:click="onShow($event, i)" data-role="show-more"
-            v-bind:class="hiddenIsVisible ? 'state-open' : ''"></td>
+            v-bind:class="hiddenIsVisible ? 'state-open' : ''"/>
         <template v-for="column in visibleColumns">
-            <td v-if="canRenderColumn(column, emptyColumns, item)"
+            <td v-if="canRenderColumn(column, emptyColumns, Item)"
                 v-bind:data-column="column.key"
-                v-bind:colspan="getHorizontalColSpan(column,item)"
-                v-bind:title="getColumnDisplayContent (column, item, i)"
-                v-on:click="onClick($event, item, column)"
+                v-bind:colspan="getHorizontalColSpan(column,Item)"
+                v-bind:title="getColumnDisplayContent (column, Item, i, visibleColumns)"
+                v-on:click="onClick($event, Item, column)"
             >
                 <template v-if="!!$slots[column.key]">
                     <slot v-bind:name="column.key"
-                          v-bind:value="item[column.key]"
-                          v-bind:item="item"
+                          v-bind:value="Item[column.key]"
+                          v-bind:item="Item"
                           v-bind:column="column"
-                          v-bind:i="i"></slot>
+                          v-bind:i="i"/>
                 </template>
-                <template v-else-if="item">
-                    <lkt-table-cell :column="column" v-model="Item" :i="i" v-on:edited="onEdited"></lkt-table-cell>
+                <template v-else-if="Item">
+                    <lkt-table-cell
+                        v-model="Item"
+                        :column="column"
+                        :columns="visibleColumns"
+                        :edit-mode-enabled="editModeEnabled"
+                        :i="i"/>
                 </template>
             </td>
         </template>
+        <td v-if="canDrop && editModeEnabled" class="lkt-table-delete-cell">
+            <drop-button
+                :text="dropText"
+                @click="onClickDrop"/>
+        </td>
     </tr>
 
 </template>

package/src/components/TableHeader.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+
+import {getVerticalColSpan} from "../functions/table-functions";
+import {LktTableColumn} from "../instances/LktTableColumn";
+import {computed} from "vue";
+import {LktObject} from "lkt-ts-interfaces";
+import {__} from "lkt-i18n";
+
+const emit = defineEmits(['click']);
+
+const props = withDefaults(defineProps<{
+    column: LktTableColumn,
+    sortBy: string,
+    sortDirection: string,
+    amountOfColumns: number,
+    items: LktObject[]
+}>(), {
+    column: () => ({}),
+    items: () => [],
+    isDraggable: true,
+    sortBy: '',
+    sortDirection: '',
+    amountOfColumns: 0
+});
+
+const computedColSpan = computed(() => {
+        return getVerticalColSpan(props.column, props.amountOfColumns, props.items);
+    }),
+    computedSortable = computed(() => {
+        return props.column.sortable === true;
+    }),
+    computedSortDirection = computed(() => {
+        if (!computedSortable.value) return '';
+        if (props.sortBy === props.column.key) return props.sortDirection;
+        return '';
+    }),
+    computedLabel = computed(() => {
+        if (props.column.label.startsWith('__:')) {
+            return __(props.column.label.substring(3));
+        }
+        return props.column.label;
+    });
+
+const onClick = () => {
+    emit('click', props.column);
+}
+
+</script>
+
+<template>
+    <th :data-column="column.key"
+        :data-sortable="computedSortable"
+        :data-sort="computedSortDirection"
+        :colspan="computedColSpan"
+        :title="computedLabel"
+        v-on:click="onClick"
+    >
+        <div>{{ computedLabel }}</div>
+    </th>
+</template>