fix: hide button sort if column cannot be hidden & update filterFn (#69)

* fix: hide button sort if column cannot be hidden & fix multiple filter on users table

* fix: hide dropdown separators if column dropdown is disabled

* fix: disable sorting for status and role columns

---------

Co-authored-by: satnaing <satnaingdev@gmail.com>

src/features/tasks/components/data-table-column-header.tsx

@@ -58,11 +58,15 @@ export function DataTableColumnHeader<TData, TValue>({
             <ArrowDownIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
             Desc
           </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeNoneIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
-            Hide
-          </DropdownMenuItem>
+          {column.getCanHide() && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+                <EyeNoneIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
+                Hide
+              </DropdownMenuItem>
+            </>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
     </div>

src/features/users/components/data-table-column-header.tsx

@@ -58,11 +58,15 @@ export function DataTableColumnHeader<TData, TValue>({
             <ArrowDownIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
             Desc
           </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeNoneIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
-            Hide
-          </DropdownMenuItem>
+          {column.getCanHide() && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+                <EyeNoneIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
+                Hide
+              </DropdownMenuItem>
+            </>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
     </div>

src/features/users/components/users-columns.tsx

@@ -101,9 +101,11 @@ export const columns: ColumnDef<User>[] = [
         </div>
       )
     },
-    filterFn: 'weakEquals',
-    enableSorting: false,
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    },
     enableHiding: false,
+    enableSorting: false,
   },
   {
     accessorKey: 'role',
@@ -127,7 +129,9 @@ export const columns: ColumnDef<User>[] = [
         </div>
       )
     },
-    filterFn: 'weakEquals',
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    },
     enableSorting: false,
     enableHiding: false,
   },