CODEWITHSUNDEEP
reactjshtml-tablematerial-ui
praveen guda
praveen guda

Reputation: 207

Align number values by decimal material ui table react

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. table

Upvotes: 4

Views: 2097

Answers (1)

Arpit
Arpit

Reputation: 1495

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

enter image description here

Upvotes: 2

Related Questions