add datetable cnfcnpj

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

@@ -0,0 +1,40 @@
+import type { Row, Column } from '@tanstack/react-table'
+import {
+  formatCPF,
+  formatCNPJ,
+  isValidCPF,
+  isValidCNPJ
+} from '@brazilian-utils/brazilian-utils'
+
+interface DataTableColumnDatetimeProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  row: Row<TData>
+  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
+}: DataTableColumnDatetimeProps<TData, TValue>) {
+  // @ts-ignore
+  const { accessorKey } = column.columnDef
+  const value = row.getValue(accessorKey) as string
+
+  if (isValidCPF(value)) {
+    return formatCPF(value)
+  }
+
+  if (isValidCNPJ(value)) {
+    return formatCNPJ(value)
+  }
+
+  return <></>
+}

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

@@ -0,0 +1,27 @@
+import type { Row, Column } from '@tanstack/react-table'
+
+interface DataTableColumnDatetimeProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  row: Row<TData>
+  column: Column<TData, TValue>
+}
+
+const formatted = new Intl.NumberFormat('pt-BR', {
+  style: 'currency',
+  currency: 'BRL'
+})
+
+export function DataTableColumnCurrency<TData, TValue>({
+  row,
+  column
+}: DataTableColumnDatetimeProps<TData, TValue>) {
+  // @ts-ignore
+  const { accessorKey } = column.columnDef
+  const value = row.getValue(accessorKey) as number
+
+  if (value) {
+    return formatted.format(value)
+  }
+
+  return <></>
+}

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

@@ -0,0 +1,30 @@
+import type { Row, Column } from '@tanstack/react-table'
+
+interface DataTableColumnDatetimeProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  row: Row<TData>
+  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 DataTableColumnDatetime<TData, TValue>({
+  row,
+  column
+}: DataTableColumnDatetimeProps<TData, TValue>) {
+  // @ts-ignore
+  const { accessorKey } = column.columnDef
+  const value = row.getValue(accessorKey)
+
+  if (value) {
+    return formatted.format(new Date(value as string))
+  }
+
+  return <></>
+}

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

@@ -32,6 +32,7 @@ export function DataTableColumnHeader<TData, TValue>({
       onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
     >
       <span>{title}</span>
+
       {column.getIsSorted() === 'desc' ? (
         <ChevronDownIcon />
       ) : column.getIsSorted() === 'asc' ? (

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

@@ -256,7 +256,7 @@ export function DataTable<TData, TValue>({
                     <TableRow
                       key={row.id}
                       data-state={row.getIsSelected() && 'selected'}
-                      className="has-[[data-state=open]]:bg-muted/50"
+                      className="has-data-[state=open]:bg-muted/50"
                     >
                       {row.getVisibleCells().map((cell) => (
                         <TableCell

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

@@ -1,3 +1,6 @@
 export { DataTableColumnHeader } from './column-header'
+export { DataTableColumnDatetime } from './column-datetime'
+export { DataTableColumnCpfCnpj } from './column-cpfcnpj'
+export { DataTableColumnCurrency } from './column-currency'
 export { DataTable, useDataTable } from './data-table'
 export { DataTableViewOptions } from './view-options'