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,88 +71,126 @@ 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 sortParam = searchParams.get('sort')
+
-  const sorting = sortParam
+  const sorting = useMemo(() => {
-    ? sortParam.split(',').map((s) => {
+    const sortParam = searchParams.get('sort')
-        const [id, dir] = s.split(':')
+
-        return { id, desc: dir === 'desc' }
+    if (!sortParam) {
+      return sort
+    }
+
+    return sortParam.split(',').map((s) => {
+      const [id, dir] = s.split(':')
+      return { id, desc: dir === 'desc' }
+    })
+  }, [searchParams, sort])
+
+  const setPagination = useCallback(
+    (updater: any) => {
+      const newState =
+        typeof updater === 'function'
+          ? updater({ pageIndex, pageSize })
+          : updater
+
+      setRowSelection({})
+      setSearchParams((prev) => {
+        prev.set('p', newState?.pageIndex.toString())
+        prev.set('perPage', newState?.pageSize.toString())
+        return prev
       })
-    : sort
+    },
+    [pageIndex, pageSize, setSearchParams]
+  )
 
-  const setPagination = (updater: any) => {
+  const setSorting = useCallback(
-    const newState =
+    (updater: any) => {
-      typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater
+      const newSorting =
-
+        typeof updater === 'function' ? updater(sorting) : updater
-    setRowSelection({})
-    setSearchParams((searchParams) => {
-      searchParams.set('p', newState?.pageIndex.toString())
-      searchParams.set('perPage', newState?.pageSize.toString())
-      return searchParams
-    })
-  }
-
-  const setSorting = (updater: any) => {
-    const newSorting =
-      typeof updater === 'function' ? updater(sorting) : updater
-
-    setSearchParams((searchParams) => {
-      if (newSorting.length) {
-        const sort = newSorting
-          .map((s: ColumnSort) => `${s.id}:${s.desc ? 'desc' : 'asc'}`)
-          .join(',')
-        searchParams.set('sort', sort)
-      }
-      return searchParams
-    })
-  }
 
+      setSearchParams((prev) => {
+        if (newSorting.length) {
+          const sort = newSorting
+            .map((s: ColumnSort) => `${s.id}:${s.desc ? 'desc' : 'asc'}`)
+            .join(',')
+          prev.set('sort', sort)
+        } else {
+          prev.delete('sort')
+        }
+        return prev
+      })
+    },
+    [sorting, setSearchParams]
+  )
   useEffect(() => {
     setDataTable(data)
   }, [data])
 
-  const table = useReactTable({
+  const tableConfig = useMemo(
-    data: dataTable,
+    () => ({
-    columns,
+      data: dataTable,
-    rowCount,
+      columns,
-    state: {
+      rowCount,
+      state: {
+        sorting,
+        rowSelection,
+        columnVisibility,
+        pagination: {
+          pageIndex,
+          pageSize
+        }
+      },
+      manualSorting: true,
+      manualPagination: true,
+      enableRowSelection: true,
+      getRowId: (row: any) => row.id,
+      getCoreRowModel: getCoreRowModel(),
+      onRowSelectionChange: setRowSelection,
+      onSortingChange: setSorting,
+      onColumnVisibilityChange: setColumnVisibility,
+      onPaginationChange: setPagination,
+      meta: {
+        removeRow: (rowId: string) => {
+          setDataTable((rows) => rows.filter((row: any) => row?.id !== rowId))
+        }
+      }
+    }),
+    [
+      dataTable,
+      columns,
+      rowCount,
       sorting,
       rowSelection,
       columnVisibility,
-      pagination: {
+      setColumnVisibility,
-        pageIndex,
+      pageIndex,
-        pageSize
+      pageSize,
-      }
+      setSorting,
-    },
+      setPagination
-    manualSorting: true,
+    ]
-    manualPagination: true,
+  )
-    enableRowSelection: true,
+
-    getRowId: (row: any) => row.id,
+  const table = useReactTable(tableConfig)
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnVisibilityChange: setColumnVisibility,
-    onPaginationChange: setPagination,
-    meta: {
-      removeRow: (rowId: string) => {
-        setDataTable((rows) => rows.filter((row: any) => row?.id !== rowId))
-      }
-    }
-  })
 
   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 }}>