CODEWITHSUNDEEP
reactjs
Emilia Jones
Emilia Jones

Reputation: 25

How to align right the value of react NumberFormat

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

enter image description 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

Upvotes: 0

Views: 1881

Answers (1)

vhtc
vhtc

Reputation: 850

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

Upvotes: 1

Related Questions