diff --git a/packages/core/src/components/Table/Table.stories.tsx b/packages/core/src/components/Table/Table.stories.tsx
index 11fa0c44dc..2a176e50a8 100644
--- a/packages/core/src/components/Table/Table.stories.tsx
+++ b/packages/core/src/components/Table/Table.stories.tsx
@@ -220,3 +220,38 @@ export const DenseTable = () => {
);
};
+
+export const FilterTable = () => {
+ 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 (
+
+ );
+};
diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx
index 882272cb43..08b1994246 100644
--- a/packages/core/src/components/Table/Table.tsx
+++ b/packages/core/src/components/Table/Table.tsx
@@ -1,3 +1,4 @@
+import classes from '*.css';
/*
* Copyright 2020 Spotify AB
*
@@ -15,7 +16,12 @@
*/
import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, Typography, useTheme } from '@material-ui/core';
+import {
+ makeStyles,
+ Typography,
+ useTheme,
+ IconButton,
+} 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';
@@ -39,7 +45,7 @@ import MTable, {
MTableToolbar,
Options,
} from 'material-table';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
const tableIcons = {
Add: forwardRef((props, ref: React.Ref) => (
@@ -107,7 +113,7 @@ const useHeaderStyles = makeStyles(theme => ({
},
}));
-const useToolbarStyles = makeStyles(theme => ({
+const useToolbarStyles = makeStyles((theme) => ({
root: {
padding: theme.spacing(3, 0, 2.5, 2.5),
},
@@ -121,6 +127,25 @@ const useToolbarStyles = makeStyles(theme => ({
},
}));
+const useFilterStyles = makeStyles(() => ({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+}));
+
+const useTableStyles = makeStyles(() => ({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+ filters: {
+ height: '100%',
+ width: '250px',
+ }
+}));
+
function convertColumns(
columns: TableColumn[],
theme: BackstageTheme,
@@ -152,6 +177,7 @@ export interface TableProps
extends MaterialTableProps {
columns: TableColumn[];
subtitle?: string;
+ filters?: any[];
}
export function Table({
@@ -159,12 +185,18 @@ export function Table({
options,
title,
subtitle,
+ filters,
...props
}: TableProps) {
const headerClasses = useHeaderStyles();
const toolbarClasses = useToolbarStyles();
+ const tableClasses = useTableStyles();
+ const filtersClasses = useFilterStyles();
+
const theme = useTheme();
+ const [filtersOpen, toggleFilters] = useState(false);
+
const MTColumns = convertColumns(columns, theme);
const defaultOptions: Options = {
@@ -174,14 +206,27 @@ export function Table({
};
return (
+
+ {filtersOpen &&
Filters
}
components={{
Header: headerProps => (
),
- Toolbar: toolbarProps => (
-
- ),
+ Toolbar: toolbarProps =>
+ filters?.length ? (
+
+
+ toggleFilters(el => !el)} aria-label="filter list">
+
+
+ Filters
+
+
+
+ ) : (
+
+ ),
}}
options={{ ...defaultOptions, ...options }}
columns={MTColumns}
@@ -198,5 +243,6 @@ export function Table({
}
{...props}
/>
+
);
}