Align number values by decimal material ui table react

Question

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.

Answer 1

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