diff --git a/src/components/TableModule/ReactTableModule.tsx b/src/components/TableModule/ReactTableModule.tsx index d3662a7c..313dddf9 100644 --- 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 ( ))} @@ -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( > diff --git a/src/components/TableModule/TableHeaderCell.tsx b/src/components/TableModule/TableHeaderCell.tsx index 7a1cd282..5cd89417 100644 --- 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 = ({ 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 && ( | Array; + cells: Array; rowActions?: TableModuleProps['rowActions']; rowClickLabel?: TableModuleProps['rowClickLabel']; stickyCols?: Array; diff --git a/src/components/TableModule/types.ts b/src/components/TableModule/types.ts index 54eba04a..eab15c73 100644 --- 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 { label?: string; content?(header: TableHeader): any; onSort?(sort: TableSortClickProps): any; className?: string; } -export interface TableCell extends TableAlignOptions { +export interface TableCell + extends TableAlignOptions, + Cell { valuePath?: string; content?(cell: Item): any; className?: string;