tweaks

src/app/story/data-table.tsx

@@ -71,39 +71,41 @@ export function DataTable<TData, TValue>({
   console.log(filterBy.id)
   return (<>
     <div className="flex items-center py-4">
+      <div className="">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Filter by
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuRadioGroup value={filterBy} onValueChange={setFilterBy} >
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanFilter())
+                .map((column) => {
+                  return (
+                    <DropdownMenuRadioItem value={column} className="capitalize" key={column.id}>
+                      {column.id}
+                    </DropdownMenuRadioItem>
+                  )
+                })}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Input
+          placeholder={`${filterBy.id}`}
+          value={(table.getColumn(filterBy.id)?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn(filterBy.id)?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+      </div>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="outline" className="ml-auto">
-            Filter by
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuRadioGroup value={filterBy} onValueChange={setFilterBy} >
-            {table
-              .getAllColumns()
-              .filter((column) => column.getCanFilter())
-              .map((column) => {
-                return (
-                  <DropdownMenuRadioItem value={column} className="capitalize" key={column.id}>
-                    {column.id}
-                  </DropdownMenuRadioItem>
-                )
-              })}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <Input
-        placeholder={`${filterBy.id}`}
-        value={(table.getColumn(filterBy.id)?.getFilterValue() as string) ?? ""}
-        onChange={(event) =>
-          table.getColumn(filterBy.id)?.setFilterValue(event.target.value)
-        }
-        className="max-w-sm"
-      />
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline" className="ml-auto">
-            Columns
+            Show/hide
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">