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

[WIP]: Added buttonforsorting in prop table

parent 1c4b6c2d
Branches
Tags
No related merge requests found
......@@ -7,6 +7,9 @@ import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import SortByAlphaIcon from "@mui/icons-material/SortByAlpha";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import { Tooltip, IconButton, Stack } from "@mui/material";
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
......@@ -29,7 +32,38 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
}));
export default function PropsTableApi({ rows = [] }) {
const [sorted, setSorted] = React.useState(false);
const handleSort = () => {
setSorted((_sorted) => {
const resultSorted = !_sorted;
if(resultSorted){
}
return resultSorted;
});
};
return (
<React.Fragment>
<Stack
direction={"row"}
justifyContent="space-between"
alignItems={"center"}
>
<SubTitle content="Props" />
<Tooltip
title={sorted ? "Unsort alphabetically" : "Sort alphabetically"}
>
<IconButton
style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
onClick={handleSort}
aria-label="upload picture"
component="label"
>
<SortByAlphaIcon />
</IconButton>
</Tooltip>
</Stack>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
......@@ -56,15 +90,21 @@ export default function PropsTableApi({ rows = [] }) {
>
{row.name}
</StyledTableCell>
<StyledTableCell align="left" style={{ wordBreak: "break-word" }}>
<StyledTableCell
align="left"
style={{ wordBreak: "break-word" }}
>
{row.type}
</StyledTableCell>
<StyledTableCell align="left">{row.default}</StyledTableCell>
<StyledTableCell align="left">{row.description}</StyledTableCell>
<StyledTableCell align="left">
{row.description}
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</React.Fragment>
);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment