Merge pull request #379 from vtfk/table-customrender-callback

Table customrender callback

Author: karleinarb

src/ui/Table/Table.stories.js

@@ -123,11 +123,14 @@ export function CustomStyle () {
     {
       label: 'DisplayName',
       value: 'itemTitle',
+      tooltip: 'This is a tooltip for the displayName header',
+      itemTooltip: 'itemSecondary',
       style: { textTransform: 'Uppercase', color: 'blue' }
     },
     {
       label: 'Username',
       value: 'itemSecondary',
+      itemTooltip: 'This is just a text tooltip that dont match any data',
       itemStyle: { backgroundColor: 'pink', textAlign: 'center' }
     },
     {
@@ -191,7 +194,7 @@ export function CustomRendering () {
           <Button style={{ marginLeft: 'auto', marginRight: 'auto' }}>{header.label}</Button>
         )
       },
-      itemRender: (item, index, header) => {
+      itemRender: (value, item, index, header) => {
         return (
           <div>
             <IconButton
@@ -200,24 +203,46 @@ export function CustomRendering () {
                 console.log('At index', index)
                 console.log('Under header', header)
                 console.log('Event', e)
+
+                e.preventDefault()
+                e.stopPropagation()
               }}
-            />
+            >{value.toString()}
+            </IconButton>
           </div>
         )
       }
     }
   ]
 
   return (
-    <Table
-      headers={customHeaders}
-      items={items}
-      itemId='itemSecondary'
-      showSelect
-      selectOnClick
-      onSelectedIdsChanged={ids => console.log('Selected ids', ids)}
-      onSelectedItemsChanged={items => console.log('Selected items:', items)}
-    />
+    <div>
+      <h2 style={{ margin: '0.2rem 0' }}>Custom rendering</h2>
+      Works by adding a callback functions to the header entries that returns JSX
+      <h4 style={{ marginBottom: '0.2rem' }}>Custom header renderer</h4>
+      {'render: (header) => { return ({<>{ header.label }</>}){}}'}
+      <ul style={{ marginTop: '0.3rem' }}>
+        <li>header = Header object</li>
+      </ul>
+      <h4 style={{ marginBottom: '0.2rem' }}>Custom item renderer</h4>
+      {/* eslint-disable-next-line */}
+      {'itemRender: (value, item, header, index) => { return (<>{`${item.firstname} ${item.lastName}`}</>)}'}
+      <ul style={{ marginTop: '0.3rem' }}>
+        <li>value = Value that would have been displayed in regular rendering</li>
+        <li>item = Item object for the row</li>
+        <li>header = Header object for the column</li>
+        <li>index = Array index of the item</li>
+      </ul>
+      <Table
+        headers={customHeaders}
+        items={items}
+        itemId='itemSecondary'
+        showSelect
+        selectOnClick
+        onSelectedIdsChanged={ids => console.log('Selected ids', ids)}
+        onSelectedItemsChanged={items => console.log('Selected items:', items)}
+      />
+    </div>
   )
 }
 

src/ui/Table/index.js

@@ -150,25 +150,41 @@ export function Table ({ headers, items, itemId = '_id', selectedIds, mode, show
     return header.label || ''
   }
 
+  // Gets a value from a given path in an object
+  function getValueAsString (item, path) {
+    try {
+      // Retreive the value
+      let value = get(item, path)
+
+      // If item value is not string, convert it before returning
+      if (typeof value === 'object') value = JSON.stringify(value)
+      else if (typeof value !== 'string' && value.toString) {
+        value = value.toString()
+      }
+
+      return value
+    } catch { return '' }
+  }
+
   // Gets the appropriate value to render for a item
   function getItemValue (item, header, index) {
     // If no item or header, just return a empty string
     if (!item || !header) return ''
 
+    // Retreive the value
+    const value = get(item, header.value)
+
     // If the header has a render function for the item
     if (header.itemRender && typeof header.itemRender === 'function') {
       try {
-        const result = header.itemRender(item, index, header)
+        const result = header.itemRender(value, item, header, index)
         if (result && typeof result === 'object') return result
       } catch (err) { console.error('Error rendering item', err) }
     }
 
     // If the item contain a element
     if (item._elements?.[header.value]) return item._elements?.[header.value]
 
-    // Retreive the value
-    const value = get(item, header.value)
-
     // If the item has no matching value
     if (!value) return ''
 
@@ -207,7 +223,12 @@ export function Table ({ headers, items, itemId = '_id', selectedIds, mode, show
                 {
               // Render all headers
               headers.map((header) =>
-                <th key={nanoid()} className={mergeClasses(headerClass, header.class)} style={mergeStyles(headerStyle, header.style)}>
+                <th
+                  key={nanoid()}
+                  className={mergeClasses(headerClass, header.class)}
+                  style={mergeStyles(headerStyle, header.style)}
+                  title={getValueAsString(header, header.itemTooltip) || header.tooltip}
+                >
                   {
                     getHeaderValue(header)
                   }
@@ -251,6 +272,7 @@ export function Table ({ headers, items, itemId = '_id', selectedIds, mode, show
                           key={nanoid()}
                           className={mergeClasses(itemClass, header.itemClass)}
                           style={mergeStyles(itemStyle, header.itemStyle)}
+                          title={getValueAsString(item, header.itemTooltip) || header.itemTooltip}
                         >
                           {getItemValue(item, header, index)}
                         </td>
@@ -362,6 +384,10 @@ Table.propTypes = {
     itemStyle: PropTypes.object,
     class: PropTypes.string,
     itemClass: PropTypes.string,
+    render: PropTypes.func,
+    itemRender: PropTypes.func,
+    tooltip: PropTypes.string,
+    itemTooltip: PropTypes.string,
     element: PropTypes.element
   })).isRequired,
   isLoading: PropTypes.bool,