How to filter tabulator on cell element attributes

Question

I want to filter my data in tabulator table based on cell style, ex., show all cells with validation failures.

All the examples in the documentation are to filter based on data and the custom functions don't pass cell object to filter on.

Here's example in codepen

var columns = [];
$(function () {
  $("#table thead tr th").each(function (i, cell) {
    var name = $(cell).text();
    var field = name.toLowerCase().replace(" ", "_");
    columns.push({
      title: name,
      field: field,
      editor: "input",
      validator: "required"
    });
  });
  var table = new Tabulator("#table", {
    layout: "fitColumns",
    validationMode: "highlight",
    columns: columns
  });
  table.validate();
});

body {
  margin: 20px;
}
table {
  font-size: 14px;
}

.tabulator-validation-fail {
  background: #f4433624;
}

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email Address</th>
      <th>Mobile</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jordan</td>
      <td>Talbot</td>
      <td>[email protected]</td>
      <td>408 345 3433</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Nico</td>
      <td>Rocha</td>
      <td>[email protected]</td>
      <td>408 445 5656</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Cienna</td>
      <td>Bryan</td>
      <td>[email protected]</td>
      <td>210 454 7799</td>
      <td>Austin</td>
    </tr>
    <tr>
      <td>Vinny</td>
      <td>Hood</td>
      <td>[email protected]</td>
      <td>540 672 2585</td>
      <td></td>
    </tr>
    <tr>
      <td>Jay</td>
      <td>Lennon</td>
      <td>[email protected]</td>
      <td></td>
      <td>Boston</td>
    </tr>
    <tr>
      <td>Helen</td>
      <td>Eaton</td>
      <td>[email protected]</td>
      <td></td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

Answer 1

Get all line objects with the rowFormatter object and use the getElement method to get the line element <tr> along with validate to check whether that line is valid or not, like this:

var columns = [];
$(function () {
  $("#table thead tr th").each(function (i, cell) {
    var name = $(cell).text();
    var field = name.toLowerCase().replace(" ", "_");
    columns.push({
      title: name,
      field: field,
      editor: "input",
      validator: "required"
    });
  });
  var table = new Tabulator("#table", {
    layout: "fitColumns",
    validationMode: "highlight",
    columns: columns,
    rowFormatter: function(row) {
      let valid = row.validate() // if valid, returns true
      if(valid === true) {
        $(row.getElement()).css('display', 'none')
      }
    }
  });
  table.validate();
});

body {
  margin: 20px;
}
table {
  font-size: 14px;
}

.tabulator-validation-fail {
  background: #f4433624;
}

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email Address</th>
      <th>Mobile</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jordan</td>
      <td>Talbot</td>
      <td>[email protected]</td>
      <td>408 345 3433</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Nico</td>
      <td>Rocha</td>
      <td>[email protected]</td>
      <td>408 445 5656</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Cienna</td>
      <td>Bryan</td>
      <td>[email protected]</td>
      <td>210 454 7799</td>
      <td>Austin</td>
    </tr>
    <tr>
      <td>Vinny</td>
      <td>Hood</td>
      <td>[email protected]</td>
      <td>540 672 2585</td>
      <td></td>
    </tr>
    <tr>
      <td>Jay</td>
      <td>Lennon</td>
      <td>[email protected]</td>
      <td></td>
      <td>Boston</td>
    </tr>
    <tr>
      <td>Helen</td>
      <td>Eaton</td>
      <td>[email protected]</td>
      <td></td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>