Move local concerns into CatalogTable

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

@@ -14,18 +14,8 @@
  * limitations under the License.
  */
 
-import React, { FC, forwardRef } from 'react';
-import MTable, {
-  MTableCell,
-  MTableHeader,
-  MTableToolbar,
-  MaterialTableProps,
-  Options,
-  Column,
-} from 'material-table';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, useTheme, Typography } from '@material-ui/core';
-
+import { makeStyles, Typography, useTheme } from '@material-ui/core';
 // Material-table is not using the standard icons available in in material-ui. https://github.com/mbrn/material-table/issues/51
 import AddBox from '@material-ui/icons/AddBox';
 import ArrowUpward from '@material-ui/icons/ArrowUpward';
@@ -42,6 +32,15 @@ import Remove from '@material-ui/icons/Remove';
 import SaveAlt from '@material-ui/icons/SaveAlt';
 import Search from '@material-ui/icons/Search';
 import ViewColumn from '@material-ui/icons/ViewColumn';
+import MTable, {
+  Column,
+  MaterialTableProps,
+  MTableCell,
+  MTableHeader,
+  MTableToolbar,
+  Options,
+} from 'material-table';
+import React, { forwardRef } from 'react';
 
 const tableIcons = {
   Add: forwardRef((props, ref: React.Ref<SVGSVGElement>) => (
@@ -131,10 +130,10 @@ const useToolbarStyles = makeStyles<BackstageTheme>(theme => ({
   },
 }));
 
-const convertColumns = (
-  columns: TableColumn[],
+function convertColumns<T extends object>(
+  columns: TableColumn<T>[],
   theme: BackstageTheme,
-): TableColumn[] => {
+): TableColumn<T>[] {
   return columns.map(column => {
     const headerStyle: React.CSSProperties = {};
     const cellStyle: React.CSSProperties = {};
@@ -150,25 +149,26 @@ const convertColumns = (
       cellStyle,
     };
   });
-};
+}
 
-export interface TableColumn extends Column<{}> {
+export interface TableColumn<T extends object = {}> extends Column<T> {
   highlight?: boolean;
   width?: string;
 }
 
-export interface TableProps extends MaterialTableProps<{}> {
-  columns: TableColumn[];
+export interface TableProps<T extends object = {}>
+  extends MaterialTableProps<T> {
+  columns: TableColumn<T>[];
   subtitle?: string;
 }
 
-export const Table: FC<TableProps> = ({
+export function Table<T extends object = {}>({
   columns,
   options,
   title,
   subtitle,
   ...props
-}) => {
+}: TableProps<T>) {
   const cellClasses = useCellStyles();
   const headerClasses = useHeaderStyles();
   const toolbarClasses = useToolbarStyles();
@@ -183,7 +183,7 @@ export const Table: FC<TableProps> = ({
   };
 
   return (
-    <MTable
+    <MTable<T>
       components={{
         Cell: cellProps => (
           <MTableCell className={cellClasses.root} {...cellProps} />
@@ -211,4 +211,4 @@ export const Table: FC<TableProps> = ({
       {...props}
     />
   );
-};
+}

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

@@ -15,5 +15,5 @@
  */
 
 export { Table } from './Table';
-export type { TableColumn } from './Table';
+export type { TableColumn, TableProps } from './Table';
 export { SubvalueCell } from './SubvalueCell';