From 691b49a9025cc2e41bc0b6656bc6b4c79766de03 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 30 Sep 2025 15:42:03 +0700
Subject: [PATCH] chore: update Table component

---
 src/components/Table.tsx | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 97f767aa..e20d4d11 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode, useState } from 'react';
+import { ReactNode, useCallback, useState } from 'react';
 import {
   flexRender,
   getCoreRowModel,
@@ -10,6 +10,7 @@ import {
   TableOptions,
   useReactTable,
   ColumnDef,
+  FilterFn,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { Icon } from '@iconify/react';
@@ -32,7 +33,7 @@ interface TableClassNames {
 
 export interface TableProps<TData extends object> {
   data: TData[];
-  columns: ColumnDef<TData, any>[];
+  columns: ColumnDef<TData, unknown>[];
   pageSize?: number;
   totalItems?: number;
   page?: number;
@@ -46,17 +47,6 @@ export interface TableProps<TData extends object> {
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
 
-const fuzzyFilter = (
-  row: any,
-  columnId: string,
-  value: string,
-  addMeta: (meta: any) => void
-) => {
-  const itemRank = rankItem(row.getValue(columnId), value);
-  addMeta({ itemRank });
-  return itemRank.passed;
-};
-
 const emptyContentDefaultValue = (
   <div className='w-full p-5 text-center'>
     <span className='text-lg opacity-50'>
@@ -99,6 +89,15 @@ const Table = <TData extends object>({
     pageSize: pageSize,
   });
 
+  const fuzzyFilter: FilterFn<TData> = useCallback(
+    (row, columnId, value, addMeta) => {
+      const itemRank = rankItem(row.getValue(columnId), value);
+      addMeta({ itemRank });
+      return itemRank.passed;
+    },
+    []
+  );
+
   const tableOptions: TableOptions<TData> = {
     columns,
     data: isLoading ? (DUMMY_SKELETON_DATA as TData[]) : data, // Type assertion
@@ -231,11 +230,7 @@ const Table = <TData extends object>({
         <div className={cn('mt-5', className.paginationClassName)}>
           <Pagination
             totalItems={isServerSideTable ? totalItems : table.getRowCount()}
-            itemsPerPage={
-              isServerSideTable
-                ? undefined
-                : table.getState().pagination.pageSize
-            }
+            itemsPerPage={table.getState().pagination.pageSize}
             currentPage={
               isServerSideTable
                 ? page