Merge pull request #559 from puppetlabs/tasks/add-fixed-last-column-dg

Add fixed last column option to data-grid Table

Author: vine77

packages/data-grid/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@puppet/data-grid",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "author": "Puppet, Inc.",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -12,6 +12,7 @@
     "test": "jest",
     "test:coverage": "jest --collectCoverage",
     "test:watch": "jest --watch",
+    "test:update": "jest --updateSnapshot",
     "format": "eslint --fix src/**/*.{js,jsx} && prettier --write {src}/**/*.{graphql,json,css,md} .babelrc .prettierrc package.json README.md CONTRIBUTING.md",
     "lint": "eslint src/**/*.{js,jsx} postcss.config.js",
     "prepare": "npm run build"

packages/data-grid/package.json

@@ -77,6 +77,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
   emptyStateMessage="Prompt to action or solution"
   fixed={false}
   fixedColumn={false}
+  fixedLastColumn={false}
   headerCheckState={false}
   headerIndeterminateState={false}
   horizontalScroll={false}
@@ -442,6 +443,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 2`] = `
   emptyStateMessage="Prompt to action or solution"
   fixed={false}
   fixedColumn={false}
+  fixedLastColumn={false}
   headerCheckState={false}
   headerIndeterminateState={false}
   horizontalScroll={false}

packages/data-grid/src/__test__/__snapshots__/Table.test.jsx.snap

@@ -69,8 +69,10 @@ const propTypes = {
   onSort: func,
   /** Optional boolean to cause horizontal scrolling when table extends past the container */
   horizontalScroll: bool,
-  /** Optional boolean to cause the first column to be fixed when horizontalScrool is true */
+  /** Optional boolean to cause the first column to be fixed when horizontalScroll is true */
   fixedColumn: bool,
+  /** Optional boolean to cause the last column to be fixed when horizontalScroll is true */
+  fixedLastColumn: bool,
   /** Optional string to provider header which is visable when no data is available */
   emptyStateHeader: string,
   /** Optional string to provider descriptive message explaining the empty state of the table */
@@ -96,6 +98,7 @@ const defaultProps = {
   sortedColumn: { direction: '', sortDataKey: '' },
   horizontalScroll: false,
   fixedColumn: false,
+  fixedLastColumn: false,
   emptyStateHeader: 'No data available',
   emptyStateMessage: 'Prompt to action or solution',
   loading: false,
@@ -158,6 +161,7 @@ class Table extends Component {
       loading,
       loadingMessage,
       fixedColumn,
+      fixedLastColumn,
       horizontalScroll,
       emptyStateHeader,
       emptyStateMessage,
@@ -181,6 +185,7 @@ class Table extends Component {
         className={classnames({
           'dg-table-horizontal-scroll': horizontalScroll,
           'dg-table-fixed-column': fixedColumn,
+          'dg-table-fixed-last-column': fixedLastColumn,
         })}
       >
         <table

packages/data-grid/src/table/Table.jsx

@@ -93,22 +93,41 @@
   border-collapse: separate;
   border-spacing: 0;
 
-  th:first-child {
-    position: -webkit-sticky;
-    position: sticky;
-    left: 0;
-    z-index: 2;
+  th,
+  td {
+    &:first-child {
+      position: -webkit-sticky;
+      position: sticky;
+      left: 0;
+      z-index: 2;
+    }
   }
 
   td:first-child {
-    position: -webkit-sticky;
-    position: sticky;
-    left: 0;
-    z-index: 2;
     background-color: $puppet-n200;
   }
 }
 
+.dg-table-fixed-last-column {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  th,
+  td {
+    &:last-child {
+      position: -webkit-sticky;
+      position: sticky;
+      right: 0;
+      z-index: 2;
+    }
+  }
+
+  td:last-child {
+    background-color: $puppet-white;
+  }
+}
+
 /** Loading State **/
 
 .dg-table-loading-container {