feat(component): add subtitle to Table (#1011)

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

@@ -76,6 +76,42 @@ export const DefaultTable = () => {
   );
 };
 
+export const SubtitleTable = () => {
+  const columns: TableColumn[] = [
+    {
+      title: 'Column 1',
+      field: 'col1',
+      highlight: true,
+    },
+    {
+      title: 'Column 2',
+      field: 'col2',
+    },
+    {
+      title: 'Numeric value',
+      field: 'number',
+      type: 'numeric',
+    },
+    {
+      title: 'A Date',
+      field: 'date',
+      type: 'date',
+    },
+  ];
+
+  return (
+    <div style={containerStyle}>
+      <Table
+        options={{ paging: false }}
+        data={testData10}
+        columns={columns}
+        title="Backstage Table"
+        subtitle="Table Subtitle"
+      />
+    </div>
+  );
+};
+
 export const HiddenSearchTable = () => {
   const columns: TableColumn[] = [
     {

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

@@ -47,4 +47,11 @@ describe('<Table />', () => {
     const rendered = render(wrapInTestApp(<Table {...minProps} />));
     expect(rendered.getByText('second value, second row')).toBeInTheDocument();
   });
+
+  it('renders with subtitle', () => {
+    const rendered = render(
+      wrapInTestApp(<Table subtitle="subtitle" {...minProps} />),
+    );
+    expect(rendered.getByText('subtitle')).toBeInTheDocument();
+  });
 });

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

@@ -24,7 +24,7 @@ import MTable, {
   Column,
 } from 'material-table';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, useTheme } from '@material-ui/core';
+import { makeStyles, useTheme, Typography } 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';
@@ -158,9 +158,16 @@ export interface TableColumn extends Column<{}> {
 
 export interface TableProps extends MaterialTableProps<{}> {
   columns: TableColumn[];
+  subtitle?: string;
 }
 
-const Table: FC<TableProps> = ({ columns, options, ...props }) => {
+const Table: FC<TableProps> = ({
+  columns,
+  options,
+  title,
+  subtitle,
+  ...props
+}) => {
   const cellClasses = useCellStyles();
   const headerClasses = useHeaderStyles();
   const toolbarClasses = useToolbarStyles();
@@ -190,6 +197,16 @@ const Table: FC<TableProps> = ({ columns, options, ...props }) => {
       options={{ ...defaultOptions, ...options }}
       columns={MTColumns}
       icons={tableIcons}
+      title={
+        <>
+          <Typography variant="h5">{title}</Typography>
+          {subtitle && (
+            <Typography color="textSecondary" variant="body1">
+              {subtitle}
+            </Typography>
+          )}
+        </>
+      }
       {...props}
     />
   );