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

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
+import { Column, createColumnHelper, Row } from '@tanstack/react-table';
 import { Table } from './Table';
-import { Column, createColumnHelper } from '@tanstack/react-table';
 
 type Person = {
   firstName: string
@@ -43,6 +43,7 @@ const columnHelper = createColumnHelper<Person>();
 
 const columns = [
   columnHelper.accessor('firstName', {
+    header: 'First Name',
     cell: info => info.getValue(),
     footer: info => info.column.id,
   }),
@@ -73,10 +74,77 @@ const columns = [
 
 describe('<Table />', () => {
   it('should render', () => {
-    render(<Table columns={columns} data={data}/>);
+    const { container, getByText } = render(<Table columns={columns} data={data}/>);
+    expect(container.getElementsByTagName('table').length).toEqual(1);
+    expect(container.getElementsByTagName('th').length).toEqual(6);
+    expect(getByText(/First Name/)).toBeInTheDocument();
+    expect(getByText(/Last Name/)).toBeInTheDocument();
+    expect(getByText(/Age/)).toBeInTheDocument();
+    expect(getByText(/Visits/)).toBeInTheDocument();
+    expect(getByText(/Profile Progress/)).toBeInTheDocument();
   });
   it('enabled - should match snapshot', () => {
     const { container } = render(<Table columns={columns} data={data}/>);
     expect(container).toMatchSnapshot();
   });
+  it('expandable rows - should match snapshot',() => {
+    const { container } = render(
+      <Table
+        columns={columns}
+        data={data}
+        renderExpandCollapseComponent={(row: Row<Person>) => (
+          <div
+            style={{ cursor: 'pointer' }}
+            onClick={() => {
+              console.log('click');
+              row.toggleExpanded();
+            }}
+            data-testid={`expand-button-${row.index}`}
+          >
+            Edit
+          </div>
+        )}
+        renderExpandableRowComponent={(row: Row<Person>) => (
+          <div data-testid={`expand-content-${row.index}`}>Hello {row.original.firstName} {row.original.lastName}</div>
+        )}
+      />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+  it('should render expandable rows', () => {
+    const { container, getByTestId, queryByTestId } = render(
+      <Table
+        columns={columns}
+        data={data}
+        renderExpandCollapseComponent={(row: Row<Person>) => (
+          <div
+            style={{ cursor: 'pointer' }}
+            onClick={() => row.toggleExpanded()}
+            data-testid={`expand-button-${row.index}`}
+          >
+            Edit
+          </div>
+        )}
+        renderExpandableRowComponent={(row: Row<Person>) => (
+          <div data-testid={`expand-content-${row.index}`}>Hello {row.original.firstName} {row.original.lastName}</div>
+        )}
+      />,
+    );
+    expect(container.getElementsByTagName('table').length).toEqual(1);
+    expect(container.getElementsByTagName('th').length).toEqual(7);
+    expect(getByTestId(/expand-button-1/)).toBeInTheDocument();
+    expect(queryByTestId(/expand-content-1/)).not.toBeInTheDocument();
+
+    const expandCollapseButton = getByTestId(/expand-button-1/);
+
+    fireEvent.click(expandCollapseButton);
+
+    expect(getByTestId(/expand-content-1/)).toBeInTheDocument();
+
+    // I don't know why, but it does not work when used with the expandCollapseButton above
+    const sameExpandCollapseButton = getByTestId(/expand-button-1/);
+    fireEvent.click(sameExpandCollapseButton);
+
+    expect(queryByTestId(/expand-content-1/)).not.toBeInTheDocument();
+  });
 });

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>
+`;