[WIP]: Added buttonforsorting in prop table

src/pages/api/PropsTableApi.jsx

@@ -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>
   );
 }