chore(dependencies): update multiple packages to latest versions (#342)

- Upgraded `@types/react` to `19.1.12` and `@types/react-dom` to `19.1.9` for improved type definitions.
- Bumped `react-i18next` to `^15.7.3` for localization fixes.
- Updated `@manypkg/cli` to `^0.25.1` for dependency management improvements.
- Incremented `@sentry/nextjs` to `^10.8.0` and `stripe` to `^18.5.0` to incorporate recent enhancements.
- Adjusted `ai` to `5.0.28` and `@ai-sdk/openai` to `^2.0.23` for AI-related updates.
- Introduced sorting improvements and code examples in `DataTable` for server-side and client-side capabilities.

packages/ui/package.json

@@ -28,8 +28,8 @@
     "@supabase/supabase-js": "2.55.0",
     "@tanstack/react-query": "5.85.5",
     "@tanstack/react-table": "^8.21.3",
-    "@types/react": "19.1.11",
-    "@types/react-dom": "19.1.8",
+    "@types/react": "19.1.12",
+    "@types/react-dom": "19.1.9",
     "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
     "eslint": "^9.34.0",
@@ -38,7 +38,7 @@
     "prettier": "^3.6.2",
     "react-day-picker": "^9.9.0",
     "react-hook-form": "^7.62.0",
-    "react-i18next": "^15.7.2",
+    "react-i18next": "^15.7.3",
     "sonner": "^2.0.7",
     "tailwindcss": "4.1.12",
     "tailwindcss-animate": "^1.0.7",

packages/ui/src/makerkit/data-table.tsx

@@ -8,6 +8,7 @@ import {
   Cell,
   flexRender,
   getCoreRowModel,
+  getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
 import type {
@@ -21,8 +22,10 @@ import type {
   VisibilityState,
 } from '@tanstack/react-table';
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronUp,
   ChevronsLeft,
   ChevronsRight,
 } from 'lucide-react';
@@ -87,6 +90,7 @@ interface ReactTableProps<T extends DataItem> {
   }) => (props: React.PropsWithChildren<object>) => React.ReactNode;
   noResultsMessage?: React.ReactNode;
   forcePagination?: boolean; // Force pagination to show even when pageCount <= 1
+  manualSorting?: boolean; // Default true for server-side sorting, set false for client-side sorting
 }
 
 export function DataTable<RecordData extends DataItem>({
@@ -115,6 +119,7 @@ export function DataTable<RecordData extends DataItem>({
   rowSelection: controlledRowSelection,
   sticky = false,
   forcePagination = false,
+  manualSorting = true,
 }: ReactTableProps<RecordData>) {
   // TODO: remove when https://github.com/TanStack/table/issues/5567 gets fixed
   'use no memo';
@@ -149,10 +154,11 @@ export function DataTable<RecordData extends DataItem>({
     getRowId,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
     enableColumnPinning: true,
     enableRowSelection: true,
     manualPagination: true,
-    manualSorting: true,
+    manualSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: (updater) => {
       if (typeof updater === 'function') {
@@ -350,12 +356,42 @@ export function DataTable<RecordData extends DataItem>({
                     }}
                     key={header.id}
                   >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
+                    {header.isPlaceholder ? null : (
+                      <div
+                        className={cn(
+                          'flex items-center gap-2',
+                          header.column.getCanSort()
+                            ? 'hover:bg-accent/50 -mx-3 cursor-pointer rounded px-3 py-1 select-none'
+                            : '',
+                        )}
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        {flexRender(
                           header.column.columnDef.header,
                           header.getContext(),
                         )}
+                        {header.column.getCanSort() && (
+                          <div className="flex flex-col">
+                            <ChevronUp
+                              className={cn(
+                                'h-3 w-3',
+                                header.column.getIsSorted() === 'asc'
+                                  ? 'text-foreground'
+                                  : 'text-muted-foreground/50',
+                              )}
+                            />
+                            <ChevronDown
+                              className={cn(
+                                '-mt-1 h-3 w-3',
+                                header.column.getIsSorted() === 'desc'
+                                  ? 'text-foreground'
+                                  : 'text-muted-foreground/50',
+                              )}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    )}
                   </TableHead>
                 );
               })}