[Docs] : Showing the right alignment of the numbers in data table component

[Kritvi-bhatia]

Acceptance criteria

Vertical alignment for numbers in data table

• [ ] There are two different use cases for left and right text alignments. We need to add content for when to use each use case in the data table component documentation.

---

Use case

• Left alignment makes the number easier to scan as all the other columns are also left aligned and the whole data table look more consistent (Port column)

• Right alignment makes it easier to read (for example when you have decimals, larger figures like millions etc) (Port column)

---

References

For references, I'm attaching 2 screenshots one from Material design system and other from IBM product which has a section about this under their data table extension.

Material Design

IBM Product (data table extension)

[tay1orjones]

I see you've labelled this as just docs, which I think make sense. I don't think we need to make this a prop on TableCell, but to achieve this developers will have to place text-align: end on every TableCell that needs it, along with the TableHeader at the top of the column.

We could add a section to the storybook documentation in DataTable.mdx to clearly state this and highlight it's the approach to achieve the design spec outlined on the website.