Merge branch 'initailSetup' into 'master'

Added sorting functionality to table

See merge request !75

src/assets/icons/upVector.js

+import React from "react";
+
+function UpVector({isSelected}) {
+  return (
+    <svg
+      fill="#000000"
+      version="1.1"
+      id="Capa_1"
+      width="10px"
+      height="10px"
+      viewBox="0 0 123.959 123.959"
+    >
+      <g>
+        <path
+        style={{fill: isSelected ? '#3E79F7' : '#BFBFBF'}}
+          d="M66.18,29.742c-2.301-2.3-6.101-2.3-8.401,0l-56,56c-3.8,3.801-1.1,10.2,4.2,10.2h112c5.3,0,8-6.399,4.2-10.2L66.18,29.742
+		z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default UpVector;

src/components/accordion/index.jsx

@@ -77,6 +77,7 @@ function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) {
           aria-labelledby="accordion-collapse-heading-2"
         >
            <Table headers={headers} loading={loading} data={data} />
+           
         </div>
       </div>
     );

src/components/sortButton/index.jsx

+import React from "react";
+import UpVector from "../../assets/icons/upVector";
+
+function SortButton({selected, handleClick}) {
+  return (
+    <button onClick={handleClick}>
+      <div>
+        <UpVector isSelected={selected === 'asc' ? true : false}/>
+      </div>
+      <div className={`rotate-180 -mt-[2px] `}>
+        <UpVector isSelected={selected === 'desc' ? true : false}/>
+      </div>
+    </button>
+  );
+}
+
+export default SortButton;

src/components/table/index.jsx

-import React from "react";
+import React, {useState, useEffect} from "react";
 import Loading from "../loading Component/Loading";
+import SortButton from "../sortButton";
 
 function Table({headers, data,loading, maxHeight}) {
+  const [sortedData, setSortedData] = useState([]);
+  const [sortKey, setSortKey] = useState(null);
+  const [sortOrder, setSortOrder] = useState('asc');
+
+  useEffect(() => {
+    if(sortKey) {
+      setSortKey(null);
+    }
+    setSortedData(data);
+  }, [data]);
+
+  const handleSort = (key) => {
+    const order = key === sortKey ? (sortOrder === 'asc' ? 'desc' : 'asc') : 'asc';
+
+    if(sortOrder === 'desc' && key === sortKey) {
+      setSortedData(data);
+      setSortKey(null);
+      setSortOrder('asc');
+    } else {
+      const sorted = [...data].sort((a, b) => {
+        if (typeof a[key] === 'string') {
+          return order === 'asc' ? a[key].localeCompare(b[key]) : b[key].localeCompare(a[key]);
+        }
+        return order === 'asc' ? a[key] - b[key] : b[key] - a[key];
+      });
+      setSortedData(sorted);
+      setSortKey(key);
+      setSortOrder(order);
+    }
+
+  };
+
   if(loading) return <Loading/>
   else
   return (
@@ -11,7 +44,13 @@ function Table({headers, data,loading, maxHeight}) {
           <tr className="mb-2">
             {headers?.map((item,index) => (
               <th key={index} scope="col" className={`px-6 py-4 w-[${item.width}]`} > 
-                { item.renderHeader ? item.renderHeader(item.title) : item.title}
+                { item.renderHeader ? item.renderHeader(item.title) : item.isSorting ? 
+                <span className="flex items-center">
+                  <span className="mr-4">{item.title}</span> 
+                  <SortButton selected={item.id === sortKey ? sortOrder : ''} handleClick={() =>handleSort(item.id)}/>
+                </span> :
+                 <span>{item.title}</span>
+                }
               </th>
             ))}
           </tr>
@@ -19,7 +58,7 @@ function Table({headers, data,loading, maxHeight}) {
        { 
        (data?.length)?<tbody >
          {
-           data?.map((item, index) => (
+           sortedData?.map((item, index) => (
                <tr key={item.id} className="bg-white  hover:bg-gray-300 " >
                    {
                      headers?.map(({render, id}) => (

src/pages/dashboard/index.jsx

@@ -76,23 +76,28 @@ function Dashboard() {
       id: "empName",
       render: (value) => <span className="flex items-center">
         {/* <img className="pr-2" src="/man.png" width="30px" height="30px" /> */}
-        {value}</span>
+        {value}</span>,
+      isSorting: true
     },
     {
       title: "Emp.Id",
-      id: "empId"
+      id: "empId",
+      isSorting: true
     },
     {
       title: "Designation",
-      id: 'designation'
+      id: 'designation',
+      isSorting: true
     },
     {
       title: "Role",
-      id: 'techStack'
+      id: 'techStack',
+      isSorting: true
     },
     {
       title: "score",
       id: "score",
+      isSorting: true,
       render: (value) => <span className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center ${scoreColor(value)}`}>{value}</span>
     },
     {
@@ -131,8 +136,6 @@ function Dashboard() {
         )}
       </div>
       </div>
-      
-
     </div>
   )
 }