N
Nuxt•3mo ago
Just Simeon

Checkbox filter in Table

I want to add a checkbox which filters a column in my table. The goal is to hide all rows where the status column is not "pending" how can I do that?
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add a checkbox that filters your Nuxt UI Table to only show rows where the status column is "pending", you can use the column filtering feature provided by the Nuxt UI Table component. While the examples in the documentation show filtering with text inputs, you can adapt this to use a checkbox for boolean filtering. Here's how you can implement it: 1. Add a checkbox to your template that controls a filter value (e.g., showPendingOnly). 2. Bind the filter state to the table's column-filters prop using v-model. 3. Update the filter value when the checkbox is toggled. Below is an example based on the patterns from the documentation, adapted for your use case: 
<script setup lang="ts">
import { ref, computed } from 'vue'
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@nuxt/ui'

const UBadge = resolveComponent('UBadge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded' | 'pending'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  // ... your data here, including some with status: 'pending'
])

const columns: TableColumn<Payment>[] = [
  // ... your column definitions
]

const showPendingOnly = ref(false)

const columnFilters = computed(() => {
  return showPendingOnly.value
    ? [{ id: 'status', value: 'pending' }]
    : []
})
</script>

<template>
  <div>
    <label>
      <input type="checkbox" v-model="showPendingOnly" />
      Show only pending
    </label>
    <UTable
      :data="data"
      :columns="columns"
      v-model:column-filters="columnFilters"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@nuxt/ui'

const UBadge = resolveComponent('UBadge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded' | 'pending'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  // ... your data here, including some with status: 'pending'
])

const columns: TableColumn<Payment>[] = [
  // ... your column definitions
]

const showPendingOnly = ref(false)

const columnFilters = computed(() => {
  return showPendingOnly.value
    ? [{ id: 'status', value: 'pending' }]
    : []
})
</script>

<template>
  <div>
    <label>
      <input type="checkbox" v-model="showPendingOnly" />
      Show only pending
    </label>
    <UTable
      :data="data"
      :columns="columns"
      v-model:column-filters="columnFilters"
    />
  </div>
</template>
How it works: - When the checkbox is checked, the table will only show rows where status is "pending". - When unchecked, all rows are shown. This approach leverages the column-filters prop, which is designed for column-based filtering and can be bound with v-model as shown in the official documentation. You can use any UI element (like a checkbox) to control the filter value, not just text inputs. The key is to update the filter array accordingly when the checkbox changes state. For more details and examples of column filtering, see the Nuxt UI Table documentation (look for the "With column filters" section). The code above is directly adapted from those examples, just using a checkbox instead of a text input for the filter control. If you need to filter for a different value or column, just adjust the id and value in the filter object accordingly. --- Note: If your status column does not include "pending" as a possible value, make sure to add it to your data and column definitions as needed.
Nuxt UI Table: With column filters ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@294593079812292609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?