From a9b7ef3074e4e2be26f58c4c16acaee48ff1de61 Mon Sep 17 00:00:00 2001
From: luizakp <luiza.puccinelli06@gmail.com>
Date: Wed, 17 Apr 2024 16:17:04 -0300
Subject: [PATCH] chore: format us number

---
 src/components/DataTable/SWRDataTable/index.tsx | 7 ++++++-
 src/lib/formatNumber.ts                         | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/DataTable/SWRDataTable/index.tsx b/src/components/DataTable/SWRDataTable/index.tsx
index 59dce86..6a52906 100644
--- a/src/components/DataTable/SWRDataTable/index.tsx
+++ b/src/components/DataTable/SWRDataTable/index.tsx
@@ -2,7 +2,7 @@
 import React from "react";
 import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons";
 
-import { Trans } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
 import { Badge, Checkbox, Table } from "#/components/ui";
 import { SectionTitle } from "#/components/SectionTitle";
@@ -18,6 +18,7 @@ import { useSWRDataTable } from "../useSWRDataTable";
 import { DataTableHeader } from "./DataTableHeader";
 import { DataTableBody } from "./DataTableBody";
 import { deserializeQuery } from "#/lib/serializeQuery";
+import { formatNumber } from "#/lib";
 
 export const formatParamsToDataTable = (params, searchKey) => {
   const { columnFilters = {}, pageIndex, pageSize, sorting } = params;
@@ -51,6 +52,7 @@ export const formatParamsToDataTable = (params, searchKey) => {
 
 export const renderDataTableCell = ({ filters, column, row, selectedRows }) => {
   const value = row.getValue(column.columnDef.accessorKey);
+  const { i18n } = useTranslation();
 
   const displayAs =
     column.columnDef.field_options?.display_type || column.columnDef.type;
@@ -101,6 +103,9 @@ export const renderDataTableCell = ({ filters, column, row, selectedRows }) => {
     case "datetime":
       return <div>{formatDateTime(value)}</div>;
     case "number":
+      if (i18n.language === "en") {
+        return <div>{formatNumber(value, 1, "decimal", "standard")}</div>;
+      }
       return <div>{value}</div>;
     case "actions":
       return <DataTableRowActions row={row} column={column} />;
diff --git a/src/lib/formatNumber.ts b/src/lib/formatNumber.ts
index bb21e7f..2bf8cca 100644
--- a/src/lib/formatNumber.ts
+++ b/src/lib/formatNumber.ts
@@ -8,6 +8,7 @@ export const formatNumber = (
   lessThanThresholdToReplace = 0.001
 ) => {
   if (number === 0) return "0";
+  if (!number) return "0";
   if (Math.abs(Number(number)) < lessThanThresholdToReplace) {
     return `< ${lessThanThresholdToReplace.toLocaleString("en-US")}`;
   }