JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Mitarbeiter Übersicht</h1>

<div class="optionen">
    
    <button type="button" class="filter" id="filter-kein-anruf">
        <span class="filter-inactive">'Keine Anrufe gewünscht' ausblenden</span>
        <span class="filter-active">Auch 'Keine Anrufe gewünscht' anzeigen</span>
    </button>
    
    <button type="button" class="filter" id="filter-notizen">
        <span class="filter-inactive">'Keine Notizen' ausblenden</span>
        <span class="filter-active">'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>
      <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>
   ...

CSS

.optionen { margin:3em 0;}

/* richtiges Label anzeigen */
.optionen button.filter-active span.filter-active{display:inline}
.optionen button.filter-active span.filter-inactive{display:none}
.optionen button span.filter-active{display:none}

/* 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");   
	
});