diff --git a/frontend/src/assets/styles/step.scss b/frontend/src/assets/styles/step.scss
index ccac308..a1a03e7 100644
--- a/frontend/src/assets/styles/step.scss
+++ b/frontend/src/assets/styles/step.scss
@@ -15,3 +15,14 @@
.step-overlay .row {
flex-grow: 1;
}
+
+// This is not ideal - it adjusts margin that bootstrap overrides from MUI
+.MuiTablePagination-toolbar {
+ .MuiTablePagination-displayedRows {
+ margin-top: 1rem;
+ }
+
+ .MuiTablePagination-selectLabel {
+ margin-top: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/components/steps/results/PlantList.js b/frontend/src/components/steps/results/PlantList.js
new file mode 100644
index 0000000..24705f0
--- /dev/null
+++ b/frontend/src/components/steps/results/PlantList.js
@@ -0,0 +1,159 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableFooter from '@mui/material/TableFooter';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableHead from '@mui/material/TableHead';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import LastPageIcon from '@mui/icons-material/LastPage';
+
+function TablePaginationActions(props) {
+ const theme = useTheme();
+ const { count, page, rowsPerPage, onPageChange } = props;
+
+ const handleFirstPageButtonClick = (event) => {
+ onPageChange(event, 0);
+ };
+
+ const handleBackButtonClick = (event) => {
+ onPageChange(event, page - 1);
+ };
+
+ const handleNextButtonClick = (event) => {
+ onPageChange(event, page + 1);
+ };
+
+ const handleLastPageButtonClick = (event) => {
+ onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+ };
+
+ return (
+
+
+ {theme.direction === 'rtl' ? : }
+
+
+ {theme.direction === 'rtl' ? : }
+
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="next page"
+ >
+ {theme.direction === 'rtl' ? : }
+
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="last page"
+ >
+ {theme.direction === 'rtl' ? : }
+
+
+ );
+}
+
+TablePaginationActions.propTypes = {
+ count: PropTypes.number.isRequired,
+ onPageChange: PropTypes.func.isRequired,
+ page: PropTypes.number.isRequired,
+ rowsPerPage: PropTypes.number.isRequired,
+};
+
+export default function CustomPaginationActionsTable(props) {
+ const [page, setPage] = React.useState(0);
+ const [rowsPerPage, setRowsPerPage] = React.useState(5);
+
+ // Avoid a layout jump when reaching the last page with empty rows.
+ const emptyRows =
+ page > 0 ? Math.max(0, (1 + page) * rowsPerPage - props.rows.length) : 0;
+
+ const handleChangePage = (event, newPage) => {
+ setPage(newPage);
+ };
+
+ const handleChangeRowsPerPage = (event) => {
+ setRowsPerPage(parseInt(event.target.value, 10));
+ setPage(0);
+ };
+
+ return (
+
+
+
+
+ Names
+ Growth form/max height (m)/spacing (m)
+ Preferred moisture regime
+ Tolerances
+ Ecosystem services
+ Carbon Sequestration Rate
+ Planting Stage
+
+
+
+ {(rowsPerPage > 0
+ ? props.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+ : props.rows
+ ).map((row) => (
+
+ {row.name}
+ {row.growthForm}
+ {row.moisturePreferences}
+ {row.plantTolerances}
+ {row.ecosystemServices}
+ {row.carbonSequestration}
+ {row.plantingStage}
+
+ ))}
+
+ {emptyRows > 0 && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/steps/results/ResultsStep.js b/frontend/src/components/steps/results/ResultsStep.js
index bb04ad2..e4912f0 100644
--- a/frontend/src/components/steps/results/ResultsStep.js
+++ b/frontend/src/components/steps/results/ResultsStep.js
@@ -1,17 +1,46 @@
import Step from '../Step';
-import { ListGroup, ListGroupItem } from 'reactstrap';
+import PlantList from './PlantList'
export default function ResultsStep(props) {
+
+ function createData(name, growthForm, moisturePreferences, plantTolerances, ecosystemServices, carbonSequestration, plantingStage) {
+ return {
+ name,
+ growthForm,
+ moisturePreferences,
+ plantTolerances,
+ ecosystemServices,
+ carbonSequestration,
+ plantingStage
+ };
+ }
+
+ const getTableRows = () => {
+ return props.plants.map((plant) => {
+
+ const name = `${plant.name}/${plant.commonname}/${plant.synonym}`;
+ const growthForm = `${plant.growth_form}/${plant.maxheight}/${plant.spacing}`;
+ const moisturePreferences = `${plant.soil_variants.map((variant) => variant.name).join(', ')}`;
+ const plantTolerances = `${plant.water_tolerance.level}/${plant.drought_tolerance.level}/${plant.frost_tolerance.level}/${plant.salinity_tolerance.level}`;;
+ const ecosystemServices = `${plant.purpose}`;
+ const carbonSequestration = ``
+ const plantingStage = `${plant.stage}`
+
+ return createData(
+ name,
+ growthForm,
+ moisturePreferences,
+ plantTolerances,
+ ecosystemServices,
+ carbonSequestration,
+ plantingStage
+ );
+ })
+ }
+
const stepContent = (
-
-
Plant List
-
-
- {props.plants.map(function (plant, i) {
- return {plant.name};
- })}
-
-
+
)