Skip to content
Snippets Groups Projects
Unverified Commit 501ef8dc authored by JinSSJ3's avatar JinSSJ3 Committed by GitHub
Browse files

Merge pull request #4 from files-ui/14-ref-props-table-order-alpha

[REF]: 14 ref props table order alpha
parents 60e3576c f8938a39
No related branches found
No related tags found
No related merge requests found
......@@ -7,6 +7,10 @@ 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 LowPriorityIcon from "@mui/icons-material/LowPriority";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
import { Tooltip, IconButton, Stack } from "@mui/material";
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
......@@ -27,9 +31,50 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
border: 0,
},
}));
function compareNames(a, b) {
if (a?.name < b?.name) {
return -1;
} else {
return 1;
}
}
export default function PropsTableApi({ rows = [] }) {
const [sorted, setSorted] = React.useState(false);
const [localRows, setLocalRows] = React.useState(rows);
const handleSort = () => {
setSorted((_sorted) => {
const resultSorted = !_sorted;
const rowsToSort = [...rows];
if (resultSorted) {
setLocalRows(rowsToSort.sort(compareNames));
} else {
setLocalRows(rowsToSort);
}
return resultSorted;
});
};
return (
<React.Fragment>
<Stack
direction={"row"}
justifyContent="flex-start"
alignItems={"center"}
spacing={2}
>
<SubTitle content="Props" />{" "}
<Tooltip title={sorted ? "Sort by importance" : "Sort alphabetically"}>
<IconButton
style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
onClick={handleSort}
aria-label="upload picture"
component="label"
>
{sorted ? <SortByAlphaIcon /> : <LowPriorityIcon />}
</IconButton>
</Tooltip>{" "}
</Stack>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
......@@ -45,7 +90,7 @@ export default function PropsTableApi({ rows = [] }) {
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
{localRows.map((row) => (
<StyledTableRow key={row.name}>
<StyledTableCell
component="th"
......@@ -56,15 +101,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