Enhancement to showcase how to use row data in CustomCell component (#…

…511)

* Enhancement to showcase how to use row data in CustomCell component

* Bump version as patch release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "5.4.5",
+  "version": "5.4.6",
   "engines": {
     "node": "^8.0.0 || ^10.13.0 || ^12.0.0"
   },

stories/tables/sortable-table.story.js

@@ -20,6 +20,16 @@ function CustomCell({ value }) {
   )
 }
 
+function CustomCellWithRowData({ data: { name, active } }) {
+  const checkIfActive = (active) => {
+    if (active === 'yes') return 'active'
+    return 'not active'
+  }
+  return (
+    <td style={{ color: colorForStatus(active) }}>{name} is {checkIfActive(active)}</td>
+  )
+}
+
 // eslint-disable-next-line react/prop-types
 function CustomRow({ data: { active }, children }) {
   return (
@@ -91,6 +101,13 @@ storiesOf('SortableTable', module)
       <Column name="active" component={CustomCell} />
     </SortableTable>
   ))
+  .add('with custom cell component and its row data', () => (
+    <SortableTable data={tableData}>
+      <Column name="name" />
+      <Column name="age" />
+      <Column name="active" component={CustomCellWithRowData} />
+    </SortableTable>
+  ))
   .add('with custom row component', () => (
     <SortableTable data={tableData} rowComponent={CustomRow}>
       <Column name="name" />