employees table

src/pages/PartnerСategories/PartnerСategories.jsx

@@ -46,6 +46,7 @@ export const PartnerCategories = () => {
   const theme = useTheme(getTheme());
   const [nodes, setNodes] = useState([]);
   const [initialNodes, setInitialNodes] = useState([]);
+  const [activeTab, setActiveTab] = useState('Все')
 
   const [search, setSearch] = useState("");
 
@@ -308,10 +309,20 @@ export const PartnerCategories = () => {
                   />
                 </label>
                 <div className="table__tabs">
-                  <div className="table__tab">Все</div>
+                  <div onClick={() => {
+                    setActiveTab('Все')
+                    setNodes(initialNodes)
+                  }} className={activeTab === 'Все' ? 'table__tab table__tab--active' : 'table__tab'}>Все</div>
                   {tabs.map((tab) => {
                     return (
-                      <div className="table__tab" key={tab.value}>
+                      <div onClick={() => {
+                        setActiveTab(tab.name)
+                        setNodes(
+                          initialNodes.filter((item) =>
+                            item.resume.userCard.position_id === tab.value
+                          )
+                        );
+                      }} className={activeTab === tab.name ? 'table__tab table__tab--active' : 'table__tab'} key={tab.value}>
                         {tab.name}
                       </div>
                     );

src/pages/PartnerСategories/partnerСategories.scss

@@ -189,6 +189,25 @@
       border-radius: 5px;
     }
 
+    &__tab {
+      padding: 8px 12px;
+      cursor: pointer;
+      color: rgba(46, 58, 89, 1);
+      font-size: 15px;
+
+      &--active {
+        background: rgba(255, 255, 255, 1);
+        font-size: 16px;
+        border-radius: 5px;
+        border: 0;
+      }
+
+      &:nth-child(2) {
+        border-right: 1px solid rgba(224, 226, 229, 1);
+        border-left: 1px solid rgba(224, 226, 229, 1);
+      }
+    }
+
      &__avatar {
        width: 40px;
        height: 40px;