feat: ability to align individual table column items [FC-1234] (#2458)

* feat: [Table] enhancements

* fix: minior change

* feat: snapshot update

* fix req change

* feat: snapshot update

* chore: remove allowmultiline

* chore: update table header

* chore: add text align

* chore: table header

* chore: update snaps

* chore: update table header icon

* feat: add changeset

* chore: update changeset

* chore: review changes & add align in table footer

* chore: update snap

* chore: review changes & updated snap

---------

Co-authored-by: Sumitmaithani <[email protected]>

Author: tewarig

.changeset/sweet-apes-roll.md

@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': minor
+---
+
+feat: ability to align individual table column items 

packages/blade/src/components/Table/TableBody.web.tsx

@@ -256,7 +256,8 @@ export const CellWrapper = styled(BaseBox)<{
   $rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
   showStripedRows?: boolean;
   hasPadding?: boolean;
-}>(({ theme, $rowDensity, showStripedRows, hasPadding = true }) => {
+  textAlign?: TableCellProps['textAlign'];
+}>(({ theme, $rowDensity, showStripedRows, hasPadding = true, textAlign }) => {
   const rowBackgroundTransition = `background-color ${makeMotionTime(
     getIn(theme.motion, tableRow.backgroundColorMotionDuration),
   )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;
@@ -272,6 +273,7 @@ export const CellWrapper = styled(BaseBox)<{
       minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity])),
       height: '100%',
       width: '100%',
+      justifyContent: textAlign,
       ...(!showStripedRows && {
         borderBottomWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),
         borderBottomColor: getIn(theme.colors, tableRow.borderColor),
@@ -281,7 +283,12 @@ export const CellWrapper = styled(BaseBox)<{
   };
 });
 
-const _TableCell = ({ children, _hasPadding, ...rest }: TableCellProps): React.ReactElement => {
+const _TableCell = ({
+  children,
+  textAlign,
+  _hasPadding,
+  ...rest
+}: TableCellProps): React.ReactElement => {
   const isChildrenString = typeof children === 'string';
   const { selectionType, rowDensity, showStripedRows, backgroundColor } = useTableContext();
   const isSelectable = selectionType !== 'none';
@@ -303,6 +310,7 @@ const _TableCell = ({ children, _hasPadding, ...rest }: TableCellProps): React.R
           alignItems="center"
           hasPadding={_hasPadding}
           flex={1}
+          textAlign={textAlign}
           // when a direct string child is passed we want to disable pointer events
           // for custom cells components, consumers can handle pointer events themselves
           pointerEvents={isChildrenString && isSelectable ? 'none' : 'auto'}

packages/blade/src/components/Table/TableFooter.web.tsx

@@ -79,7 +79,8 @@ const TableFooterRow = assignWithoutSideEffects(_TableFooterRow, {
 const StyledFooterCell = styled(FooterCell)<{
   $backgroundColor: TableBackgroundColors;
   $rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
-}>(({ theme, $backgroundColor, $rowDensity }) => ({
+  $textAlign?: string;
+}>(({ theme, $backgroundColor, $rowDensity, $textAlign }) => ({
   '&&&': {
     height: '100%',
     backgroundColor: getIn(theme.colors, $backgroundColor),
@@ -98,18 +99,24 @@ const StyledFooterCell = styled(FooterCell)<{
       paddingRight: makeSpace(getIn(theme, tableRow.paddingRight[$rowDensity])),
       minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity])),
       alignItems: 'center',
+      justifyContent: $textAlign ? $textAlign : 'left',
     },
   },
 }));
 
-const _TableFooterCell = ({ children, ...rest }: TableFooterCellProps): React.ReactElement => {
+const _TableFooterCell = ({
+  children,
+  textAlign,
+  ...rest
+}: TableFooterCellProps): React.ReactElement => {
   const isChildrenString = typeof children === 'string';
   const { backgroundColor, rowDensity } = useTableContext();
 
   return (
     <StyledFooterCell
       $backgroundColor={backgroundColor}
       $rowDensity={rowDensity}
+      $textAlign={textAlign}
       {...metaAttribute({ name: MetaConstants.TableFooterCell })}
       {...makeAnalyticsAttribute(rest)}
     >

packages/blade/src/components/Table/TableHeader.web.tsx

@@ -99,8 +99,11 @@ const StyledHeaderCell = styled(HeaderCell)<{
   $backgroundColor: TableBackgroundColors;
   $rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
   $hasPadding: boolean;
-}>(({ theme, $isSortable, $backgroundColor, $rowDensity, $hasPadding }) => ({
+  $textAlign: 'left' | 'center' | 'right';
+}>(({ theme, $isSortable, $backgroundColor, $rowDensity, $hasPadding, $textAlign }) => ({
   '&&&': {
+    display: $textAlign ? 'flex' : 'block',
+    justifyContent: $textAlign ? 'space-between' : 'initial',
     height: '100%',
     backgroundColor: getIn(theme.colors, $backgroundColor),
     borderBottomWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),
@@ -114,7 +117,7 @@ const StyledHeaderCell = styled(HeaderCell)<{
       backgroundColor: getIn(theme.colors, tableHeader.backgroundColor),
       display: 'flex',
       flexDirection: 'row',
-      justifyContent: 'space-between',
+      justifyContent: $textAlign ? $textAlign : 'space-between',
       alignItems: 'center',
       height: '100%',
       paddingLeft: $hasPadding
@@ -133,6 +136,7 @@ const _TableHeaderCell = ({
   children,
   headerKey,
   _hasPadding = true,
+  textAlign,
   ...rest
 }: TableHeaderCellProps): React.ReactElement => {
   const {
@@ -152,6 +156,7 @@ const _TableHeaderCell = ({
       $backgroundColor={backgroundColor}
       $rowDensity={headerRowDensity ?? rowDensity}
       $hasPadding={_hasPadding}
+      $textAlign={textAlign}
       onClick={() => {
         if (isSortable) {
           toggleSort(headerKey);
@@ -160,15 +165,17 @@ const _TableHeaderCell = ({
       {...metaAttribute({ name: MetaConstants.TableHeaderCell })}
       {...makeAnalyticsAttribute(rest)}
     >
-      {isChildrenString ? (
-        <Text size="medium" weight="medium" color="surface.text.gray.normal">
-          {children}
-        </Text>
-      ) : (
-        children
-      )}
+      <BaseBox display="flex" flexGrow={1} justifyContent={textAlign}>
+        {isChildrenString ? (
+          <Text size="medium" weight="medium" color="surface.text.gray.normal">
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </BaseBox>
       {isSortable && (
-        <BaseBox paddingLeft="spacing.2" backgroundColor="transparent">
+        <BaseBox paddingLeft="spacing.2" backgroundColor="transparent" flexShrink={0}>
           <SortIcon
             isSorted={currentSortedState.sortKey === headerKey}
             isSortReversed={currentSortedState.isSortReversed}