unlink user

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

@@ -44,22 +44,26 @@ interface DataTableProps<TData, TValue> {
   hiddenColumn?: string[]
 }
 
-const TableContext = createContext<{ table: Table<any> } | null>(null)
+interface TableContextProps<TData> {
+  table: Table<TData>
+}
+
+const TableContext = createContext<TableContextProps<any> | null>(null)
 
 export function useDataTable<TData>() {
-  const ctx = useContext(TableContext) as { table: Table<TData> } | null
+  const ctx = useContext(TableContext)
 
   if (!ctx) {
     throw new Error('TableContext is null')
   }
 
-  return ctx
+  return ctx as { table: Table<TData> }
 }
 
 export function DataTable<TData, TValue>({
+  data,
   children,
   columns,
-  data,
   sort,
   pageIndex,
   pageSize,
@@ -67,10 +71,10 @@ export function DataTable<TData, TValue>({
   setSelectedRows,
   hiddenColumn = []
 }: DataTableProps<TData, TValue>) {
+  const [dataTable, setDataTable] = useState<TData[]>(data)
   const columnVisibilityInit = Object.fromEntries(
     hiddenColumn.map((column) => [column, false])
   )
-
   const [searchParams, setSearchParams] = useSearchParams()
   const [columnVisibility, setColumnVisibility] =
     useState<VisibilityState>(columnVisibilityInit)
@@ -110,8 +114,12 @@ export function DataTable<TData, TValue>({
     })
   }
 
+  useEffect(() => {
+    setDataTable(data)
+  }, [data])
+
   const table = useReactTable({
-    data,
+    data: dataTable,
     columns,
     rowCount,
     state: {
@@ -131,7 +139,12 @@ export function DataTable<TData, TValue>({
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     onColumnVisibilityChange: setColumnVisibility,
-    onPaginationChange: setPagination
+    onPaginationChange: setPagination,
+    meta: {
+      removeRow: (rowId: string) => {
+        setDataTable((rows) => rows.filter((row: any) => row?.id !== rowId))
+      }
+    }
   })
 
   useEffect(() => {
@@ -159,6 +172,7 @@ export function DataTable<TData, TValue>({
                           key={header.id}
                           className={cn(
                             'p-2.5',
+                            // @ts-ignore
                             header.column.columnDef.meta?.className
                           )}
                         >
@@ -187,6 +201,7 @@ export function DataTable<TData, TValue>({
                           key={cell.id}
                           className={cn(
                             'p-2.5',
+                            // @ts-ignore
                             cell.column.columnDef.meta?.className
                           )}
                         >