JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Mitarbeiter Übersicht</h1>
    
    <div class="optionen">
        
        <button type="button" class="filter" id="filter-kein-anruf">'Keine Anrufe gewünscht' ausblenden</span></button>
        <button type="button" class="filter" id="filter-notizen"><span class="filter-inactive">'Keine Notizen' ausblenden</span></button>   
        
    </div>
    
    <table class="users">
     
      <thead>
        <tr>
          <th>Benutzername</th>
          <th>Name</th>
          <th>Letzer Login</th>
          <th></th>
        </tr>
      </thead>
     
      <tbody>
        <tr class="user notizen">
          <td>Benutzer 1</td>
          <td>Viktoria Mustermann</td>
          <td>07.05.2015 - 07:48 Uhr</td>
          <td><img src="http://fs2.directupload.net/images/150507/jrajkpd6.png" width="16" height="16" alt="Passwort ändern" title="Passwort ändern"> - <img src="http://fs1.directupload.net/images/150507/7rg4gr6s.png" width="16" height="16" alt="Mitarbeiter löschen" title="Mitarbeiter löschen"></td>
        </tr>
        <tr class="user notizen">
          <td>Benutzer 2</td>
          <td>Thore Mustermann</td>
          <td>06.05.2015 - 10:46 Uhr</td>
          <td><img src="http://fs2.directupload.net/images/150507/jrajkpd6.png" width="16" height="16" alt="Passwort ändern" title="Passwort ändern"> - <img src="http://fs1.directupload.net/images/150507/7rg4gr6s.png" width="16" height="16" alt="Mitarbeiter löschen" title="Mitarbeiter löschen"></td>
        </tr>
        <tr class="user kein-anruf notizen">
          <td>Benutzer 3</td>
          <td>Melissa Mustermann</td>
          <td>05.05.2015 - 18:03 Uhr</td>
          <td><img src="http://fs2.directupload.net/images/150507/jrajkpd6.png" width="16" height="16" alt="Passwort ändern" title="Passwort ändern"> - <img src="http://fs1.directupload.net/images/150507/7rg4gr6s.png" width="16" height="16" alt="Mitarbeiter löschen" title="Mitarbeiter löschen"></td>
        </tr>
        <tr class="user...

CSS

.optionen { margin:3em 0;}
	
	.filter {
		background-color:#efefef;
		border:none;
		padding:0.5em;
		border:1px solid #9F9F9F;
	}
	
	.btn-error {background-color:#FC9;}
	
	
	/* ausblenden von Einträgen wenn Filter aktiv */
	.users.filter-kein-anruf-active .user.kein-anruf, 
	.users.filter-notizen-active .user.notizen{display:none}
		
	table {
		border-collapse:separate;
		border-spacing:1px;
	}
	
	thead { background-color:rgba(25, 85, 121, 0.75); color:#fff;}
	tbody { background-color:#f2f1f1;}
	
	th, td {
		text-align:left;
		vertical-align:top;
		padding:0.5em 1em;
	}
	
	tbody tr:nth-child(odd) { background-color:#e7e5e5;}
	tbody tr:hover {background-color:#999;}

JavaScript

$(".optionen .filter").click(function(){
		
		$(this).toggleClass("filter-active");
		var clicked_id = $(this).attr("id");
		$("table.users").toggleClass(clicked_id + "-active");
		$(this).toggleClass("btn-default btn-error"); 
		
	});