Adding 00's at the end of a number in Material UI Datagrid

Question

I'm right now working on a React.js app which uses the DataGrid component from Material UI (MUI) library to show data. My problem is that I need to make full numbers to be displayed in full form with zeroes at the end, so for example 625 should display as 625.00, and 1,687.5 needs to be displayed as 1,687.50 and so on.

My current code:

import React, { useState } from "react";
import { DataGrid, enUS, GridColDef, GridRowId } from "@mui/x-data-grid";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";

import ContextMenu from "../../Components/Debtors/ContextMenu";
import MailerDialog from "../MassMailer/MailerDialog";
import SetupFollowUp from "../FollowUp/SetupFollowUpDialog";
import ClearFollowUp from "../FollowUp/ClearFollowUpDialog";
import OpenItems from "../../Pages/OpenItems";

const columns: GridColDef[] = [
  {
    field: "CustomerName",
    headerName: "Customer Name",
    width: 150,
    editable: false,
    align: "right",

  },
  {
    field: "CustomerNumber",
    headerName: "Customer Number",
    width: 150,
    editable: false,
    align: "right",

  },
  {
    field: "FollowUp",
    headerName: "Follow Up",
    type: "date",
    width: 150,
    editable: true,
    align: "right",

  },
  {
    field: "Overdue",
    headerName: "Overdue",
    width: 150,
    align: "right",
    type: 'number',

  },
  {
    field: "NotDue",
    headerName: "Not due",
    width: 150,
    align: "right",
    type: 'number',

  },
  {
    field: "Range1",
    headerName: "1-7",
    width: 150,
    align: "right",
    type: 'number',

  },
  {
    field: "Range2",
    headerName: "8-30",
    width: 150,
    align: "right",
    type: 'number',

  },
  {
    field: "Range3",
    headerName: "31-60",
    width: 150,
    align: "right",
    type: 'number',

  },
  {
    field: "Range4",
    headerName: "61-90",
    width: 150,
    align: "right",
    type: 'number',

  },
  {
    field: "Range5",
    headerName: "91-120",
    width: 150,
    align: "right",
    type: 'number',

  },
  {
    field: "Range6",
    headerName: "121-∞",
    width: 150,
    align: "right",
    type: 'number',

  },
  {
    field: "SourceDbName",
    headerName: "sourceDbName",
    width: 150,
    align: "right",

  },
  {
    field: "Free1",
    headerName: "Free1",
    width: 150,
    align: "right",

  },
  {
    field: "PersonResponsible",
    headerName: "Person Responsible",
    width: 150,
    align: "right",

  },
  {
    field: "SalesResponsible",
    headerName: "Sales Responsible",
    width: 150,
    align: "right",

  },
  {
    field: "PaymentTerms",
    headerName: "Payment Terms",
    width: 150,
    align: "right",

  },
];

export default function DataGridDemo(props) {
  const [currentRow, setCurrentRow] = useState<GridRowId>();
  const [currentSourceDbName, setCurrentSourceDbName] = useState<Number>();
  const [currentCustomerName, setCurrentCustomerName] = useState<string>();
  const [x, setX] = useState<number>(0);
  const [y, setY] = useState<number>(0);
  const [contextMenuVisible, setContextMenuVisible] = useState<Boolean>(false);
  const [openCustomerProfile, setOpenCustomerProfile] =
    useState<Boolean>(false);
  const [openMassMailerDialog, setOpenMassMailerDialog] =
    useState<Boolean>(false);
  const [selectedRows, setSelectedRows] = useState([]);
  const [selectedCustomerNumbers, setSselectedCustomerNumbers] = useState([]);
  const [openFollowUpDialog, setOpenFollowUpDialog] = useState<boolean>(false);
  const [openClearFollowUpDialog, setOpenClearFollowUpDialog] =
    useState<boolean>(false);

  function getSelectedRows(newSelection) {
    setSselectedCustomerNumbers(newSelection);
    let checkedRow = props.debtors.filter((item) =>
      newSelection.includes(item.CustomerNumber)
    );
    setSelectedRows(checkedRow);
  }

  return (
    <div>
      <ContextMenu
        x={x}
        y={y}
        id={currentRow}
        visible={contextMenuVisible}
        setContextMenuVisible={setContextMenuVisible}
        currentSourceDbName={currentSourceDbName}
        setOpenCustomerProfile={setOpenCustomerProfile}
        setOpenMassMailerDialog={setOpenMassMailerDialog}
        setOpenFollowUpDialog={setOpenFollowUpDialog}
        setOpenClearFollowUpDialog={setOpenClearFollowUpDialog}
      />
      <OpenItems
        id={currentRow}
        ageDate={props.ageDate}
        dbName={currentSourceDbName}
        openCustomerProfile={openCustomerProfile}
        setOpenCustomerProfile={setOpenCustomerProfile}
        getCustostomersReport={props.getCustostomersReport}
        currentCustomerName={currentCustomerName}
      />
      <SetupFollowUp
        openFollowUpDialog={openFollowUpDialog}
        setOpenFollowUpDialog={setOpenFollowUpDialog}
        sourceDbName={currentSourceDbName}
        custNumber={selectedCustomerNumbers}
        getCustostomersReport={props.getCustostomersReport}
      />
      <ClearFollowUp
        openClearFollowUpDialog={openClearFollowUpDialog}
        setOpenClearFollowUpDialog={setOpenClearFollowUpDialog}
        sourceDbName={currentSourceDbName}
        custNumber={selectedCustomerNumbers}
        getCustostomersReport={props.getCustostomersReport}
      />
      <MailerDialog
        ageDate={props.ageDate}
        selectedCoCodes={props.selectedCoCodes}
        open={openMassMailerDialog}
        setOpenMassMailerDialog={setOpenMassMailerDialog}
        selectedRows={selectedRows}
      />
      <Box px={3}>
        <Grid container>
          <Grid item xs={12} md={12}>
            <DataGrid
              onRowDoubleClick={(row, event) => {
                setCurrentSourceDbName(row.row.SourceDbName);
                setCurrentRow(row.id);
                setCurrentCustomerName(row.row.CustomerName);
                setX(event.clientX);
                setY(event.clientY);
                setContextMenuVisible(true);
              }}
              loading={props.loading}
              getRowId={(row) => row.CustomerNumber}
              rows={props.debtors}
              columns={columns}
              pageSize={30}
              rowsPerPageOptions={[100]}
              checkboxSelection
              disableSelectionOnClick
              autoHeight
              rowHeight={20}
              onSelectionModelChange={(newSelection) => {
                getSelectedRows(newSelection);
              }}
            />
          </Grid>
        </Grid>
      </Box>
    </div>
  );
}

With my current solution, it's displaying like this:

Does anyone knows how to do that?

EDIT: After adding:

    valueFormatter: ({ value }) => value.toFixed(2),

I am getting zeroes at the end, but I'm loosing another thing I needed to have, that is comma after thousands and dot in front of decimals. So I am still looking for optimal solution.

EDIT2: I have achieved desired effect by using accounting-js library.

Answer 1

In JavaScript, the Number class has a method, toFixed, which allows you to specify the number of decimal points to round a number to:

E.g.

const rounded = (x) => x.toFixed(2);

console.log(rounded(5)) // 5.00