In my React application I'm using Material UI table to display the list of products. I would like to align the price by decimal point.
Align number values by decimal material ui table react
Viewed 1213
1 Answers
Create a function like this code and you can pass number in numberFormat. You can change maxSpace value and paddingRight multiply value whatever you need. Check this working example code here
const numberFormat = num => {
let len = 0;
if (num.toString().split(".")[1] >= 0) {
len = num.toString().split(".")[1].length;
}
const maxSpace = 4;
return <div style={{ paddingRight: (maxSpace - len) * 8 }}>{num}</div>;
};
Check this image, you can change paddingRight for every row as your need
Related