Merge pull request #10516 from shailahir/feature/10453-add-custom-options-catalog-table

#10453 Added options to CatalogTable.tsx to provide a way to pass opt…

.changeset/moody-apes-tickle.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Added tableOptions property to CatalogTable and DefaultCatalogPage to support customization of the Catalog Table. Related issue #10453

plugins/catalog/api-report.md

@@ -138,6 +138,8 @@ export interface CatalogTableProps {
   actions?: TableProps<CatalogTableRow>['actions'];
   // (undocumented)
   columns?: TableColumn<CatalogTableRow>[];
+  // (undocumented)
+  tableOptions?: TableProps<CatalogTableRow>['options'];
 }
 
 // @public (undocumented)
@@ -164,6 +166,8 @@ export interface DefaultCatalogPageProps {
   initialKind?: string;
   // (undocumented)
   initiallySelectedFilter?: UserListFilterKind;
+  // (undocumented)
+  tableOptions?: TableProps<CatalogTableRow>['options'];
 }
 
 // @public

plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx

@@ -49,6 +49,7 @@ export interface DefaultCatalogPageProps {
   columns?: TableColumn<CatalogTableRow>[];
   actions?: TableProps<CatalogTableRow>['actions'];
   initialKind?: string;
+  tableOptions?: TableProps<CatalogTableRow>['options'];
 }
 
 export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
@@ -57,6 +58,7 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
     actions,
     initiallySelectedFilter = 'owned',
     initialKind = 'component',
+    tableOptions = {},
   } = props;
   const orgName =
     useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
@@ -84,7 +86,11 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
               <EntityTagPicker />
             </CatalogFilterLayout.Filters>
             <CatalogFilterLayout.Content>
-              <CatalogTable columns={columns} actions={actions} />
+              <CatalogTable
+                columns={columns}
+                actions={actions}
+                tableOptions={tableOptions}
+              />
             </CatalogFilterLayout.Content>
           </CatalogFilterLayout>
         </Content>

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

@@ -50,6 +50,7 @@ import Star from '@material-ui/icons/Star';
 export interface CatalogTableProps {
   columns?: TableColumn<CatalogTableRow>[];
   actions?: TableProps<CatalogTableRow>['actions'];
+  tableOptions?: TableProps<CatalogTableRow>['options'];
 }
 
 const YellowStar = withStyles({
@@ -60,7 +61,7 @@ const YellowStar = withStyles({
 
 /** @public */
 export const CatalogTable = (props: CatalogTableProps) => {
-  const { columns, actions } = props;
+  const { columns, actions, tableOptions } = props;
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const { loading, error, entities, filters } = useEntityList();
 
@@ -176,6 +177,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         showEmptyDataSourceMessage: !loading,
         padding: 'dense',
         pageSizeOptions: [20, 50, 100],
+        ...tableOptions,
       }}
       title={`${titlePreamble} (${entities.length})`}
       data={rows}