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?