diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue index bda5bb899..aa7a2997a 100644 --- a/lib/KTable/index.vue +++ b/lib/KTable/index.vue @@ -165,52 +165,43 @@ const headers = ref(props.headers); const rows = ref(props.rows); const disableBuiltinSorting = ref(props.disableBuiltinSorting); - const sortKey = ref(null); - const sortOrder = ref(null); - const defaultSort = ref({ index: props.headers.findIndex(h => h.columnId === props.defaultSort.columnId), direction: props.defaultSort.direction, }); - const { sortedRows, handleSort, getAriaSort } = useSorting( - headers, - rows, - defaultSort, - disableBuiltinSorting, - emit - ); + const { + sortKey, + sortOrder, + sortedRows, + handleSort: localHandleSort, + getAriaSort, + } = useSorting(headers, rows, defaultSort, disableBuiltinSorting); + const isTableEmpty = computed(() => sortedRows.value.length === 0); watch( () => props.rows, newRows => { rows.value = newRows; - } + }, ); - watch( - () => sortKey.value, - newSortKey => { - if (disableBuiltinSorting.value) { - console.log(`Received new sortKey: ${newSortKey}`); - sortKey.value = newSortKey; - } + const handleSort = index => { + if (headers.value[index].dataType === DATA_TYPE_OTHERS || !props.sortable) { + return; } - ); + localHandleSort(index) + if (props.disableBuiltinSorting) { + // Emit the event to the parent to notify that the sorting has been requested + console.log('Emitting changeSort event with sortKey and sortOrder', index, sortOrder.value); + emit('changeSort', { sortKey: index, sortOrder: sortOrder.value }); - watch( - () => sortOrder.value, - newSortOrder => { - if (disableBuiltinSorting.value) { - console.log(`Received new sortOrder: ${newSortOrder}`); - sortOrder.value = newSortOrder; - } } - ); + }; + - const getHeaderStyle = header => { const style = {}; if (header.minWidth) style.minWidth = header.minWidth; @@ -380,12 +371,6 @@ }, }, watch: { - sortOrder(newVal) { - console.log(`sortOrder updated in KTable: ${newVal}`); - }, - sortKey(newVal) { - console.log(`sortKey updated in KTable: ${newVal}`); - }, // Use a watcher on props to perform validation on props. // This is required as we need access to multiple props simultaneously in some validations. $props: { @@ -685,4 +670,4 @@ cursor: pointer; } - + \ No newline at end of file diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js index d54086b06..580bee066 100644 --- a/lib/KTable/useSorting/index.js +++ b/lib/KTable/useSorting/index.js @@ -18,10 +18,9 @@ export const DATA_TYPE_OTHERS = 'undefined'; * default sorting, and 'direction' denoting the sort order. * @param {Ref} disableBuiltinSorting - Reactive reference to disable all forms of sorting * by the hook. - * @param {Function} emit - Function to emit events. * @returns {Object} - An object containing reactive references and methods for sorting. */ -export default function useSorting(headers, rows, defaultSort, disableBuiltinSorting, emit) { +export default function useSorting(headers, rows, defaultSort, disableBuiltinSorting) { const sortKey = ref(null); const sortOrder = ref(null); @@ -44,10 +43,7 @@ export default function useSorting(headers, rows, defaultSort, disableBuiltinSor * If local sorting is disabled or no sort key is set, it returns the original rows. */ const sortedRows = computed(() => { - if (disableBuiltinSorting.value) { - console.log('disableBuiltinSorting is true, returning original rows'); - return rows.value; - } + if (disableBuiltinSorting.value) return rows.value; // No sort key or value has been explicitly set till now if (sortKey.value === null || sortOrder.value === null) { @@ -59,7 +55,7 @@ export default function useSorting(headers, rows, defaultSort, disableBuiltinSor [defaultSort.value.direction], ); } - + return _.orderBy(rows.value, [row => getSortValue(row, sortKey.value)], [sortOrder.value]); }); @@ -82,11 +78,6 @@ export default function useSorting(headers, rows, defaultSort, disableBuiltinSor sortKey.value = index; sortOrder.value = SORT_ORDER_ASC; } - - if (disableBuiltinSorting.value) { - console.log(sortKey.value, sortOrder.value); - emit('changeSort', { sortKey: sortKey.value, sortOrder: sortOrder.value, index }); - } }; /**