From 6730dbfb2bb2e4f3f759d7cb290225124fe89b2d Mon Sep 17 00:00:00 2001
From: ooithianhooi <ooithianhooi@gmail.com>
Date: Sun, 28 Jul 2024 17:01:37 +0800
Subject: [PATCH] fix: added filtering

---
 app/modules/dashboard/DataTable.tsx | 121 ++++++++++++++++++----------
 app/modules/dashboard/columns.tsx   |   7 ++
 2 files changed, 85 insertions(+), 43 deletions(-)

diff --git a/app/modules/dashboard/DataTable.tsx b/app/modules/dashboard/DataTable.tsx
index e881302..c8890f2 100644
--- a/app/modules/dashboard/DataTable.tsx
+++ b/app/modules/dashboard/DataTable.tsx
@@ -3,6 +3,8 @@ import {
   flexRender,
   getCoreRowModel,
   useReactTable,
+  getFilteredRowModel,
+  ColumnFiltersState,
 } from '@tanstack/react-table';
 
 import {
@@ -14,6 +16,8 @@ import {
   TableRow,
 } from '~/components/ui/table';
 import { getColumns } from './columns';
+import { useState } from 'react';
+import { DebounceInput } from '~/components/ui/debounce-input';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -26,58 +30,89 @@ export function DataTable<TData, TValue>({
   data,
   onRowClick,
 }: DataTableProps<TData, TValue>) {
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
   const parsedColumns = getColumns(onRowClick) as ColumnDef<TData, TValue>[];
-  
+
   const table = useReactTable({
     data,
     columns: parsedColumns,
     getCoreRowModel: getCoreRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: { columnFilters },
   });
 
   return (
-    <div className="rounded-md border">
-      <Table>
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                  </TableHead>
-                );
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && 'selected'}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
+    <div>
+      <div className="flex items-center py-4">
+        <DebounceInput
+          placeholder="Filter by name or location..."
+          className="max-w-sm"
+          value={
+            (table.getColumn('property_name')?.getFilterValue() as string) || ''
+          }
+          onChange={(value) =>
+            setColumnFilters([
+              {
+                id: 'property_name',
+                value: value,
+              },
+            ])
+          }
+        />
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
               </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
+            )}
+          </TableBody>
+        </Table>
+      </div>
     </div>
   );
 }
diff --git a/app/modules/dashboard/columns.tsx b/app/modules/dashboard/columns.tsx
index adfbf8f..aed61d5 100644
--- a/app/modules/dashboard/columns.tsx
+++ b/app/modules/dashboard/columns.tsx
@@ -44,6 +44,13 @@ export const columns: ColumnDef<Video>[] = [
   {
     accessorKey: 'property_name',
     header: 'Property Name',
+    filterFn: (row, id, value) => {
+      const name = row.getValue<string>('property_name')?.toLowerCase();
+      const location = row.getValue<string>('location')?.toLowerCase();
+      const search = value.toLowerCase();
+
+      return name?.includes(search) || location?.includes(search);
+    },
   },
   {
     accessorKey: 'location',