update tables

apps/insights.saladeaula.digital/app/routes/_app.orgs._index/columns.tsx

@@ -1,30 +1,26 @@
 'use client'
 
-import { formatCNPJ } from '@brazilian-utils/brazilian-utils'
 import { type ColumnDef } from '@tanstack/react-table'
 
 import { Abbr } from '@repo/ui/components/abbr'
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { initials } from '@repo/ui/lib/utils'
+import {
+  DataTableColumnCpfCnpj,
+  DataTableColumnDatetime,
+  DataTableColumnHeaderSelect,
+  DataTableColumnSelect
+} from '@repo/ui/components/data-table'
+import type { Org } from '@repo/ui/routes/orgs/data'
 
-// This type is used to define the shape of our data.
-// You can use a Zod schema here if you want.
-export type Org = {
-  id: string
-  name: string
-  email: string
-  cnpj?: string
-}
-
-const formatted = new Intl.DateTimeFormat('pt-BR', {
-  day: '2-digit',
-  month: '2-digit',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit'
-})
+export type { Org }
 
 export const columns: ColumnDef<Org>[] = [
+  {
+    id: 'select',
+    header: DataTableColumnHeaderSelect,
+    cell: DataTableColumnSelect
+  },
   {
     header: 'Empresa',
     cell: ({ row }) => {
@@ -49,25 +45,13 @@ export const columns: ColumnDef<Org>[] = [
     }
   },
   {
+    accessorKey: 'cnpj',
     header: 'CNPJ',
-    cell: ({ row }) => {
-      const { cnpj } = row.original
-      return <>{formatCNPJ(cnpj)}</>
-    }
+    cell: DataTableColumnCpfCnpj
   },
   {
+    accessorKey: 'createDate',
     header: 'Cadastrado em',
-    meta: {
-      className: 'w-1/12'
-    },
-    cell: ({ row }) => {
-      const { createDate } = row.original
-
-      if (!createDate) {
-        return <></>
-      }
-
-      return formatted.format(new Date(createDate))
-    }
+    cell: DataTableColumnDatetime
   }
 ]