How to right justify on decimal point #790

candcconsulting · 2022-10-28T15:06:31Z

candcconsulting
Oct 28, 2022

The examples here
https://itwin.github.io/iTwinUI-react/?path=/story/core-table--basic
are great but it is a common requirement to right justify on decimal places
If I add text-align as this discussion
https://stackoverflow.com/questions/53605342/how-to-make-some-columns-align-left-and-some-column-align-center-in-react-table
columns: [
{
accessor: "firstName",
Header: "S Column 1",
style: {
textAlign: 'right'
}
}
]
Then the text is not right aligned ... if it is added to the cell
<span style = {{textAlign: "right"}} title={props.value}>{props.value}
Then the does not fill the

of the cell
Is this possible and if so which style should be used ?

veekeys · 2022-10-28T15:45:50Z

veekeys
Oct 28, 2022
Collaborator

Hey @candcconsulting,

We are using flex on our table, so textAlign will not work.
For horizontal alignment, you should use justifyContent. So in your case, try justifyContent: 'flex-end'.
Read more about flexbox model and specifically justify-content here
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-justify-content.

We could update our storybook to provide at least one story with numbers aligned to the right.
Feel free to create a PR with such update too!

4 replies

candcconsulting Oct 28, 2022
Author

Does not seem to pass down

accessor: "count",
Cell: SkeletonCell,
Header: "Count",
disableResizing: false,
Filter: tableFilters.NumberRangeFilter(),
style : {justifyContent: "flex-end"}

mayank99 Oct 28, 2022
Maintainer

you need to use the Cell property and apply the styles on the component you pass there

candcconsulting Oct 29, 2022
Author

Thanks ... I am not sure I did it the way @mayank99 proposed as I did not seem to have access to the cell component. However, I did see in the samples that there was a DefaultCell

So I added this code to a cell renderer
export const numericCellRenderer = (
props: CellRendererProps,

) => {
return (
<DefaultCell
{...props}
style={{ justifyContent: "flex-end" }}
/>
);
};
Which works OK ... I need to add some space
If you would like to show an example of how to do it through Cell that would be great, but an example of aligned on decimal point would be fantastic ...

candcconsulting Oct 29, 2022
Author

and this is ultimately what seemed to work best


export const numericCellRenderer = (
  props: CellRendererProps<any>,

) => {
  return (
    <DefaultCell
      {...props}
      style={{ justifyContent: "flex-end"}}
    />
  );
};

export type NumericalCellProps = PropsWithChildren<{
  value: any;
  row: {
    original: any;
  };
  style : any;
}>
export const NumericCell = (props: NumericalCellProps) => {
  
  if (Object.keys(props.row.original).length !== 0) {
    // props.style = {...props.style, ...{justifyContent: "flex-end"}}
    return (props.children ?? (
      <span  title={props.value}>{new Intl.NumberFormat('en-EN', { minimumFractionDigits: 3, maximumFractionDigits: 3 }).format(props.value)}&nbsp;</span>
    )) as React.ReactElement;
  }
  return <Body isSkeleton={true}>Fetching</Body>;
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to right justify on decimal point #790

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to right justify on decimal point #790

candcconsulting Oct 28, 2022

Replies: 1 comment · 4 replies

veekeys Oct 28, 2022 Collaborator

candcconsulting Oct 28, 2022 Author

mayank99 Oct 28, 2022 Maintainer

candcconsulting Oct 29, 2022 Author

candcconsulting Oct 29, 2022 Author

candcconsulting
Oct 28, 2022

Replies: 1 comment 4 replies

veekeys
Oct 28, 2022
Collaborator

candcconsulting Oct 28, 2022
Author

mayank99 Oct 28, 2022
Maintainer

candcconsulting Oct 29, 2022
Author

candcconsulting Oct 29, 2022
Author