Skip to content
Snippets Groups Projects
Commit 8cee7e86 authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[FEAT]: Add sort button and sort function in Props table for sorting by name...

[FEAT]: Add sort button and sort function in Props table for sorting by name or importance, maybe will be changed to 'relevance'
parent 412b1481
No related branches found
No related tags found
No related merge requests found
...@@ -45,7 +45,7 @@ const FileMosaicApi = (props) => { ...@@ -45,7 +45,7 @@ const FileMosaicApi = (props) => {
</Alert> </Alert>
</section> </section>
<section id="filemosaic-props"> <section id="filemosaic-props">
<SubTitle content="Props" /> {/* <SubTitle content="Props" /> */}
<PropsTableApi rows={FileMosaicAPIPropsRows} /> <PropsTableApi rows={FileMosaicAPIPropsRows} />
</section> </section>
......
...@@ -8,6 +8,7 @@ import TableHead from "@mui/material/TableHead"; ...@@ -8,6 +8,7 @@ import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
import SortByAlphaIcon from "@mui/icons-material/SortByAlpha"; import SortByAlphaIcon from "@mui/icons-material/SortByAlpha";
import LowPriorityIcon from "@mui/icons-material/LowPriority";
import SubTitle from "../../components/demo-components/sub-title/SubTitle"; import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import { Tooltip, IconButton, Stack } from "@mui/material"; import { Tooltip, IconButton, Stack } from "@mui/material";
...@@ -30,14 +31,26 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ ...@@ -30,14 +31,26 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
border: 0, border: 0,
}, },
})); }));
function compareNames(a, b) {
if (a?.name < b?.name) {
return -1;
} else {
return 1;
}
}
export default function PropsTableApi({ rows = [] }) { export default function PropsTableApi({ rows = [] }) {
const [sorted, setSorted] = React.useState(false); const [sorted, setSorted] = React.useState(false);
const [localRows, setLocalRows] = React.useState(rows);
const handleSort = () => { const handleSort = () => {
setSorted((_sorted) => { setSorted((_sorted) => {
const resultSorted = !_sorted; const resultSorted = !_sorted;
const rowsToSort = [...rows];
if (resultSorted) { if (resultSorted) {
setLocalRows(rowsToSort.sort(compareNames));
} else {
setLocalRows(rowsToSort);
} }
return resultSorted; return resultSorted;
}); });
...@@ -46,23 +59,21 @@ export default function PropsTableApi({ rows = [] }) { ...@@ -46,23 +59,21 @@ export default function PropsTableApi({ rows = [] }) {
<React.Fragment> <React.Fragment>
<Stack <Stack
direction={"row"} direction={"row"}
justifyContent="space-between" justifyContent="flex-start"
alignItems={"center"} alignItems={"center"}
spacing={2}
> >
<SubTitle content="Props" /> <SubTitle content="Props" />{" "}
<Tooltip title={sorted ? "Sort by importance" : "Sort alphabetically"}>
<Tooltip
title={sorted ? "Unsort alphabetically" : "Sort alphabetically"}
>
<IconButton <IconButton
style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }} style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
onClick={handleSort} onClick={handleSort}
aria-label="upload picture" aria-label="upload picture"
component="label" component="label"
> >
<SortByAlphaIcon /> {sorted ? <SortByAlphaIcon /> : <LowPriorityIcon />}
</IconButton> </IconButton>
</Tooltip> </Tooltip>{" "}
</Stack> </Stack>
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table"> <Table sx={{ minWidth: 700 }} aria-label="customized table">
...@@ -79,7 +90,7 @@ export default function PropsTableApi({ rows = [] }) { ...@@ -79,7 +90,7 @@ export default function PropsTableApi({ rows = [] }) {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{rows.map((row) => ( {localRows.map((row) => (
<StyledTableRow key={row.name}> <StyledTableRow key={row.name}>
<StyledTableCell <StyledTableCell
component="th" component="th"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment