feat: add headerAlignment to Table listview variant

nexxtway · Dec 20, 2021 · d9343bc · d9343bc
1 parent 4d05523
commit d9343bc
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 25 deletions.
diff --git a/src/components/Column/index.js b/src/components/Column/index.js
@@ -66,7 +66,7 @@ Column.propTypes = {
 
 Column.defaultProps = {
     header: undefined,
-    headerAlignment: 'left',
+    headerAlignment: undefined,
     component: undefined,
     field: undefined,
     sortable: false,

diff --git a/src/components/Column/readme.md b/src/components/Column/readme.md
@@ -202,3 +202,69 @@ const StatusBadge = ({ value }) => <div style={{ display: 'flex', justifyContent
         </Table>
     </div>
 ```
+
+# Column header alignment with `listview` variant
+##### When table is variant `listview` the default column header alignment is center, but you can still provide a custom alignment.
+
+```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',
+        payment: '10.00 USD',
+        email: '[email protected]',
+        status: 'verified',
+    },
+    {
+        name: 'Jose Torres',
+        payment: '1.00 USD',
+        email: '[email protected]',
+        status: 'verified',
+    },
+    {
+        name: 'Reinier',
+        payment: '5.00 USD',
+        email: '[email protected]',
+        status: 'verified',
+    },
+    {
+        name: 'Sara',
+        payment: '321.00 USD',
+        email: '[email protected]',
+        status: 'verified',
+    },
+    {
+        name: 'Tahimi',
+        payment: '8.00 USD',
+        email: '[email protected]',
+        status: 'verified',
+    },
+];
+
+const badgeStyles = { color: '#1de9b6' };
+
+const StatusBadge = ({ value }) => <div style={{ display: 'flex', justifyContent: 'center', marginTop: 7 }}><Badge label={value} variant="lightest" style={badgeStyles} /></div>;
+
+    <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" variant="listview">
+            <Column header="Name" field="name" headerAlignment="left" />
+            <Column header="Email" field="email" />
+            <Column header="Status" field="status" component={StatusBadge} />
+            <Column header="Payment" field="payment" headerAlignment="right" cellAlignment="right" />
+        </Table>
+    </div>
+```
diff --git a/src/components/Table/__test__/table.spec.js b/src/components/Table/__test__/table.spec.js
@@ -105,7 +105,7 @@ describe('<Table />', () => {
             {
                 field: 'name',
                 header: 'Name',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 sortable: false,
                 computedWidth: 50,
                 type: 'text',
@@ -122,7 +122,7 @@ describe('<Table />', () => {
             {
                 field: 'name',
                 header: 'Name',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 sortable: false,
                 computedWidth: 50,
                 type: 'text',
@@ -138,7 +138,7 @@ describe('<Table />', () => {
                 isFirstDataColumn: false,
                 isEditable: false,
                 onChange: expect.any(Function),
-                headerAlignment: 'left',
+                headerAlignment: undefined,
             },
         ]);
     });
@@ -157,7 +157,7 @@ describe('<Table />', () => {
             {
                 field: 'name',
                 header: 'Name',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 sortable: false,
                 computedWidth: 50,
                 type: 'text',
@@ -198,7 +198,7 @@ describe('<Table />', () => {
                 isFirstDataColumn: false,
                 isEditable: false,
                 onChange: expect.any(Function),
-                headerAlignment: 'left',
+                headerAlignment: undefined,
             },
         ]);
     });
@@ -207,7 +207,7 @@ describe('<Table />', () => {
             {
                 field: 'name',
                 header: 'Name',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 sortable: false,
                 computedWidth: 50,
                 type: 'text',
@@ -257,7 +257,7 @@ describe('<Table />', () => {
             {
                 field: 'name',
                 header: 'Name',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 computedWidth: 50,
                 sortable: false,
                 type: 'text',
@@ -268,7 +268,7 @@ describe('<Table />', () => {
             {
                 field: 'number',
                 header: 'Number',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 computedWidth: 50,
                 sortable: false,
                 type: 'text',
@@ -285,7 +285,7 @@ describe('<Table />', () => {
             {
                 field: 'name',
                 header: 'Name',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 computedWidth: 182,
                 isResized: true,
                 sortable: false,
@@ -297,7 +297,7 @@ describe('<Table />', () => {
             {
                 field: 'number',
                 header: 'Number',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 computedWidth: 50,
                 sortable: false,
                 type: 'text',

diff --git a/src/components/Table/head/header.js b/src/components/Table/head/header.js
@@ -172,5 +172,5 @@ Header.defaultProps = {
     onDeselectAllRows: () => {},
     maxRowSelection: undefined,
     bulkSelection: 'none',
-    headerAlignment: 'left',
+    headerAlignment: undefined,
 };
diff --git a/src/components/Table/head/sortArrowIcon.js b/src/components/Table/head/sortArrowIcon.js
@@ -47,5 +47,5 @@ SortArrowIcon.propTypes = {
 
 SortArrowIcon.defaultProps = {
     direction: 'asc',
-    headerAlignment: 'left',
+    headerAlignment: undefined,
 };
diff --git a/src/components/Table/head/styled/headerContainer.js b/src/components/Table/head/styled/headerContainer.js
@@ -4,7 +4,6 @@ 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};
@@ -14,8 +13,14 @@ const StyledHeaderContainer = styled.div`
             justify-content: center;
             text-transform: capitalize;
         `};
+    ${props => props.headerAlignment === 'left' && 'justify-content: left;'}
     ${props => props.headerAlignment === 'center' && 'justify-content: center;'}
-    ${props => props.headerAlignment === 'right' && 'flex-direction: row-reverse;'}
+    ${props =>
+        props.headerAlignment === 'right' &&
+        `
+        flex-direction: row-reverse;
+        justify-content: flex-start;
+    `}
 `;
 
 export default StyledHeaderContainer;
diff --git a/src/components/Table/helpers/columns/__test__/getColumns.spec.js b/src/components/Table/helpers/columns/__test__/getColumns.spec.js
@@ -33,7 +33,7 @@ describe('getColumns', () => {
                 component: <span />,
                 field: 'a',
                 header: 'header',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 isFirstDataColumn: true,
                 type: 'text',
                 sortable: false,
@@ -55,7 +55,7 @@ describe('getColumns', () => {
             {
                 field: 'a',
                 header: 'header',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 component: <span />,
                 sortable: false,
                 type: 'text',
@@ -80,7 +80,7 @@ describe('getColumns', () => {
             {
                 field: 'a',
                 header: 'header',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 component: <span />,
                 sortable: false,
                 type: 'text',
@@ -115,7 +115,7 @@ describe('getColumns', () => {
             {
                 field: 'a',
                 header: 'header',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 component: <span />,
                 sortable: false,
                 type: 'text',
@@ -137,7 +137,7 @@ describe('getColumns', () => {
             {
                 field: 'a',
                 header: 'header',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 component: <span />,
                 sortable: false,
                 type: 'text',
@@ -152,7 +152,7 @@ describe('getColumns', () => {
                 width: 75,
                 isEditable: false,
                 onChange: expect.any(Function),
-                headerAlignment: 'left',
+                headerAlignment: undefined,
             },
         ]);
     });
@@ -174,7 +174,7 @@ describe('getColumns', () => {
             {
                 field: 'a',
                 header: 'header a',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 component: <span />,
                 sortable: false,
                 type: 'text',
@@ -187,7 +187,7 @@ describe('getColumns', () => {
             {
                 field: 'b',
                 header: 'header b',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 sortable: false,
                 type: 'text',
                 isFirstDataColumn: false,
@@ -215,7 +215,7 @@ describe('getColumns', () => {
             {
                 field: 'a',
                 header: 'header a',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 component: <span />,
                 sortable: false,
                 type: 'text',
@@ -227,7 +227,7 @@ describe('getColumns', () => {
             {
                 field: 'b',
                 header: 'header b',
-                headerAlignment: 'left',
+                headerAlignment: undefined,
                 sortable: false,
                 type: 'text',
                 isFirstDataColumn: false,