feat: add headerAlignment prop to Column component

nexxtway · Dec 16, 2021 · 03a041b · 03a041b
1 parent cac2c08
commit 03a041b
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 0 deletions.
diff --git a/src/components/Column/index.d.ts b/src/components/Column/index.d.ts
@@ -2,6 +2,7 @@ import { ReactNode, ComponentType } from 'react';
 
 export interface ColumnProps<P> {
     header?: ReactNode;
+    headerAlignment?: 'left' | 'center' | 'right';
     component?: ComponentType<P>;
     field?: string;
     sortable?: boolean;

diff --git a/src/components/Column/index.js b/src/components/Column/index.js
@@ -18,6 +18,10 @@ Column.propTypes = {
      * The header of the column. It could be just a `String` with text or a component with a desired content.
      */
     header: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    /**
+     * The alignment of the text of the column header
+     */
+    headerAlignment: PropTypes.oneOf(['left', 'center', 'right']),
     /**
      * The component class or function that is going to be use to render
      * the content of each cell on this column. By default the cell is
@@ -62,6 +66,7 @@ Column.propTypes = {
 
 Column.defaultProps = {
     header: undefined,
+    headerAlignment: 'left',
     component: undefined,
     field: undefined,
     sortable: false,

diff --git a/src/components/Column/readme.md b/src/components/Column/readme.md
@@ -136,3 +136,69 @@ const StatusBadge = ({ value }) => <Badge label={value} variant="lightest" style
         </Table>
     </div>
 ```
+
+# Column header alignment
+##### It is possible to align the content of each column header using the `headerAlignment` prop. Valid values are `left` (default), `center` and `right`.
+
+```js
+import React from 'react';
+import { Table, Column, ButtonGroup, ButtonIcon, Badge } from 'react-rainbow-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+
+const data = [
+    {
+        name: 'Leandro Torres',
+        company: 'Nexxtway',
+        email: '[email protected]',
+        status: 'verified',
+    },
+    {
+        name: 'Jose Torres',
+        company: 'Google',
+        email: '[email protected]',
+        status: 'verified',
+    },
+    {
+        name: 'Reinier',
+        company: 'Nexxtway',
+        email: '[email protected]',
+        status: 'verified',
+    },
+    {
+        name: 'Sara',
+        company: 'Nexxtway',
+        email: '[email protected]',
+        status: 'verified',
+    },
+    {
+        name: 'Tahimi',
+        company: 'Nexxtway',
+        email: '[email protected]',
+        status: 'verified',
+    },
+];
+
+const badgeStyles = { color: '#1de9b6' };
+
+const StatusBadge = ({ value }) => <Badge label={value} variant="lightest" style={badgeStyles} />;
+
+    <div className="rainbow-p-bottom_xx-large">
+        <GlobalHeader className="rainbow-m-bottom_xx-large" src="images/user/user3.jpg">
+            <ButtonGroup className="rainbow-m-right_medium">
+                <ButtonIcon variant="border-filled" disabled icon={<FontAwesomeIcon icon={faCog} />} />
+                <ButtonIcon
+                    variant="border-filled"
+                    disabled
+                    icon={<FontAwesomeIcon icon={faEllipsisV} />}
+                />
+            </ButtonGroup>
+        </GlobalHeader>
+        <Table data={data} keyField="name">
+            <Column header="Name" field="name" headerAlignment="center" />
+            <Column header="Status" field="status" component={StatusBadge} headerAlignment="center" />
+            <Column header="Company" field="company" headerAlignment="center" />
+            <Column header="Email" field="email" headerAlignment="center" />
+        </Table>
+    </div>
+```
diff --git a/src/components/Table/head/header.js b/src/components/Table/head/header.js
@@ -65,6 +65,7 @@ export default class Header extends Component {
             tableId,
             maxRowSelection,
             bulkSelection,
+            headerAlignment,
         } = this.props;
 
         const headerStyles = {
@@ -100,6 +101,7 @@ export default class Header extends Component {
                     <StyledHeaderContainer
                         className="rainbow-table_header-container"
                         role="presentation"
+                        headerAlignment={headerAlignment}
                         onClick={this.handleSort}
                     >
                         <StyledContent
@@ -146,6 +148,7 @@ Header.propTypes = {
     tableId: PropTypes.string.isRequired,
     maxRowSelection: PropTypes.number,
     bulkSelection: PropTypes.oneOf(['none', 'some', 'all']),
+    headerAlignment: PropTypes.oneOf(['left', 'center', 'right']),
 };
 
 Header.defaultProps = {
@@ -166,4 +169,5 @@ Header.defaultProps = {
     onDeselectAllRows: () => {},
     maxRowSelection: undefined,
     bulkSelection: 'none',
+    headerAlignment: 'left',
 };
diff --git a/src/components/Table/head/styled/headerContainer.js b/src/components/Table/head/styled/headerContainer.js
@@ -4,6 +4,7 @@ import { PADDING_X_SMALL } from '../../../../styles/paddings';
 const StyledHeaderContainer = styled.div`
     border: 1px transparent solid;
     display: flex;
+    justify-content: flex-start;
     align-items: center;
     height: 44px;
     padding: 0 ${PADDING_X_SMALL};
@@ -13,6 +14,9 @@ const StyledHeaderContainer = styled.div`
             justify-content: center;
             text-transform: capitalize;
         `};
+
+    ${props => props.headerAlignment === 'center' && 'justify-content: center;'}
+    ${props => props.headerAlignment === 'right' && 'justify-content: flex-end;'}
 `;
 
 export default StyledHeaderContainer;