update select

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

@@ -27,7 +27,7 @@ export function DataTableColumnHeader<TData, TValue>({
     <Button
       variant="ghost"
       size="sm"
-      className={cn('-ml-3 h-8 cursor-pointer', className)}
+      className={cn('-ml-3 cursor-pointer', className)}
       onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
     >
       <span>{title}</span>

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

@@ -3,7 +3,6 @@
 import {
   flexRender,
   getCoreRowModel,
-  getSortedRowModel,
   useReactTable,
   type ColumnDef,
   type ColumnSort,
@@ -89,6 +88,8 @@ export function DataTable<TData, TValue>({
     })
   }
 
+  // table.getSelectedRowModel().flatRows.map((row) => row.original)
+
   const table = useReactTable({
     data,
     columns,
@@ -105,6 +106,7 @@ export function DataTable<TData, TValue>({
     manualSorting: true,
     manualPagination: true,
     enableRowSelection: true,
+    getRowId: (row: any) => row.id,
     getCoreRowModel: getCoreRowModel(),
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

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

@@ -1,5 +1,5 @@
 import { type Table } from '@tanstack/react-table'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 
 import { Button } from '@repo/ui/components/ui/button'
 import {
@@ -21,63 +21,54 @@ export function DataTablePagination<TData>({
   const rowCount = table.getRowCount()
 
   return (
-    <div className="flex items-center">
-      <div className="text-muted-foreground flex-1 text-sm">
-        {table.getFilteredSelectedRowModel().rows.length} de{' '}
-        {table.getFilteredRowModel().rows.length} linha(s) selecionada(s).
+    <div className="flex items-center justify-end gap-3 lg:gap-6">
+      <div className="flex items-center gap-2">
+        <p className="text-sm font-medium hidden lg:block">Itens por página</p>
+        <Select
+          value={String(table.getState().pagination.pageSize)}
+          onValueChange={(value) => {
+            table.setPageSize(Number(value))
+          }}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder={table.getState().pagination.pageSize} />
+          </SelectTrigger>
+          <SelectContent side="top">
+            {[12, 25, 50, 100].map((pageSize) => (
+              <SelectItem key={pageSize} value={String(pageSize)}>
+                {pageSize}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
 
-      <div className="flex items-center gap-3 lg:gap-6">
-        <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium hidden lg:block">
-            Itens por página
-          </p>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value) => {
-              table.setPageSize(Number(value))
-            }}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {[12, 25, 50, 100].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+      <div className="text-sm font-medium">
+        {(pageIndex + 1) * pageSize - pageSize + 1}-
+        {Math.min((pageIndex + 1) * pageSize, rowCount)}
+      </div>
 
-        <div className="text-sm font-medium">
-          {(pageIndex + 1) * pageSize - pageSize + 1}-
-          {Math.min((pageIndex + 1) * pageSize, rowCount)}
-        </div>
-
-        <div className="flex items-center gap-2 *:cursor-pointer">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Ir para a página anterior</span>
-            <ChevronLeft />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Ir para a próxima página</span>
-            <ChevronRight />
-          </Button>
-        </div>
+      <div className="flex items-center gap-2 *:cursor-pointer">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <span className="sr-only">Ir para a página anterior</span>
+          <ChevronLeftIcon />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          <span className="sr-only">Ir para a próxima página</span>
+          <ChevronRightIcon />
+        </Button>
       </div>
     </div>
   )