From 0a9c408936a9a59877fce7a9e5c6f4dd759eeb25 Mon Sep 17 00:00:00 2001
From: Irfan Maulana <mazipanneh@gmail.com>
Date: Mon, 2 Dec 2024 11:14:23 +0700
Subject: [PATCH] [#30] FEAT: Simple sort in mobile device (#83)

---
 src/components/TableUser/card-users.tsx       |  6 ++-
 .../TableUser/data-table-toolbar.tsx          | 46 +++++++++++++++++++
 src/components/TableUser/data-table.tsx       |  8 +++-
 3 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/src/components/TableUser/card-users.tsx b/src/components/TableUser/card-users.tsx
index 2a73946..ad4c2d6 100644
--- a/src/components/TableUser/card-users.tsx
+++ b/src/components/TableUser/card-users.tsx
@@ -121,7 +121,11 @@ export function CardUsers<TData, TValue>({
     <div className="grid gap-2">
       <div className="rounded-md border">
         <div className="p-4">
-          <DataTableToolbar table={table} withTableViewOptions={false} />
+          <DataTableToolbar
+            table={table}
+            withTableViewOptions={false}
+            withSortOptions={true}
+          />
         </div>
         <div className="grid gap-2">
           {table.getRowModel().rows?.length ? (
diff --git a/src/components/TableUser/data-table-toolbar.tsx b/src/components/TableUser/data-table-toolbar.tsx
index bb1b2c0..3eba991 100644
--- a/src/components/TableUser/data-table-toolbar.tsx
+++ b/src/components/TableUser/data-table-toolbar.tsx
@@ -2,17 +2,28 @@
 
 import type { Table } from '@tanstack/react-table';
 
+import { cn } from '@/lib/utils';
+import { ActivityIcon, ArrowDownNarrowWideIcon, UserRoundCheckIcon } from 'lucide-react';
+import { Button } from '../ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
 import { Input } from '../ui/input';
 import { DataTableViewOptions } from './data-table-view-options';
 
 interface DataTableToolbarProps<TData> {
   table: Table<TData>;
   withTableViewOptions?: boolean;
+  withSortOptions?: boolean;
 }
 
 export function DataTableToolbar<TData>({
   table,
   withTableViewOptions,
+  withSortOptions,
 }: DataTableToolbarProps<TData>) {
   return (
     <div className="flex items-center justify-between gap-2 flex-wrap">
@@ -29,6 +40,41 @@ export function DataTableToolbar<TData>({
         />
       </div>
       {withTableViewOptions && <DataTableViewOptions table={table} />}
+      {withSortOptions && (
+        <div className={cn('flex items-center space-x-2 ml-2')}>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="-ml-3 h-8 data-[state=open]:bg-accent"
+              >
+                <ArrowDownNarrowWideIcon />
+                <span>Sort</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {[
+                table.getColumn('followers'),
+                table.getColumn('contributions'),
+              ].map((column) => (
+                <DropdownMenuItem
+                  onClick={() => column?.toggleSorting?.(true)}
+                  key={column?.id}
+                >
+                  {column?.id === 'contributions' ? (
+                    <ActivityIcon className="h-3.5 w-3.5 text-muted-foreground/70" />
+                  ) : (
+                    <UserRoundCheckIcon className="h-3.5 w-3.5 text-muted-foreground/70" />
+                  )}
+
+                  By {column?.id}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/TableUser/data-table.tsx b/src/components/TableUser/data-table.tsx
index de14dd7..8e841eb 100644
--- a/src/components/TableUser/data-table.tsx
+++ b/src/components/TableUser/data-table.tsx
@@ -32,7 +32,7 @@ import { DataTableToolbar } from './data-table-toolbar';
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
-  updatedAt?: Date
+  updatedAt?: Date;
 }
 
 export function DataTable<TData, TValue>({
@@ -73,7 +73,11 @@ export function DataTable<TData, TValue>({
     <div className="grid gap-2 grid-cols-1">
       <div className="rounded-md border">
         <div className="p-4">
-          <DataTableToolbar table={table} withTableViewOptions={true} />
+          <DataTableToolbar
+            table={table}
+            withTableViewOptions={true}
+            withSortOptions={false}
+          />
         </div>
         <Table>
           <TableHeader>