update

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

@@ -11,14 +11,15 @@ import { cn } from '@repo/ui/lib/utils'
 interface DataTableColumnHeaderProps<TData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>
-  title: string
 }
 
 export function DataTableColumnHeader<TData, TValue>({
   column,
-  title,
   className
 }: DataTableColumnHeaderProps<TData, TValue>) {
+  // @ts-ignore
+  const title = column.columnDef?.meta?.title ?? column.id
+
   if (!column.getCanSort()) {
     return <div className={cn(className)}>{title}</div>
   }

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

@@ -10,7 +10,13 @@ import {
   type Table,
   type VisibilityState
 } from '@tanstack/react-table'
-import { createContext, useEffect, useState, type ReactNode } from 'react'
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode
+} from 'react'
 import { useSearchParams } from 'react-router'
 
 import { Card, CardContent } from '@repo/ui/components/ui/card'
@@ -36,7 +42,17 @@ interface DataTableProps<TData, TValue> {
   hiddenColumn?: string[]
 }
 
-export const TableContext = createContext<{ table: Table<any> } | null>(null)
+const TableContext = createContext<{ table: Table<any> } | null>(null)
+
+export function useDataTable<TData>() {
+  const ctx = useContext(TableContext) as { table: Table<TData> } | null
+
+  if (!ctx) {
+    throw new Error('TableContext is null')
+  }
+
+  return ctx
+}
 
 export function DataTable<TData, TValue>({
   children,
@@ -68,6 +84,9 @@ export function DataTable<TData, TValue>({
     const newState =
       typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater
 
+    onRowSelectionChange?.([])
+    setRowSelection({})
+
     setSearchParams((searchParams) => {
       searchParams.set('p', newState?.pageIndex.toString())
       searchParams.set('perPage', newState?.pageSize.toString())

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

@@ -1,8 +1,5 @@
 'use client'
 
-import { useContext } from 'react'
-
-import { type Table } from '@tanstack/react-table'
 import { Columns2Icon } from 'lucide-react'
 
 import { Button } from '@repo/ui/components/ui/button'
@@ -13,20 +10,14 @@ import {
   DropdownMenuTrigger
 } from '@repo/ui/components/ui/dropdown-menu'
 import { cn } from '@repo/ui/lib/utils'
-import { TableContext } from './data-table'
+import { useDataTable } from './data-table'
 
 export function DataTableViewOptions<TData>({
   className
 }: {
   className: string
 }) {
-  const ctx = useContext(TableContext) as { table: Table<TData> } | null
-
-  if (!ctx) {
-    throw new Error('TableContext is null')
-  }
-
-  const { table } = ctx
+  const { table } = useDataTable()
 
   return (
     <DropdownMenu>
@@ -43,13 +34,16 @@ export function DataTableViewOptions<TData>({
               typeof column.accessorFn !== 'undefined' && column.getCanHide()
           )
           .map((column) => {
+            // @ts-ignore
+            const title = column.columnDef?.meta?.title ?? column.id
+
             return (
               <DropdownMenuCheckboxItem
                 key={column.id}
                 checked={column.getIsVisible()}
                 onCheckedChange={(value) => column.toggleVisibility(!!value)}
               >
-                {column.columnDef?.meta?.title ?? column.id}
+                {title}
               </DropdownMenuCheckboxItem>
             )
           })}