feat: adds support for raw and content object in ExpandableTable (#122)

* feat: adds support for raw and content object in ExpandableTable

Author: Gabriel Mičko

packages/react-expandable-table/src/index.js

@@ -124,7 +124,11 @@ export const ItemWrapper = styled(
             key={column.key}
             bold={column.bold}
           >
-            <Ellipsis>{data[column.key]}</Ellipsis>
+            <Ellipsis>
+              {typeof data[column.key] === 'object'
+                ? data[column.key].content
+                : data[column.key]}
+            </Ellipsis>
           </ColumnCell>
         ))}
         <ColumnCell width={`${ARROW_CELL_WIDTH}px`} align="right">

packages/react-expandable-table/src/index.md

@@ -86,7 +86,10 @@ initialState = {
     },
     {
       id: '5',
-      name: 'Hulk',
+      name: {
+        raw: 'Hulk',
+        content: <span style={{ color: 'gray' }}>Hulk</span>,
+      },
       rank: '5',
       mentions: '35',
       kol_score: '99.10%',

packages/react-expandable-table/src/index.test.js

@@ -288,16 +288,35 @@ it('clicking on name in the header should sort data according to names in descen
         ...data,
         {
           id: '5',
-          name: 'Jamie Dimon',
+          name: {
+            raw: 'Iron Manuel',
+            content: <span>Iron Manuel</span>,
+          },
+          rank: '6',
+          mentions: '34',
+          kol_score: '0.00%',
+          reach: '0.00%',
+          score: 300,
+        },
+        {
+          id: '6',
+          name: {
+            raw: 'Jamie Dimon',
+            content: <span>Jamie Dimon</span>,
+          },
           rank: '5',
           mentions: '35',
           kol_score: '99.10%',
           reach: '99.10%',
           score: 250,
         },
+
         {
-          id: '6',
-          name: 'Agustín Carstens',
+          id: '7',
+          name: {
+            raw: 'Agustín Carstens',
+            content: <span>Agustín Carstens</span>,
+          },
           rank: '6',
           mentions: '34',
           kol_score: '0.00%',
@@ -316,6 +335,7 @@ it('clicking on name in the header should sort data according to names in descen
   expect(wrapper.find('Row').map(node => node.text())).toMatchInlineSnapshot(`
 Array [
   "Jamie Dimon53599.10%99.10%angle_down",
+  "Iron Manuel6340.00%0.00%angle_down",
   "Iron Man1993.70%93.60%angle_down",
   "Captain America23899.70%99.45%angle_down",
   "Agustín Carstens6340.00%0.00%angle_down",
@@ -502,3 +522,29 @@ it('checks for tooltip presence', () => {
   infoIcon.find('button').simulate('mouseenter');
   expect(open).toHaveBeenCalled();
 });
+
+it('content should be rendered when provided', () => {
+  const wrapper = mount(
+    <ExpandableTable
+      maxBodyHeight={300}
+      renderRow={props => <ExampleExtendedComponent {...props} />}
+      columns={columns}
+      data={[
+        ...data,
+        {
+          id: '2',
+          name: {
+            raw: 'Hulk',
+            content: <span data-context="hulk">Hulk</span>,
+          },
+          rank: '2',
+          mentions: '38',
+          kol_score: '99.70%',
+          reach: '99.45%',
+        },
+      ]}
+    />
+  );
+
+  expect(wrapper.find('[data-context="hulk"]').exists()).toBe(true);
+});

packages/react-expandable-table/src/types.js

@@ -5,13 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 // @flow
+import * as React from 'react';
 export type ID = string | number;
-
+export type Label = string | number;
 export const ASC: 'asc' = 'asc';
 export const DESC: 'desc' = 'desc';
 export type SortOrder = Array<typeof ASC | typeof DESC | null>;
 
+export type Cell = {
+  raw: Label,
+  content: React.Node,
+};
+
 export type Data = {
   id: ID,
-  [string]: any,
+  [string]: Label | Cell,
 };

packages/react-expandable-table/src/utils.js

@@ -14,8 +14,12 @@ export const getSortedData = (
 ): Array<Data> => {
   if (data.length && sortOrder && sortBy) {
     return [...data].sort((a, b) => {
-      const valueA = a[sortBy];
-      const valueB = b[sortBy];
+      const valueA = String(
+        typeof a[sortBy] === 'object' ? a[sortBy].raw : a[sortBy]
+      );
+      const valueB = String(
+        typeof b[sortBy] === 'object' ? b[sortBy].raw : b[sortBy]
+      );
       const parsedA = parseFloat(valueA);
       const parsedB = parseFloat(valueB);
       if (isNaN(parsedA) === false && isNaN(parsedB) === false) {