fnSort prop in table and background in tags when change modelValue

[clopezpro]

fnSort is used when onSort is executed in the Table component, this function can give me the freedom to sort the data in my own way or ask the backend to change the order when there is a lot of data
in template

<UTable
        :fn-sort="fnSort"
        :loading="loading"
        :columns="columns"
        :rows="data"
      >
        <template #url-data="{ row }">
          <UAvatar :src="row.url" alt="Avatar" />
        </template>
 </UTable>

in script

async function fetchData() {
  try {
    loading.value = true
    const params = new URLSearchParams()
    if (sortData.value.column && sortData.value.direction)
    {
      params.append('_sort', sortData.value.column)
      params.append('_order', sortData.value.direction.toUpperCase())
    }
    const response = await fetch(`https://jsonplaceholder.typicode.com/photos?${params.toString()}`)
    data.value = await response.json()
    loading.value = false
  }
  catch (err) {
    loading.value = false
    console.log(err)
  }
}
watch(sortData.value, () => {
  fetchData()
})
function fnSort (sort: { column: string | null; direction?: 'asc' | 'desc' | undefined }) {
    sortData.value.column = sort.column
    sortData.value.direction = sort.direction
}

could be related to #390 #296

In tags when modelValue is changed, the background of selected is not assigned to the tag
this could be the solution

watch(() => props.modelValue, (value) => {
      selectedIndex.value = value
      calcMarkerSize(value)
})

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	❌ Failed (Inspect)		Aug 14, 2023 2:52pm

[Haythamasalama]

What you think about adding fnSort to main srot prop like this

    sort: {
      type: Object as PropType<{ column: string, direction: 'asc' | 'desc', sortBy?: Function }>,
      default: () => ({})
    },

if (props.sort?.sortBy) {
  sort.value.column = toSort.column
  await props.sort.sortBy(toSort)
}

sort.value = toSort

[clopezpro]

Better

<template>
     <UTable
        :sort="{
          column: sortData.column,
          direction: sortData.direction,
          sortBy: fnSort
        }"
        :loading="loading"
        :columns="columns"
        :rows="data"
      >
        <template #url-data="{ row }">
          <UAvatar :src="row.url" alt="Avatar" />
        </template>
      </UTable>
</template>

<script setup lang="ts"> 
const data = ref<[]>([])
const loading = ref<boolean>(false)
const sortData = ref<{ column: string | null; direction: 'asc' | 'desc'}>({
  column: 'id',
  direction: 'asc'
})
const columns = [{
                   key: 'id',
                   label: 'ID',
                   sortable: true
                 },
                 {
                   key: 'title',
                   label: 'Tile',
                   sortable: true
                 }, {
                   key: 'url',
                   label: 'IMG'
                 }]

async function fetchPhotos () {
  try {
    loading.value = true
    const params = new URLSearchParams()
    if (sortData.value.column && sortData.value.direction)
    {
      params.append('_sort', sortData.value.column)
      params.append('_order', sortData.value.direction.toUpperCase())
    }
    const response = await fetch(`https://jsonplaceholder.typicode.com/photos?${params.toString()}`)
    data.value = await response.json()
    loading.value = false
  }
  catch (err) {
    loading.value = false
    console.log(err)
  }
}

async function fnSort (sort: { column: string | null; direction: 'asc' | 'desc'  }) {
  sortData.value.column = sort.column
  sortData.value.direction = sort.direction
  await fetchPhotos()
}
onMounted(() => {
  fetchPhotos()
})
</script>

[Haythamasalama]

Yeah, it looks more readable to avoid a lot of props in features

[benjamincanac]

Closing in favor of #803