Custom Switch Filter

[algospa]

Im trying to make in a toolbar component a custom switch (toggle) for filtering a column for "available" based on true and false from the database. A column with id "available" is alredy populated in my columns.tsx, but i dont where to start from passing it.

• toolbar.tsx

{table.getColumn("available") && (
  <DataTableSwitchFilter
    column={table.getColumn("available")}
  />
)}

• columns.tsx

  {
    id: "available",
    accessorKey: "Available",
    header: ({ column }) => (
      <div className="min-w-[10px]"></div>
    ),
    cell: ({ row }) => {
      const rowData = row.original as unknown as ItemData;
      return (
        <div className="flex items-center justify-center min-w-[10px]">
          <TooltipProvider delayDuration={0}>
            <Tooltip>
              <TooltipTrigger>
                {rowData.Deleted ? (
                  <Badge variant="default"
                    className="bg-red-700 h-3 w-3 p-0 hover:bg-red-500 dark:bg-red-600 dark:hover:bg-red-300"></Badge>
                ) : rowData.Available ? (
                  <Badge variant="default"
                    className="bg-green-700 h-3 w-3 p-0 hover:bg-green-500 dark:bg-green-600 dark:hover:bg-green-300"></Badge>
                ) : (
                  <Badge variant="outline"
                    className="h-3 w-3 p-0 border-green-700 hover:border-green-500"></Badge>
                )}
              </TooltipTrigger>
              <TooltipContent>
                {rowData.Deleted ? (
                  <p>Elimnato!</p>
                ) : rowData.Available ? (
                  <p>Disponibile</p>
                ) : (
                  <p>Non disponibile</p>
                )}
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
      );
    },
    enableSorting: false,
    enableHiding: false,
  },

custom component filter switch

import * as React from "react"
import { Column } from "@tanstack/react-table"

import { cn } from "@/lib/utils"
import { Switch } from "@/components/ui/switch"

interface DataTableSwitchFilterProps<TData, TValue> {
    column?: Column<TData, TValue>
}

export function DataTableSwitchFilter<TData, TValue>({
    column,
  }: DataTableSwitchFilterProps<TData, TValue>) {
    const facets = column?.getFacetedUniqueValues()
    const check = column?.getFilterValue() as boolean

    console.log("Facets", facets)
    console.log(check)
  
    return (
        <Switch />
    );
  }

i tried to see for other solution but i cannot find anything related to creating a custom switch or checboxes that willl filter it.