const sortField = ref<string | null>(props.sortLabel);
const sortOrder = ref<"asc" | "desc">(props.sortOrder);

const sortedData = computed(() => {
 if (!props.data || !sortField.value) {
 return props.data;
 }

 return [...props.data].sort((a, b) => {
 const fieldA = a[sortField.value!];
 const fieldB = b[sortField.value!];
 if (fieldA < fieldB) {
 return sortOrder.value === "asc" ? -1 : 1;
 }
 if (fieldA > fieldB) {
 return sortOrder.value === "asc" ? 1 : -1;
 }
 return 0;
 });
});

const dataToDisplay = computed(() => {
 if (sortedData.value) {
 if (sortedData.value.length <= itemsInTable.value) {
 return sortedData.value;
 } else {
 let sliceFrom = (currentPage.value - 1) * itemsInTable.value;
 return sortedData.value.slice(sliceFrom, sliceFrom + itemsInTable.value);
 }
 }
 return [];
});

const onSort = (sort: Sort) => {
 const column = props.header.find(
 (col) => col.columnLabel === sort.label
 );
 if (column && column.sortEnabled) {
 sortField.value = column.sortingField;
 sortOrder.value = sort.order;
 }
 emit("on-sort", sort);
};