How to align right the value of react NumberFormat

Question

I have a reactjs code which calculates some cost value and shows them on some accordion rows as shown here:

the code for showing this is something like:

const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%',        
    },
    .......

    headerItem: {
        padding: '0 5px',
        color: '#333'
    },
}));

<Typography className={classes.headerTitleTxt} variant="subtitle1">% Cost: </Typography>
                                        <NumberFormat
                                            className={classes.headerItem}
                                            value={props.prjData.cost}
                                            suffix={'%'}
                                            type="text"
                                            thousandSeparator={','}
                                            displayType="text"
                                            decimalScale={2}
                                        />

How can I change this code to align the numbers to right. I mean how can I print the numbers here such that they line up, such as:

    % Cost:   4.43% 
    % Cost:   7.09% 
    % Cost:  43.18%

Thanks in advance

vhtc · Accepted Answer · 2021-01-29 14:18:38Z

1

You can do that easily with flexbox. Example: https://codesandbox.io/s/material-demo-forked-p9f30?file=/demo.js

answered Jan 29, 2021 at 14:18

vhtc

8608 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to align right the value of react NumberFormat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related