N
Nuxt•2mo ago
FoxCode

NuxtUI 3 Table with filters

It is possible to create table with filters (instead of sorting) with new UTable component? I tried examples from https://ui.nuxt.com/components/table#with-column-sorting and https://ui.nuxt.com/components/table#with-column-filters but h() syntax instead of HTML one is hard to read and customize
Nuxt UI
Table Vue Component - Nuxt UI v3
A responsive table element to display data in rows and columns.
No description
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @FoxCode. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can create a table with filters using the NuxtUI UTable component. The documentation provides a searchable example that you can adapt for filtering. Here's a simpler approach using standard Vue template syntax instead of the h() render function: 
<script setup lang="ts">
const columns = [{
  key: 'id',
  label: 'ID'
}, {
  key: 'name',
  label: 'Name'
}, {
  key: 'title',
  label: 'Title'
}, {
  key: 'email',
  label: 'Email'
}, {
  key: 'role',
  label: 'Role'
}]

const people = [
  // your data array
  {
    id: 1,
    name: 'Lindsay Walton',
    title: 'Front-end Developer',
    role: 'Member'
  },
  // more data...
]

const q = ref('')

const filteredRows = computed(() => {
  if (!q.value) {
    return people
  }

  return people.filter((person) => {
    return Object.values(person).some((value) => {
      return String(value).toLowerCase().includes(q.value.toLowerCase())
    })
  })
})
</script>

<template>
  <div>
    <div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
      <UInput v-model="q" placeholder="Filter people..." />
    </div>

    <UTable :rows="filteredRows" :columns="columns" />
  </div>
</template>
<script setup lang="ts">
const columns = [{
  key: 'id',
  label: 'ID'
}, {
  key: 'name',
  label: 'Name'
}, {
  key: 'title',
  label: 'Title'
}, {
  key: 'email',
  label: 'Email'
}, {
  key: 'role',
  label: 'Role'
}]

const people = [
  // your data array
  {
    id: 1,
    name: 'Lindsay Walton',
    title: 'Front-end Developer',
    role: 'Member'
  },
  // more data...
]

const q = ref('')

const filteredRows = computed(() => {
  if (!q.value) {
    return people
  }

  return people.filter((person) => {
    return Object.values(person).some((value) => {
      return String(value).toLowerCase().includes(q.value.toLowerCase())
    })
  })
})
</script>

<template>
  <div>
    <div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
      <UInput v-model="q" placeholder="Filter people..." />
    </div>

    <UTable :rows="filteredRows" :columns="columns" />
  </div>
</template>
This example from the Searchable section shows how to implement a simple text filter that searches across all fields. For more advanced filtering, you could create multiple filter inputs for specific columns and combine their results in your computed property. You can also use other input components like USelectMenu to filter by specific values in columns. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@363971301947342848> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?