add search

Author: krish-adi

components/list-table.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Search } from "lucide-react";
 import {
     Table,
     TableBody,
@@ -10,13 +11,17 @@ import {
 
 import {
     ColumnDef,
+    ColumnFiltersState,
     SortingState,
     flexRender,
     getCoreRowModel,
+    getFilteredRowModel,
     getSortedRowModel,
     useReactTable,
 } from "@tanstack/react-table";
 
+import { Input } from "@/components/ui/input";
+
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
@@ -27,20 +32,42 @@ export default function ListTable<TData, TValue>({
     data,
 }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = React.useState<SortingState>([]);
+    const [columnFilters, setColumnFilters] =
+        React.useState<ColumnFiltersState>([]);
     const table = useReactTable({
         data,
         columns,
         getCoreRowModel: getCoreRowModel(),
         onSortingChange: setSorting,
         getSortedRowModel: getSortedRowModel(),
+        onColumnFiltersChange: setColumnFilters,
+        getFilteredRowModel: getFilteredRowModel(),
         state: {
             sorting,
+            columnFilters,
         },
     });
     return (
-        <div className="w-full flex justify-center px-1 sm:px-5 md:px-10 lg:px-20 pt-5">
-            <div className="mx-auto max-w-7xl overflow-x-auto border rounded-lg">
-                <Table>
+        <div className="w-full flex flex-col justify-center px-2 sm:px-5 md:px-10 lg:px-20 pt-5">
+            <div className="mx-auto max-w-7xl w-full flex flex-row items-center justify-start py-4">
+                <Search className="w-5 h-5 mr-3" />
+                <Input
+                    placeholder="Search products..."
+                    value={
+                        (table
+                            .getColumn("product")
+                            ?.getFilterValue() as string) ?? ""
+                    }
+                    onChange={(event) =>
+                        table
+                            .getColumn("product")
+                            ?.setFilterValue(event.target.value)
+                    }
+                    className="max-w-md"
+                />
+            </div>
+            <div className="mx-auto max-w-7xl w-full overflow-x-auto border rounded-lg">
+                <Table className="w-full">
                     <TableHeader className="bg-zinc-100">
                         {table.getHeaderGroups().map((headerGroup) => (
                             <TableRow key={headerGroup.id}>

components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }