refactor(CatalogTable): allow overriding default components

Signed-off-by: Phil Kuang <pkuang@factset.com>

.changeset/little-mangos-reply.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Allow overriding default components in underlying Catalog Material table

plugins/catalog/report.api.md

@@ -210,6 +210,8 @@ export interface CatalogTableProps {
   // (undocumented)
   columns?: TableColumn<CatalogTableRow>[] | CatalogTableColumnsFunc;
   // (undocumented)
+  components?: TableProps<CatalogTableRow>['components'];
+  // (undocumented)
   emptyContent?: ReactNode;
   // (undocumented)
   subtitle?: string;

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -67,6 +67,7 @@ export interface CatalogTableProps {
    */
   title?: string;
   subtitle?: string;
+  components?: TableProps<CatalogTableRow>['components'];
 }
 
 const refCompare = (a: Entity, b: Entity) => {
@@ -95,6 +96,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
     tableOptions,
     subtitle,
     emptyContent,
+    components,
   } = props;
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const entityListContext = useEntityList();
@@ -216,6 +218,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         data={entities.map(toEntityRow)}
         next={pageInfo?.next}
         prev={pageInfo?.prev}
+        components={components}
       />
     );
   } else if (paginationMode === 'offset') {
@@ -229,6 +232,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         subtitle={subtitle}
         options={options}
         data={entities.map(toEntityRow)}
+        components={components}
       />
     );
   }
@@ -249,6 +253,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
       }}
       components={{
         Toolbar: CatalogTableToolbar,
+        ...(components ?? {}),
       }}
       title={title}
       data={rows}

plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx

@@ -30,7 +30,8 @@ type PaginatedCatalogTableProps = {
  */
 
 export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) {
-  const { columns, data, next, prev, options, ...restProps } = props;
+  const { columns, components, data, next, prev, options, ...restProps } =
+    props;
 
   return (
     <Table
@@ -54,6 +55,7 @@ export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) {
       }}
       components={{
         Toolbar: CatalogTableToolbar,
+        ...(components ?? {}),
       }}
       /* this will enable the prev button accordingly */
       page={prev ? 1 : 0}

plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx

@@ -27,7 +27,7 @@ import { CatalogTableToolbar } from './CatalogTableToolbar';
 export function OffsetPaginatedCatalogTable(
   props: TableProps<CatalogTableRow>,
 ) {
-  const { columns, data, options, ...restProps } = props;
+  const { columns, components, data, options, ...restProps } = props;
   const { setLimit, setOffset, limit, totalItems, offset } = useEntityList();
 
   const [page, setPage] = React.useState(
@@ -55,6 +55,7 @@ export function OffsetPaginatedCatalogTable(
       }}
       components={{
         Toolbar: CatalogTableToolbar,
+        ...(components ?? {}),
       }}
       page={page}
       onPageChange={newPage => {