Merge pull request #15813 from ryan-hanchett/feat/doc-table-pagesize

feat: add option to override material table options for DocsTable

.changeset/cuddly-boxes-agree.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': minor
+---
+
+Update DocsTable and EntityListDocsTable to accept overrides for Material Table options.

.changeset/pretty-ladybugs-taste.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Adds new type, TableOptions, extending Material Table Options.

packages/core-components/api-report.md

@@ -31,6 +31,7 @@ import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import { MaterialTableProps } from '@material-table/core';
 import { NavLinkProps } from 'react-router-dom';
 import { Options } from 'react-markdown';
+import { Options as Options_2 } from '@material-table/core';
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { ProfileInfo } from '@backstage/core-plugin-api';
 import { ProfileInfoApi } from '@backstage/core-plugin-api';
@@ -1392,6 +1393,11 @@ export type TableFiltersClassKey = 'root' | 'value' | 'heder' | 'filters';
 // @public (undocumented)
 export type TableHeaderClassKey = 'header';
 
+// Warning: (ae-missing-release-tag) "TableOptions" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export interface TableOptions<T extends object = {}> extends Options_2<T> {}
+
 // Warning: (ae-missing-release-tag) "TableProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)

packages/core-components/src/components/Table/Table.tsx

@@ -240,6 +240,8 @@ export interface TableProps<T extends object = {}>
   onStateChange?: (state: TableState) => any;
 }
 
+export interface TableOptions<T extends object = {}> extends Options<T> {}
+
 export function TableToolbar(toolbarProps: {
   toolbarRef: MutableRefObject<any>;
   setSearch: (value: string) => void;

packages/core-components/src/components/Table/index.ts

@@ -22,6 +22,7 @@ export type {
   TableColumn,
   TableFilter,
   TableProps,
+  TableOptions,
   TableState,
   TableClassKey,
   FiltersContainerClassKey,

plugins/techdocs/api-report.md

@@ -20,6 +20,7 @@ import { ReactNode } from 'react';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { TableColumn } from '@backstage/core-components';
+import { TableOptions } from '@backstage/core-components';
 import { TableProps } from '@backstage/core-components';
 import { TechDocsEntityMetadata as TechDocsEntityMetadata_2 } from '@backstage/plugin-techdocs-react';
 import { TechDocsMetadata as TechDocsMetadata_2 } from '@backstage/plugin-techdocs-react';
@@ -100,6 +101,7 @@ export type DocsTableProps = {
   loading?: boolean | undefined;
   columns?: TableColumn<DocsTableRow>[];
   actions?: TableProps<DocsTableRow>['actions'];
+  options?: TableOptions<DocsTableRow>;
 };
 
 // @public
@@ -159,6 +161,7 @@ export const EntityListDocsTable: {
 export type EntityListDocsTableProps = {
   columns?: TableColumn<DocsTableRow>[];
   actions?: TableProps<DocsTableRow>['actions'];
+  options?: TableOptions<DocsTableRow>;
 };
 
 // @public

plugins/techdocs/src/home/components/Tables/DocsTable.tsx

@@ -29,6 +29,7 @@ import {
   EmptyState,
   Table,
   TableColumn,
+  TableOptions,
   TableProps,
 } from '@backstage/core-components';
 import { actionFactories } from './actions';
@@ -47,6 +48,7 @@ export type DocsTableProps = {
   loading?: boolean | undefined;
   columns?: TableColumn<DocsTableRow>[];
   actions?: TableProps<DocsTableRow>['actions'];
+  options?: TableOptions<DocsTableRow>;
 };
 
 /**
@@ -55,7 +57,7 @@ export type DocsTableProps = {
  * @public
  */
 export const DocsTable = (props: DocsTableProps) => {
-  const { entities, title, loading, columns, actions } = props;
+  const { entities, title, loading, columns, actions, options } = props;
   const [, copyToClipboard] = useCopyToClipboard();
   const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
   const config = useApi(configApiRef);
@@ -102,6 +104,7 @@ export const DocsTable = (props: DocsTableProps) => {
             pageSize: 20,
             search: true,
             actionsColumnIndex: -1,
+            ...options,
           }}
           data={documents}
           columns={columns || defaultColumns}

plugins/techdocs/src/home/components/Tables/EntityListDocsTable.tsx

@@ -20,6 +20,7 @@ import { capitalize } from 'lodash';
 import {
   CodeSnippet,
   TableColumn,
+  TableOptions,
   TableProps,
   WarningPanel,
 } from '@backstage/core-components';
@@ -40,6 +41,7 @@ import { DocsTableRow } from './types';
 export type EntityListDocsTableProps = {
   columns?: TableColumn<DocsTableRow>[];
   actions?: TableProps<DocsTableRow>['actions'];
+  options?: TableOptions<DocsTableRow>;
 };
 
 /**
@@ -48,7 +50,7 @@ export type EntityListDocsTableProps = {
  * @public
  */
 export const EntityListDocsTable = (props: EntityListDocsTableProps) => {
-  const { columns, actions } = props;
+  const { columns, actions, options } = props;
   const { loading, error, entities, filters } = useEntityList();
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const [, copyToClipboard] = useCopyToClipboard();
@@ -81,6 +83,7 @@ export const EntityListDocsTable = (props: EntityListDocsTableProps) => {
       loading={loading}
       actions={actions || defaultActions}
       columns={columns}
+      options={options}
     />
   );
 };