diff --git a/packages/ui/src/Table/Table.tsx b/packages/ui/src/Table/Table.tsx index 885a5fb3e..34eb73545 100644 --- a/packages/ui/src/Table/Table.tsx +++ b/packages/ui/src/Table/Table.tsx @@ -11,6 +11,7 @@ import React, { useMemo, ReactNode, useState, + MouseEvent, } from 'react' import cn from 'classnames' import { HotKeys, KeyMap } from 'react-hotkeys' @@ -30,6 +31,7 @@ import { useExpanded, TableInstance, SortingRule, + TableExpandedToggleProps, } from 'react-table' import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather' @@ -221,6 +223,7 @@ type CustomTableProps = { columnsOrdering?: boolean children?: (table: ReactElement, tableInstance: TableInstance) => ReactElement renderRowSubComponent?: (props: RowType) => ReactNode + canExpand?: (row: RowType) => void onCopy?: (data: (string | undefined)[][]) => void } & CustomTableRowClickProps & DataTestProp @@ -294,6 +297,7 @@ export const Table = ({ renderRowSubComponent, autoResetExpanded = false, onCopy, + canExpand, }: TableProps): ReactElement => { const getOncopy = useRefValue(onCopy) const [contextMenuAnchorEl, setContextMenuAnchorEl] = useState(null) @@ -321,11 +325,30 @@ export const Table = ({ id: ROW_EXPANDER_COLUMN_ID, Header: () => , Cell: ({ row }: { row: RowType }) => { - return row.canExpand || renderRowSubComponent ? ( -
- -
- ) : null + if ((row.canExpand || renderRowSubComponent) && (!canExpand || (canExpand && canExpand(row)))) { + const rowProps = row.getToggleRowExpandedProps() as TableExpandedToggleProps & { + onClick: (e: MouseEvent) => void + } + + return ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events +
{ + e.preventDefault() + rowProps.onClick(e) + }} + > + +
+ ) + } + + return null }, }, ...propColumns, @@ -333,7 +356,7 @@ export const Table = ({ } return propColumns - }, [propColumns, data, renderRowSubComponent]) + }, [propColumns, canExpand, data, renderRowSubComponent]) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const onPaginationChangeDebounced = useAsyncDebounce<(paginationChangeProps: PaginationChangeProps) => void>(onPaginationChange!, 200) diff --git a/packages/ui/src/Table/TableContent.tsx b/packages/ui/src/Table/TableContent.tsx index d1727e85a..57dd9127e 100644 --- a/packages/ui/src/Table/TableContent.tsx +++ b/packages/ui/src/Table/TableContent.tsx @@ -104,19 +104,23 @@ export const TableContent = (props: TableContentProps) => { ) }) + const expandedRow = + row.isExpanded && renderRowSubComponent ? ( + + {renderRowSubComponent(row)} + + ) : null + if (getHref) { const href = getHref(row) if (href) { return ( - - {cells} - + + + {cells} + + {expandedRow} + ) } } @@ -136,13 +140,7 @@ export const TableContent = (props: TableContentProps) => { > {cells} - {row.isExpanded - ? renderRowSubComponent && ( - - {renderRowSubComponent(row)} - - ) - : null} + {expandedRow} ) })}