feat(PHC-4380): support row selection #331

lifeomic · Mar 20, 2023 · d5bde5e · d5bde5e
1 parent b832083
commit d5bde5e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/src/components/TableModule/ReactTableModule.tsx b/src/components/TableModule/ReactTableModule.tsx
@@ -53,6 +53,8 @@ export const ReactTableModule = React.memo(
         columns = config.map(mapTableConfigToColumnDef);
       }
 
+      console.log('columns', columns);
+
       const table = useReactTable({
         data,
         columns,
@@ -62,7 +64,7 @@ export const ReactTableModule = React.memo(
         state,
       });
 
-      const headings = table.getHeaderGroups()[0].headers;
+      const headers = table.getHeaderGroups()[0].headers;
 
       return (
         <table
@@ -83,7 +85,7 @@ export const ReactTableModule = React.memo(
                   <TableHeaderCell
                     index={i}
                     key={header.id}
-                    header={{ label: header.id }}
+                    header={{ ...header, label: header.id }}
                   ></TableHeaderCell>
                 ))}
               </tr>
@@ -101,7 +103,7 @@ export const ReactTableModule = React.memo(
                     rowRole={rowRole}
                     maxCellWidth={maxCellWidth}
                     row={row}
-                    headingsLength={headings?.length}
+                    headingsLength={headers?.length}
                     cells={row.getVisibleCells()}
                     rowClickLabel={rowClickLabel}
                   />
@@ -113,7 +115,7 @@ export const ReactTableModule = React.memo(
               >
                 <td
                   className={classes.tableLoadingCell}
-                  colSpan={table.getHeaderGroups()[0].headers.length}
+                  colSpan={headers?.length}
                 >
                   <DotLoader size={0} />
                 </td>

diff --git a/src/components/TableModule/TableHeaderCell.tsx b/src/components/TableModule/TableHeaderCell.tsx
@@ -1,5 +1,7 @@
 import clsx from 'clsx';
 import * as React from 'react';
+
+import { flexRender } from '@tanstack/react-table';
 import { ChevronDown } from '@lifeomic/chromicons';
 import { makeStyles } from '../../styles/index';
 import { GetClasses } from '../../typeUtils';
@@ -157,7 +159,11 @@ export const TableHeaderCell: React.FC<TableHeaderCellProps> = ({
       style={{ left: left }}
       {...rootProps}
     >
-      {header.content ? header.content(header) : header.label}
+      {header.column
+        ? flexRender(header.column.columnDef.header, header.getContext())
+        : header.content
+        ? header.content(header)
+        : header.label}
       {/* We aren't actively sorting this column, but we want to display a "peek" icon so they know they can sort it */}
       {(!sortDirection || !isSorting) && canSort && (
         <ChevronDown

diff --git a/src/components/TableModule/TableModuleRow.tsx b/src/components/TableModule/TableModuleRow.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import * as React from 'react';
-import { Cell, flexRender } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
 import { useStyles } from './TableModule';
 import { getTestProps } from '../../testUtils/getTestProps';
 import { TableCell } from './types';
@@ -22,7 +22,7 @@ export interface TableModuleRowProps
   maxCellWidth?: 1 | 2;
   row: any;
   headingsLength: number;
-  cells: Array<TableCell> | Array<Cell>;
+  cells: Array<TableCell>;
   rowActions?: TableModuleProps['rowActions'];
   rowClickLabel?: TableModuleProps['rowClickLabel'];
   stickyCols?: Array<number>;

diff --git a/src/components/TableModule/types.ts b/src/components/TableModule/types.ts
@@ -1,3 +1,4 @@
+import { Cell, Header } from '@tanstack/react-table';
 /**
  * @description A default interface for capturing the different
  * "sortDirection" options.
@@ -26,14 +27,16 @@ export interface TableSortClickProps extends TableSortDirection {
   header: TableHeader;
 }
 
-export interface TableHeader extends TableAlignOptions {
+export interface TableHeader extends TableAlignOptions, Header<any, any> {
   label?: string;
   content?(header: TableHeader): any;
   onSort?(sort: TableSortClickProps): any;
   className?: string;
 }
 
-export interface TableCell<Item = any> extends TableAlignOptions {
+export interface TableCell<Item = any>
+  extends TableAlignOptions,
+    Cell<any, any> {
   valuePath?: string;
   content?(cell: Item): any;
   className?: string;