@wakastellar/ui 4.0.0 → 4.1.1

package/src/blocks/waka-doc-shell/index.tsx

@@ -45,7 +45,7 @@ export function WakaDocShell({
   }, [content])
 
   // Debounce onChange
-  const debounceRef = React.useRef<ReturnType<typeof setTimeout>>()
+  const debounceRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)
   const handleEditorChange = React.useCallback(
     (html: string) => {
       setEditorContent(html)

package/src/components/DataTable/DataTable.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { flexRender } from "@tanstack/react-table"
+import { flexRender, HeaderContext, CellContext } from "@tanstack/react-table"
 import { Loader2, AlertCircle } from "lucide-react"
 import { DataTableProps } from "./types"
 import { useDataTable } from "./hooks/useDataTable"
@@ -83,14 +83,14 @@ export function DataTable<TData>({
     if (selection) {
       const selectionColumn = {
         id: "select",
-        header: ({ table }: any) => (
+        header: ({ table }: HeaderContext<TData, unknown>) => (
           <Checkbox
             checked={table.getIsAllPageRowsSelected()}
             onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
             aria-label={t("datatable.selectAll", { defaultValue: "Select all" })}
           />
         ),
-        cell: ({ row }: any) => (
+        cell: ({ row }: CellContext<TData, unknown>) => (
           <Checkbox
             checked={row.getIsSelected()}
             onCheckedChange={(value) => row.toggleSelected(!!value)}
@@ -137,7 +137,7 @@ export function DataTable<TData>({
     const editColumn = {
       id: "edit-actions",
       header: () => t("datatable.actions", { defaultValue: "Actions" }),
-      cell: ({ row }: any) => {
+      cell: ({ row }: CellContext<TData, unknown>) => {
         const isEditing = editState.editingRowId === row.id
         
         if (isEditing) {
@@ -390,6 +390,8 @@ export function DataTable<TData>({
           <DataTablePagination
             table={table}
             pageSizeOptions={paginationConfig.pageSizeOptions}
+            onPageChange={paginationConfig.onPageChange}
+            onPageSizeChange={paginationConfig.onPageSizeChange}
           />
         )}
       </>

package/src/components/DataTable/DataTableAdvanced.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { flexRender } from "@tanstack/react-table"
+import { flexRender, HeaderContext, CellContext } from "@tanstack/react-table"
 import { Loader2, AlertCircle, ChevronDown, ChevronRight, GripVertical } from "lucide-react"
 import { DataTableProps } from "./types"
 import { useDataTableAdvanced } from "./hooks/useDataTableAdvanced"
@@ -118,14 +118,14 @@ export function DataTableAdvanced<TData>({
     if (selection) {
       const selectionColumn = {
         id: "select",
-        header: ({ table }: any) => (
+        header: ({ table }: HeaderContext<TData, unknown>) => (
           <Checkbox
             checked={table.getIsAllPageRowsSelected()}
             onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
             aria-label={t("datatable.selectAll", { defaultValue: "Select all" })}
           />
         ),
-        cell: ({ row }: any) => (
+        cell: ({ row }: CellContext<TData, unknown>) => (
           <Checkbox
             checked={row.getIsSelected()}
             onCheckedChange={(value) => row.toggleSelected(!!value)}
@@ -144,7 +144,7 @@ export function DataTableAdvanced<TData>({
       const expansionColumn = {
         id: "expand",
         header: () => null,
-        cell: ({ row }: any) => {
+        cell: ({ row }: CellContext<TData, unknown>) => {
           if (!row.getCanExpand()) return null
           
           return (
@@ -189,13 +189,6 @@ export function DataTableAdvanced<TData>({
     return cols
   }, [initialColumns, selection, rowExpansion, enableReorder, t])
 
-  // Debug: Vérifier les props de groupement et expansion
-  console.log("DataTableAdvanced - props:", {
-    grouping,
-    rowExpansion,
-    dataLength: data.length
-  })
-
   // Hook principal avancé
   const {
     table,
@@ -260,10 +253,11 @@ export function DataTableAdvanced<TData>({
   })
 
 
-  // Hook d'export
+  // Hook d'export. `useDataTableExport` ne lit qu'une projection structurelle
+  // minimale des colonnes (accessorKey/id/header/formatter) — cf. ExportColumn.
   const { exportData: exportDataFn, exportAll, exportSelected } = useDataTableExport({
     data,
-    columns,
+    columns: columns as unknown as Parameters<typeof useDataTableExport<TData>>[0]["columns"],
     exportConfig: typeof enableExport === "object" ? enableExport : undefined,
   })
 
@@ -285,7 +279,7 @@ export function DataTableAdvanced<TData>({
     const editColumn = {
       id: "edit-actions",
       header: () => t("datatable.actions", { defaultValue: "Actions" }),
-      cell: ({ row }: any) => {
+      cell: ({ row }: CellContext<TData, unknown>) => {
         const isEditing = editState.editingRowId === row.id
         
         if (isEditing) {
@@ -339,7 +333,6 @@ export function DataTableAdvanced<TData>({
   const handleImport = React.useCallback(async () => {
     try {
       const importedData = await importWithUI()
-      console.log("Données importées:", importedData)
     } catch (error) {
       console.error("Erreur lors de l'import:", error)
     }
@@ -574,13 +567,6 @@ export function DataTableAdvanced<TData>({
                 rowExpansion?.enabled ? table.getExpandedRowModel().rows : 
                 table.getRowModel().rows
               
-              console.log("DataTableAdvanced - rendering rows:", {
-                totalRows: rows.length,
-                grouping: grouping?.columns,
-                rowExpansion: rowExpansion?.enabled,
-                firstRow: rows[0]
-              })
-              
               return rows.map((row, index) => {
                 const isGroupRow = row.getIsGrouped()
                 const isExpanded = row.getIsExpanded()

package/src/components/DataTable/DataTableColumnResizer.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { Header, Column } from "@tanstack/react-table"
 import { cn } from "./utils"
 
 /**
@@ -11,8 +12,8 @@ export function DataTableColumnResizer<TData>({
   column,
   className,
 }: {
-  header: any
-  column: any
+  header: Header<TData, unknown>
+  column: Column<TData, unknown>
   className?: string
 }) {
   const [isResizing, setIsResizing] = React.useState(false)
@@ -28,7 +29,12 @@ export function DataTableColumnResizer<TData>({
     const handleMouseMove = (e: MouseEvent) => {
       const deltaX = e.clientX - startX
       const newWidth = Math.max(50, startWidth + deltaX) // Largeur minimale de 50px
-      column.setSize(newWidth)
+      // `setSize` n'est pas exposé par l'API publique de Column (TanStack v8) :
+      // on conserve l'appel runtime existant via un accès typé sans recourir à `any`.
+      const resizable = column as Column<TData, unknown> & {
+        setSize: (size: number) => void
+      }
+      resizable.setSize(newWidth)
     }
 
     const handleMouseUp = () => {

package/src/components/DataTable/DataTableContextMenu.tsx

@@ -73,7 +73,7 @@ export function DataTableContextMenu<TData>({
 }: DataTableContextMenuProps<TData>) {
   const [isOpen, setIsOpen] = React.useState(false)
 
-  const handleAction = React.useCallback((action: any) => {
+  const handleAction = React.useCallback((action: { onClick: (row: TData) => void }) => {
     action.onClick(row)
     setIsOpen(false)
   }, [row])
@@ -83,7 +83,7 @@ export function DataTableContextMenu<TData>({
       onCopy(row)
     } else {
       // Copie par défaut des données de la ligne
-      const text = Object.entries(row as any)
+      const text = Object.entries(row as Record<string, unknown>)
         .map(([key, value]) => `${key}: ${value}`)
         .join("\n")
       navigator.clipboard.writeText(text)

package/src/components/DataTable/DataTableEditCell.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { localDateKey, parseLocalDate } from "../../utils/local-date"
 import { Input } from "../input"
 import { Textarea } from "../textarea"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select"
@@ -28,12 +29,12 @@ export interface EditCellConfig {
 }
 
 export interface DataTableEditCellProps<TData> {
-  value: any
+  value: unknown
   field: keyof TData
   config: EditCellConfig
   isEditing: boolean
   error?: string
-  onChange: (value: any) => void
+  onChange: (value: unknown) => void
   onStartEdit: () => void
   onSave: () => void
   onCancel: () => void
@@ -101,7 +102,7 @@ export function DataTableEditCell<TData>({
       case "textarea":
         return (
           <Textarea
-            value={tempValue || ""}
+            value={tempValue != null ? String(tempValue) : ""}
             onChange={(e) => setTempValue(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder={config.placeholder}
@@ -114,7 +115,7 @@ export function DataTableEditCell<TData>({
       case "select":
         return (
           <Select
-            value={tempValue || ""}
+            value={tempValue != null ? String(tempValue) : ""}
             onValueChange={setTempValue}
             disabled={config.disabled}
           >
@@ -163,16 +164,19 @@ export function DataTableEditCell<TData>({
                 )}
               >
                 <CalendarIcon className="mr-2 h-4 w-4" />
-                {tempValue ? format(new Date(tempValue), "PPP") : config.placeholder}
+                {tempValue ? format(parseLocalDate(tempValue as string | Date), "PPP") : config.placeholder}
               </Button>
             </PopoverTrigger>
             <PopoverContent className="w-auto p-0" align="start">
               <Calendar
                 mode="single"
-                selected={tempValue ? new Date(tempValue) : undefined}
+                selected={tempValue ? parseLocalDate(tempValue as string | Date) : undefined}
                 onSelect={(date) => {
                   if (date) {
-                    setTempValue(config.type === "datetime" ? date.toISOString() : date.toISOString().split('T')[0])
+                    // Calendar returns a LOCAL date. For a date-only value use the
+                    // local key (toISOString would shift to the previous day in
+                    // +offset zones); datetime keeps the full UTC instant.
+                    setTempValue(config.type === "datetime" ? date.toISOString() : localDateKey(date))
                     setIsDatePickerOpen(false)
                   }
                 }}
@@ -186,7 +190,7 @@ export function DataTableEditCell<TData>({
         return (
           <Input
             type={config.type}
-            value={tempValue || ""}
+            value={tempValue != null ? String(tempValue) : ""}
             onChange={(e) => setTempValue(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder={config.placeholder}
@@ -236,7 +240,7 @@ export function DataTableEditCell<TData>({
 }
 
 // Fonction utilitaire pour afficher la valeur selon le type
-function renderDisplayValue(value: any, config: EditCellConfig): React.ReactNode {
+function renderDisplayValue(value: unknown, config: EditCellConfig): React.ReactNode {
   if (value === null || value === undefined) {
     return <span className="text-muted-foreground italic">Non défini</span>
   }
@@ -256,24 +260,24 @@ function renderDisplayValue(value: any, config: EditCellConfig): React.ReactNode
     case "date":
     case "datetime":
       try {
-        const date = new Date(value)
+        const date = new Date(value as string | number | Date)
         return format(date, config.type === "datetime" ? "PPP p" : "PPP")
       } catch {
-        return value
+        return String(value)
       }
 
     case "select":
       const option = config.options?.find(opt => opt.value === value)
-      return option ? option.label : value
+      return option ? option.label : String(value)
 
     case "textarea":
       return (
         <div className="max-w-xs">
-          <p className="truncate">{value}</p>
+          <p className="truncate">{String(value)}</p>
         </div>
       )
 
     default:
-      return value
+      return String(value)
   }
 }

package/src/components/DataTable/DataTableFilters.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Table, Column } from "@tanstack/react-table"
+import { Table, Column, ColumnFiltersState } from "@tanstack/react-table"
 import { X, Plus, Filter, Save, Trash2, ChevronDown } from "lucide-react"
 import { Button } from "../button"
 import { Input } from "../input"
@@ -43,16 +43,31 @@ interface DataTableFiltersProps<TData> {
   table: Table<TData>
   filters?: FilterConfig[]
   position?: FilterPosition
-  onFiltersChange?: (filters: any[]) => void
+  onFiltersChange?: (filters: ColumnFiltersState) => void
 }
 
 interface ActiveFilter {
   columnId: string
   operator: string
-  value: any
+  value: unknown
   label: string
 }
 
+/** Plage numérique pour les filtres de type "range" */
+interface RangeValue {
+  min: string
+  max: string
+}
+
+/** Plage de dates pour les filtres de type "daterange" */
+interface DateRangeValue {
+  from: string
+  to: string
+}
+
+/** Valeur d'un champ de filtre selon son type */
+type FilterFieldValue = string | boolean | RangeValue | DateRangeValue
+
 /**
  * Composant de filtrage avancé pour DataTable
  * Supporte autocomplete, multi-select, date ranges, etc.
@@ -135,7 +150,7 @@ export function DataTableFilters<TData>({
   }
 
   // Appliquer un filtre
-  const addFilter = (filter: FilterConfig, operator: string, value: any) => {
+  const addFilter = (filter: FilterConfig, operator: string, value: unknown) => {
     const column = table.getColumn(filter.column || filter.id)
     if (!column) return
 
@@ -151,7 +166,7 @@ export function DataTableFilters<TData>({
     // Appliquer le filtre à la table
     column.setFilterValue({ operator, value })
 
-    onFiltersChange?.([...activeFilters, newFilter])
+    onFiltersChange?.([...activeFilters, newFilter] as unknown as ColumnFiltersState)
   }
 
   // Supprimer un filtre
@@ -165,7 +180,7 @@ export function DataTableFilters<TData>({
 
     const newFilters = activeFilters.filter((_, i) => i !== index)
     setActiveFilters(newFilters)
-    onFiltersChange?.(newFilters)
+    onFiltersChange?.(newFilters as unknown as ColumnFiltersState)
   }
 
   // Réinitialiser tous les filtres
@@ -187,15 +202,15 @@ export function DataTableFilters<TData>({
     )
     
     // Initialiser la valeur par défaut selon le type de filtre
-    const getDefaultValue = () => {
-      if (filter.defaultValue !== undefined) return filter.defaultValue
+    const getDefaultValue = (): FilterFieldValue => {
+      if (filter.defaultValue !== undefined) return filter.defaultValue as FilterFieldValue
       if (filter.type === "range") return { min: "", max: "" }
       if (filter.type === "daterange") return { from: "", to: "" }
       if (filter.type === "checkbox") return false
       return ""
     }
-    
-    const [value, setValue] = React.useState<any>(getDefaultValue())
+
+    const [value, setValue] = React.useState<FilterFieldValue>(getDefaultValue())
     const [selectedValues, setSelectedValues] = React.useState<string[]>([])
     const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState(false)
 
@@ -209,9 +224,11 @@ export function DataTableFilters<TData>({
       if (filter.type === "multiselect") {
         isValid = Array.isArray(finalValue) && finalValue.length > 0
       } else if (filter.type === "range") {
-        isValid = finalValue.min !== "" || finalValue.max !== ""
+        const range = finalValue as RangeValue
+        isValid = range.min !== "" || range.max !== ""
       } else if (filter.type === "daterange") {
-        isValid = finalValue.from !== "" || finalValue.to !== ""
+        const dateRange = finalValue as DateRangeValue
+        isValid = dateRange.from !== "" || dateRange.to !== ""
       } else if (filter.type === "checkbox") {
         isValid = true // Toujours valide pour les checkboxes
       } else {
@@ -258,7 +275,7 @@ export function DataTableFilters<TData>({
               <PopoverTrigger asChild>
                 <Input
                   placeholder={filter.placeholder || t("datatable.filters.enterValue", { defaultValue: "Enter value..." })}
-                  value={value}
+                  value={value as string}
                   onChange={(e) => {
                     setValue(e.target.value)
                     setIsAutocompleteOpen(true)
@@ -273,7 +290,7 @@ export function DataTableFilters<TData>({
                     <CommandEmpty>{t("datatable.filters.noResults", { defaultValue: "No results" })}</CommandEmpty>
                     <CommandGroup className="max-h-64 overflow-auto">
                       {uniqueValues
-                        .filter((v) => v.toLowerCase().includes(value.toLowerCase()))
+                        .filter((v) => v.toLowerCase().includes((value as string).toLowerCase()))
                         .slice(0, 50)
                         .map((v) => (
                           <CommandItem
@@ -295,7 +312,7 @@ export function DataTableFilters<TData>({
         )}
 
         {filter.type === "select" && (
-          <Select value={value} onValueChange={setValue}>
+          <Select value={value as string} onValueChange={setValue}>
             <SelectTrigger className="h-9">
               <SelectValue placeholder={filter.placeholder} />
             </SelectTrigger>
@@ -346,7 +363,7 @@ export function DataTableFilters<TData>({
         {filter.type === "date" && (
           <Input
             type="date"
-            value={value}
+            value={value as string}
             onChange={(e) => setValue(e.target.value)}
             className="h-9"
           />
@@ -357,15 +374,15 @@ export function DataTableFilters<TData>({
             <Input
               type="number"
               placeholder="Min"
-              value={value.min || ""}
-              onChange={(e) => setValue({ ...value, min: e.target.value })}
+              value={(value as RangeValue).min || ""}
+              onChange={(e) => setValue({ ...(value as RangeValue), min: e.target.value })}
               className="h-9"
             />
             <Input
               type="number"
               placeholder="Max"
-              value={value.max || ""}
-              onChange={(e) => setValue({ ...value, max: e.target.value })}
+              value={(value as RangeValue).max || ""}
+              onChange={(e) => setValue({ ...(value as RangeValue), max: e.target.value })}
               className="h-9"
             />
           </div>
@@ -376,15 +393,15 @@ export function DataTableFilters<TData>({
             <Input
               type="date"
               placeholder={t("datatable.filters.from", { defaultValue: "From" })}
-              value={value.from || ""}
-              onChange={(e) => setValue({ ...value, from: e.target.value })}
+              value={(value as DateRangeValue).from || ""}
+              onChange={(e) => setValue({ ...(value as DateRangeValue), from: e.target.value })}
               className="h-9"
             />
             <Input
               type="date"
               placeholder={t("datatable.filters.to", { defaultValue: "To" })}
-              value={value.to || ""}
-              onChange={(e) => setValue({ ...value, to: e.target.value })}
+              value={(value as DateRangeValue).to || ""}
+              onChange={(e) => setValue({ ...(value as DateRangeValue), to: e.target.value })}
               className="h-9"
             />
           </div>
@@ -438,7 +455,7 @@ export function DataTableFilters<TData>({
                   <span className="font-medium">{filter.label}</span>
                   <span className="text-muted-foreground mx-2">{filter.operator}</span>
                   <span className="text-primary truncate">
-                    {Array.isArray(filter.value) ? filter.value.join(", ") : filter.value}
+                    {Array.isArray(filter.value) ? filter.value.join(", ") : String(filter.value)}
                   </span>
                 </div>
                 <Button

package/src/components/DataTable/DataTableGrouping.tsx

@@ -1,11 +1,21 @@
 "use client"
 
 import * as React from "react"
-import { flexRender } from "@tanstack/react-table"
+import { flexRender, Row, Table, Column, CellContext } from "@tanstack/react-table"
 import { ChevronDown, ChevronRight, Minus, Plus } from "lucide-react"
 import { Button } from "../button"
 import { cn } from "./utils"
 
+/**
+ * Métadonnées de groupe accédées au runtime mais absentes de l'API publique
+ * `Row` de TanStack v8 (conservées telles quelles pour ne pas changer le runtime).
+ */
+type GroupedRow<TData> = Omit<Row<TData>, "groupingColumnId"> & {
+  groupingColumnId: string
+  groupingColumn: Column<TData, unknown>
+  getAggregationValue: () => Record<string, unknown> | null | undefined
+}
+
 /**
  * Composant pour l'affichage des groupes dans le DataTable
  */
@@ -14,8 +24,8 @@ export function DataTableGrouping<TData>({
   table,
   className,
 }: {
-  row: any
-  table: any
+  row: GroupedRow<TData>
+  table: Table<TData>
   className?: string
 }) {
   const [isExpanded, setIsExpanded] = React.useState(row.getIsExpanded())
@@ -47,7 +57,9 @@ export function DataTableGrouping<TData>({
         <span className="font-medium">
           {flexRender(
             row.groupingColumn.columnDef.cell,
-            row.getGroupingValue()
+            // Runtime preserved (0-arg call as before `any`); the value is forwarded
+            // as the flexRender context, so cast the method shape and the result.
+            (row.getGroupingValue as () => unknown)() as CellContext<TData, unknown>
           )}
         </span>
         <span className="text-sm text-muted-foreground">
@@ -66,8 +78,8 @@ export function DataTableGroupTotals<TData>({
   table,
   className,
 }: {
-  row: any
-  table: any
+  row: GroupedRow<TData>
+  table: Table<TData>
   className?: string
 }) {
   const aggregations = row.getAggregationValue()
@@ -97,7 +109,7 @@ export function DataTableGroupingControls<TData>({
   onGroupingChange,
   className,
 }: {
-  table: any
+  table: Table<TData>
   groupingColumns: string[]
   onGroupingChange: (columns: string[]) => void
   className?: string
@@ -122,15 +134,15 @@ export function DataTableGroupingControls<TData>({
     <div className={cn("flex items-center gap-2", className)}>
       <span className="text-sm font-medium">Group by:</span>
       {table.getAllColumns()
-        .filter((column: any) => column.getCanGroup())
-        .map((column: any) => (
+        .filter((column) => column.getCanGroup())
+        .map((column) => (
           <Button
             key={column.id}
             variant={selectedColumns.includes(column.id) ? "default" : "outline"}
             size="sm"
             onClick={() => handleColumnToggle(column.id)}
           >
-            {column.columnDef.header}
+            {column.columnDef.header as React.ReactNode}
           </Button>
         ))}
       {selectedColumns.length > 0 && (

package/src/components/DataTable/DataTablePagination.tsx

@@ -11,12 +11,16 @@ interface DataTablePaginationProps<TData> {
   table: Table<TData>
   pageSizeOptions?: number[]
   showInfo?: boolean
+  onPageChange?: (page: number) => void
+  onPageSizeChange?: (size: number) => void
 }
 
 export function DataTablePagination<TData>({
   table,
   pageSizeOptions = [25, 50, 100, 500],
   showInfo = true,
+  onPageChange,
+  onPageSizeChange,
 }: DataTablePaginationProps<TData>) {
   const { t } = useTranslation()
   
@@ -52,7 +56,9 @@ export function DataTablePagination<TData>({
           <Select
             value={`${pageSize}`}
             onValueChange={(value) => {
-              table.setPageSize(Number(value))
+              const newSize = Number(value)
+              table.setPageSize(newSize)
+              onPageSizeChange?.(newSize)
             }}
           >
             <SelectTrigger className="h-8 w-[70px]">
@@ -78,40 +84,54 @@ export function DataTablePagination<TData>({
             variant="outline"
             size="icon"
             className="h-8 w-8"
-            onClick={() => table.setPageIndex(0)}
+            onClick={() => {
+              table.setPageIndex(0)
+              onPageChange?.(0)
+            }}
             disabled={!table.getCanPreviousPage()}
           >
             <ChevronsLeft className="h-4 w-4" />
             <span className="sr-only">{t("datatable.pagination.firstPage", { defaultValue: "First page" })}</span>
           </Button>
-          
+
           <Button
             variant="outline"
             size="icon"
             className="h-8 w-8"
-            onClick={() => table.previousPage()}
+            onClick={() => {
+              const previousIndex = pageIndex - 1
+              table.previousPage()
+              onPageChange?.(previousIndex)
+            }}
             disabled={!table.getCanPreviousPage()}
           >
             <ChevronLeft className="h-4 w-4" />
             <span className="sr-only">{t("datatable.pagination.previousPage", { defaultValue: "Previous page" })}</span>
           </Button>
-          
+
           <Button
             variant="outline"
             size="icon"
             className="h-8 w-8"
-            onClick={() => table.nextPage()}
+            onClick={() => {
+              const nextIndex = pageIndex + 1
+              table.nextPage()
+              onPageChange?.(nextIndex)
+            }}
             disabled={!table.getCanNextPage()}
           >
             <ChevronRight className="h-4 w-4" />
             <span className="sr-only">{t("datatable.pagination.nextPage", { defaultValue: "Next page" })}</span>
           </Button>
-          
+
           <Button
             variant="outline"
             size="icon"
             className="h-8 w-8"
-            onClick={() => table.setPageIndex(pageCount - 1)}
+            onClick={() => {
+              table.setPageIndex(pageCount - 1)
+              onPageChange?.(pageCount - 1)
+            }}
             disabled={!table.getCanNextPage()}
           >
             <ChevronsRight className="h-4 w-4" />