JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.js"></script>
<script src="//cdn.datatables.net/2.0.3/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/2.0.0/js/dataTables.select.js"></script>
<script src="https://cdn.datatables.net/select/2.0.0/js/select.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/2.0.0/css/select.dataTables.css">
<link rel="stylesheet" href="//cdn.datatables.net/2.0.3/css/dataTables.dataTables.min.css">
<html>

<head>

</head>

<body>
<table class="table">

<thead>
  <tr>
    <th>State</th>
    <th>Title</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Open</td>
    <td>Item 1</td>
  </tr>
  <tr>
    <td>Closed</td>
    <td>Item 2</td>
  </tr>
  <tr>
    <td>Open</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Closed</td>
    <td>Item 4</td>
  </tr>
  <tr>
    <td>Open</td>
    <td>Item 5</td>
  </tr>
  <tr>
    <td>Closed</td>
    <td>Item 6</td>
  </tr>
  <tr>
    <td>Open</td>
    <td>Item 7</td>
  </tr>
</tbody>
</table>
</body>
</html>

CSS

button.dt-button.active span::after {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  margin-left: 0.5em;
}

JavaScript

var table = $('table').DataTable({
			order: [[2, 'desc']],
      layout: {
        top2Start: {
          buttons: [
            {
              className: 'dt-table-button',
              extend: 'collection',
              text: '--- State ---',
              buttons: [
                {
                  text: 'Open',
                  active: false,
                  title: 'Open',
                  className: '',
                  action: function (e, dt, node, config) {
                    filterStatus(dt,node,config);
                    config.active = !config.active;
                  }
                },
                {
                  text: 'Closed',
                  active: false,
                  title: 'Closed',
                  color: 'red',
                  className: '',
                  action: function (e, dt, node, config) {
                    filterStatus(dt,node,config);
                    config.active = !config.active;
                  }
                },
              ]
            }
          ]
        }
      },

      initComplete: function(settings, json) {
			},
			stateLoaded : function(settings, data) {
				// Check if there are column filters    
			},
    });

	function filterStatus(dt,node,config) {
		dt.columns(0).search('').draw();
		if (config.active) {
			$(node).removeClass('active');
			config.className = '';
		}
		else {
			dt.columns(0).search(config.text).draw();
			$('button.dt-button').removeClass('active'); 
			$(node).addClass('active');
			config.className = 'active';
		}
	}