update table

apps/admin.saladeaula.digital/app/components/data-table/data-table.tsx

@@ -13,8 +13,10 @@ import {
 } from '@tanstack/react-table'
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
   type ReactNode
 } from 'react'
@@ -41,7 +43,7 @@ interface DataTableProps<TData, TValue> {
   sort: SortingState
   pageSize: number
   rowCount: number
-  hiddenColumn?: string[]
+  columnInvisibilityInit?: string[]
 }
 
 interface TableContextProps<TData> {
@@ -69,56 +71,76 @@ export function DataTable<TData, TValue>({
   pageSize,
   rowCount,
   setSelectedRows,
-  hiddenColumn = []
+  columnInvisibilityInit = []
 }: DataTableProps<TData, TValue>) {
   const [dataTable, setDataTable] = useState<TData[]>(data)
-  const columnVisibilityInit = Object.fromEntries(
+  const columnInvisibility = useMemo<VisibilityState>(
-    hiddenColumn.map((column) => [column, false])
+    () =>
+      Object.fromEntries(
+        columnInvisibilityInit.map((column) => [column, false])
+      ),
+    [columnInvisibilityInit]
   )
   const [searchParams, setSearchParams] = useSearchParams()
   const [columnVisibility, setColumnVisibility] =
-    useState<VisibilityState>(columnVisibilityInit)
+    useState<VisibilityState>(columnInvisibility)
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const sorting = useMemo(() => {
     const sortParam = searchParams.get('sort')
-  const sorting = sortParam
+
-    ? sortParam.split(',').map((s) => {
+    if (!sortParam) {
+      return sort
+    }
+
+    return sortParam.split(',').map((s) => {
       const [id, dir] = s.split(':')
       return { id, desc: dir === 'desc' }
     })
-    : sort
+  }, [searchParams, sort])
 
-  const setPagination = (updater: any) => {
+  const setPagination = useCallback(
+    (updater: any) => {
       const newState =
-      typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater
+        typeof updater === 'function'
+          ? updater({ pageIndex, pageSize })
+          : updater
 
       setRowSelection({})
-    setSearchParams((searchParams) => {
+      setSearchParams((prev) => {
-      searchParams.set('p', newState?.pageIndex.toString())
+        prev.set('p', newState?.pageIndex.toString())
-      searchParams.set('perPage', newState?.pageSize.toString())
+        prev.set('perPage', newState?.pageSize.toString())
-      return searchParams
+        return prev
       })
-  }
+    },
+    [pageIndex, pageSize, setSearchParams]
+  )
 
-  const setSorting = (updater: any) => {
+  const setSorting = useCallback(
+    (updater: any) => {
       const newSorting =
         typeof updater === 'function' ? updater(sorting) : updater
 
-    setSearchParams((searchParams) => {
+      setSearchParams((prev) => {
         if (newSorting.length) {
           const sort = newSorting
             .map((s: ColumnSort) => `${s.id}:${s.desc ? 'desc' : 'asc'}`)
             .join(',')
-        searchParams.set('sort', sort)
+          prev.set('sort', sort)
+        } else {
+          prev.delete('sort')
         }
-      return searchParams
+        return prev
       })
-  }
+    },
-
+    [sorting, setSearchParams]
+  )
   useEffect(() => {
     setDataTable(data)
   }, [data])
 
-  const table = useReactTable({
+  const tableConfig = useMemo(
+    () => ({
       data: dataTable,
       columns,
       rowCount,
@@ -145,12 +167,30 @@ export function DataTable<TData, TValue>({
           setDataTable((rows) => rows.filter((row: any) => row?.id !== rowId))
         }
       }
-  })
+    }),
+    [
+      dataTable,
+      columns,
+      rowCount,
+      sorting,
+      rowSelection,
+      columnVisibility,
+      setColumnVisibility,
+      pageIndex,
+      pageSize,
+      setSorting,
+      setPagination
+    ]
+  )
+
+  const table = useReactTable(tableConfig)
 
   useEffect(() => {
+    if (!setSelectedRows) return
+
     const selected = table.getSelectedRowModel().flatRows.map((r) => r.original)
-    setSelectedRows?.(selected)
+    setSelectedRows(selected)
-  }, [rowSelection])
+  }, [rowSelection, setSelectedRows, table])
 
   return (
     <TableContext value={{ table }}>