diff --git a/src/webapp/components/table/performance-overview-table/PerformanceOverviewTable.tsx b/src/webapp/components/table/performance-overview-table/PerformanceOverviewTable.tsx index 3df8bef1..526a7f6f 100644 --- a/src/webapp/components/table/performance-overview-table/PerformanceOverviewTable.tsx +++ b/src/webapp/components/table/performance-overview-table/PerformanceOverviewTable.tsx @@ -9,6 +9,9 @@ import { TableContainer, } from "@material-ui/core"; import styled from "styled-components"; +import { SearchInput } from "../../search-input/SearchInput"; +import { Selector } from "../../selector/Selector"; + type CellType = { value?: string; color?: string }; export type TableColumn = { @@ -26,12 +29,40 @@ interface PerformanceOverviewTableProps { export const PerformanceOverviewTable: React.FC = React.memo( ({ columns, rows }) => { + const [searchTerm, setSearchTerm] = useState(""); + const [filterValue, setFilterValue] = useState(""); const [filteredRows, setFilteredRows] = useState(rows); + useEffect(() => { + if (searchTerm === "") { setFilteredRows(rows); + } else { + const filtered = _.filter(rows, row => { + return _.some(row, cell => { + return _.includes(_.toLower(cell.value), _.toLower(searchTerm)); + }); + }); + setFilteredRows(filtered); + } + }, [searchTerm, rows]); return ( + + { + setFilterValue(value); + console.log(value); + }} + /> + setSearchTerm(value)} + /> + @@ -103,3 +134,23 @@ const BodyTableCell = styled(TableCell)<{ color?: string; boldUnderline?: boolea text-decoration: ${props => props.boldUnderline && "underline"}; font-weight: ${props => (props.boldUnderline || props.color) && "700"}; `; + +const Container = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-block-end: 1rem; + margin-right: auto; +`; + +const StyledSelector = styled(Selector)` + max-width: 10rem; + width: 100px; + height: 100%; +`; + +const StyledSearchInput = styled(SearchInput)` + max-width: 19rem; + width: 100px; + height: 100%; +`;