update tables

packages/ui/src/components/data-table/column-cpfcnpj.tsx

@@ -12,14 +12,6 @@ interface DataTableColumnDatetimeProps<TData, TValue>
   column: Column<TData, TValue>
 }
 
-const formatted = new Intl.DateTimeFormat('pt-BR', {
-  day: '2-digit',
-  month: '2-digit',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit'
-})
-
 export function DataTableColumnCpfCnpj<TData, TValue>({
   row,
   column

packages/ui/src/components/data-table/column-header-sort.tsx

@@ -8,15 +8,15 @@ import {
 import { Button } from '@repo/ui/components/ui/button'
 import { cn } from '@repo/ui/lib/utils'
 
-interface DataTableColumnHeaderProps<TData, TValue>
+interface DataTableColumnHeaderSortProps<TData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>
 }
 
-export function DataTableColumnHeader<TData, TValue>({
+export function DataTableColumnHeaderSort<TData, TValue>({
   column,
   className
-}: DataTableColumnHeaderProps<TData, TValue>) {
+}: DataTableColumnHeaderSortProps<TData, TValue>) {
   // @ts-ignore
   const title = column.columnDef?.meta?.title ?? column.id
 

packages/ui/src/components/data-table/column-select.tsx

@@ -0,0 +1,43 @@
+import type { Table, Row } from '@tanstack/react-table'
+
+import { Checkbox } from '../ui/checkbox'
+
+interface DataTableColumnHeaderSelectProps<TData>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  table: Table<TData>
+}
+
+export function DataTableColumnHeaderSelect<TData>({
+  table
+}: DataTableColumnHeaderSelectProps<TData>) {
+  return (
+    <Checkbox
+      checked={
+        table.getIsAllPageRowsSelected() ||
+        (table.getIsSomePageRowsSelected() && 'indeterminate')
+      }
+      onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+      className="cursor-pointer"
+      aria-label="Selecionar tudo"
+    />
+  )
+}
+
+interface DataTableColumnSelectProps<TData>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  row: Row<TData>
+}
+
+export function DataTableColumnSelect<TData>({
+  row
+}: DataTableColumnSelectProps<TData>) {
+  return (
+    <Checkbox
+      checked={row.getIsSelected()}
+      disabled={!row.getCanSelect()}
+      onCheckedChange={(value) => row.toggleSelected(!!value)}
+      className="cursor-pointer"
+      aria-label="Selecionar linha"
+    />
+  )
+}

packages/ui/src/components/data-table/index.ts

@@ -1,4 +1,8 @@
-export { DataTableColumnHeader } from './column-header'
+export { DataTableColumnHeaderSort } from './column-header-sort'
+export {
+  DataTableColumnHeaderSelect,
+  DataTableColumnSelect
+} from './column-select'
 export { DataTableColumnDatetime } from './column-datetime'
 export { DataTableColumnCpfCnpj } from './column-cpfcnpj'
 export { DataTableColumnCurrency } from './column-currency'

packages/ui/src/components/data-table/view-options.tsx

@@ -15,7 +15,7 @@ import { useDataTable } from './data-table'
 export function DataTableViewOptions<TData>({
   className
 }: {
-  className: string
+  className?: string
 }) {
   const { table } = useDataTable()