@integrigo/integrigo-ui 1.6.18-b → 1.6.18-c

package/src/components/organisms/Table/Table.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   Column,
   flexRender,
   getCoreRowModel,
   useReactTable,
+  Row,
 } from '@tanstack/react-table';
 import styled from 'styled-components';
 
@@ -25,7 +26,9 @@ export interface Props <T extends Record<string, unknown>> extends React.TableHT
   data: T[];
   columns: Column<T>[];
   variant?: Variant;
-  textAlign?: Alignment
+  textAlign?: Alignment;
+  renderExpandableRowComponent?: (row: Row<T>) => ReactNode;
+  renderExpandCollapseComponent?: (row: Row<T>) => ReactNode;
 }
 
 export const Table = <T extends Record<string, unknown>>({
@@ -33,12 +36,34 @@ export const Table = <T extends Record<string, unknown>>({
   columns,
   variant = 'primary',
   textAlign = 'center',
+  renderExpandableRowComponent,
+  renderExpandCollapseComponent,
   ...props
 }: Props<T>) => {
 
+  const tableColumns = [
+    ...columns,
+    ...(typeof renderExpandableRowComponent !== 'undefined' && typeof renderExpandCollapseComponent !== 'undefined'
+      ? [
+        {
+          accessorKey: 'expandable-column',
+          header: '',
+          cell: ({ row }: { row: Row<T> }) => {
+            return (
+              <>
+                {renderExpandCollapseComponent(row)}
+              </>
+            );
+          },
+          enableSorting: false,
+        },
+      ]
+      : []),
+  ];
+
   const table = useReactTable({
     data,
-    columns,
+    columns: tableColumns,
     getCoreRowModel: getCoreRowModel(),
   });
 
@@ -63,13 +88,22 @@ export const Table = <T extends Record<string, unknown>>({
         </StyledHead>
         <StyledBody textAlign={textAlign}>
           {table.getRowModel().rows.map(row => (
-            <tr key={row.id}>
+            <React.Fragment key={row.id}>
+              <tr>
               {row.getVisibleCells().map(cell => (
                 <td key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
               ))}
             </tr>
+            {row.getIsExpanded() && typeof renderExpandableRowComponent !== 'undefined' && (
+              <tr>
+                <td colSpan={tableColumns.length + 1}>
+                  {renderExpandableRowComponent(row)}
+                </td>
+              </tr>
+            )}
+            </React.Fragment>
           ))}
         </StyledBody>
     </StyledTable>
@@ -77,9 +111,7 @@ export const Table = <T extends Record<string, unknown>>({
   );
 };
 
-const StyledTable = styled.table`
-
-`;
+const StyledTable = styled.table``;
 
 StyledTable.displayName = 'StyledTable';
 

package/src/components/organisms/Table/__snapshots__/Table.test.tsx.snap

@@ -5,14 +5,14 @@ exports[`<Table /> enabled - should match snapshot 1`] = `
   <div>
     <table
       cellspacing="0"
-      class="sc-bcXHqe eCGCkv"
+      class="sc-bdvvtL gGYjnV"
     >
       <thead
-        class="sc-gswNZR qcRyf"
+        class="sc-gsDKAQ goIZuE"
       >
         <tr>
           <th>
-            firstName
+            First Name
           </th>
           <th>
             Last Name
@@ -32,7 +32,7 @@ exports[`<Table /> enabled - should match snapshot 1`] = `
         </tr>
       </thead>
       <tbody
-        class="sc-dkrFOg jkyDVI"
+        class="sc-dkPtRN eONmCs"
       >
         <tr>
           <td>
@@ -99,3 +99,128 @@ exports[`<Table /> enabled - should match snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<Table /> expandable rows - should match snapshot 1`] = `
+<div>
+  <div>
+    <table
+      cellspacing="0"
+      class="sc-bdvvtL gGYjnV"
+    >
+      <thead
+        class="sc-gsDKAQ goIZuE"
+      >
+        <tr>
+          <th>
+            First Name
+          </th>
+          <th>
+            Last Name
+          </th>
+          <th>
+            Age
+          </th>
+          <th>
+            Visits
+          </th>
+          <th>
+            Status
+          </th>
+          <th>
+            Profile Progress
+          </th>
+          <th />
+        </tr>
+      </thead>
+      <tbody
+        class="sc-dkPtRN eONmCs"
+      >
+        <tr>
+          <td>
+            tanner
+          </td>
+          <td>
+            linsley
+          </td>
+          <td>
+            24
+          </td>
+          <td>
+            100
+          </td>
+          <td>
+            In Relationship
+          </td>
+          <td>
+            50
+          </td>
+          <td>
+            <div
+              data-testid="expand-button-0"
+              style="cursor: pointer;"
+            >
+              Edit
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            tandy
+          </td>
+          <td>
+            miller
+          </td>
+          <td>
+            40
+          </td>
+          <td>
+            40
+          </td>
+          <td>
+            Single
+          </td>
+          <td>
+            80
+          </td>
+          <td>
+            <div
+              data-testid="expand-button-1"
+              style="cursor: pointer;"
+            >
+              Edit
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            joe
+          </td>
+          <td>
+            dirte
+          </td>
+          <td>
+            45
+          </td>
+          <td>
+            20
+          </td>
+          <td>
+            Complicated
+          </td>
+          <td>
+            10
+          </td>
+          <td>
+            <div
+              data-testid="expand-button-2"
+              style="cursor: pointer;"
+            >
+              Edit
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;