Refactor ObjectTable component to utilize refs for table filter and sorter management

- Replaced state management for tableFilter and tableSorter with refs for improved performance and reduced re-renders.
- Introduced tableData state to manage flattened data for display.
- Updated data fetching logic to reference current filter and sorter values from refs.
- Enhanced useEffect to flatten pages array for table display.

src/components/Dashboard/common/ObjectTable.jsx

@@ -88,8 +88,8 @@ const ObjectTable = forwardRef(
     const [, contextHolder] = message.useMessage()
     const tableRef = useRef(null)
     const model = getModelByName(type)
-    const [tableFilter, setTableFilter] = useState({})
+    const tableFilterRef = useRef({})
-    const [tableSorter, setTableSorter] = useState({})
+    const tableSorterRef = useRef({})
     const [initialized, setInitialized] = useState(false)
 
     // Table state
@@ -98,6 +98,7 @@ const ObjectTable = forwardRef(
     const [hasMore, setHasMore] = useState(true)
     const [loading, setLoading] = useState(true)
     const [lazyLoading, setLazyLoading] = useState(false)
+    const [tableData, setTableData] = useState([])
 
     const subscribedIdsRef = useRef([])
     // const [typeSubscribed, setTypeSubscribed] = useState(false)
@@ -159,17 +160,17 @@ const ObjectTable = forwardRef(
     const fetchData = useCallback(
       async (pageNum = 1, filter = null, sorter = null) => {
         if (filter == null) {
-          filter = tableFilter
+          filter = tableFilterRef.current
         } else {
-          setTableFilter(filter)
+          tableFilterRef.current = filter
         }
         if (sorter == null) {
-          sorter = tableSorter
+          sorter = tableSorterRef.current
         } else {
-          setTableSorter({
+          tableSorterRef.current = {
             field: sorter.field,
             order: sorter.order
-          })
+          }
         }
         console.log('Fetching data...')
         try {
@@ -213,15 +214,7 @@ const ObjectTable = forwardRef(
           throw error
         }
       },
-      [
+      [type, masterFilter, pageSize, onDataChange, fetchObjects]
-        type,
-        masterFilter,
-        pageSize,
-        tableFilter,
-        tableSorter,
-        onDataChange,
-        fetchObjects
-      ]
     )
 
     const loadNextPage = useCallback(() => {
@@ -480,8 +473,8 @@ const ObjectTable = forwardRef(
 
       if (hasChanged) {
         setPages([])
-        setTableFilter({})
+        tableFilterRef.current = {}
-        setTableSorter({})
+        tableSorterRef.current = {}
         setInitialized(false)
         setLoading(true)
         setLazyLoading(false)
@@ -560,6 +553,12 @@ const ObjectTable = forwardRef(
     useEffect(() => {
       pagesRef.current = pages
     }, [pages])
+
+    // Flatten pages array for table display
+    useEffect(() => {
+      setTableData(pages.flatMap((page) => page.items))
+    }, [pages])
+
     // Add columns in the order specified by model.columns
     model.columns.forEach((colName) => {
       const prop = modelProperties.find((p) => p.name === colName)
@@ -601,9 +600,8 @@ const ObjectTable = forwardRef(
         const isSortable = model.sorters && model.sorters.includes(prop.name)
 
         const columnConfig = {
-          sorter: isSortable,
+          sorter: isSortable ? { multiple: 1 } : undefined,
           title: prop.label,
-          dataIndex: prop.name,
           width: prop.columnWidth || width,
           fixed: isMobile ? undefined : fixed,
           key: prop.name,
@@ -663,9 +661,6 @@ const ObjectTable = forwardRef(
       })
     }
 
-    // Flatten pages array for table display
-    const tableData = pages.flatMap((page) => page.items)
-
     // Card view rendering
     const cardsContainerRef = useRef(null)