diff --git a/packages/core/src/components/Table/Table.stories.tsx b/packages/core/src/components/Table/Table.stories.tsx index bf2c5a3fc7..dbe87963ee 100644 --- a/packages/core/src/components/Table/Table.stories.tsx +++ b/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 ( +
+ + + ); +}; + export const HiddenSearchTable = () => { const columns: TableColumn[] = [ { diff --git a/packages/core/src/components/Table/Table.test.tsx b/packages/core/src/components/Table/Table.test.tsx index f6801359eb..fb87db1b4b 100644 --- a/packages/core/src/components/Table/Table.test.tsx +++ b/packages/core/src/components/Table/Table.test.tsx @@ -47,4 +47,11 @@ describe('
', () => { const rendered = render(wrapInTestApp(
)); expect(rendered.getByText('second value, second row')).toBeInTheDocument(); }); + + it('renders with subtitle', () => { + const rendered = render( + wrapInTestApp(
), + ); + expect(rendered.getByText('subtitle')).toBeInTheDocument(); + }); }); diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx index a4dbc89b4f..b092f6d39b 100644 --- a/packages/core/src/components/Table/Table.tsx +++ b/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 = ({ columns, options, ...props }) => { +const Table: FC = ({ + columns, + options, + title, + subtitle, + ...props +}) => { const cellClasses = useCellStyles(); const headerClasses = useHeaderStyles(); const toolbarClasses = useToolbarStyles(); @@ -190,6 +197,16 @@ const Table: FC = ({ columns, options, ...props }) => { options={{ ...defaultOptions, ...options }} columns={MTColumns} icons={tableIcons} + title={ + <> + {title} + {subtitle && ( + + {subtitle} + + )} + + } {...props} /> );