Table - Record Filtering

Record filtering is a feature that allows users to filter the records displayed in the table. The table component provides a filter control that can be used to filter records based on the values in the columns. This control uses a Dialog to display the current filters and allows the user to create filters.

Basic Filtering (Case-Insensitive)

By default, filters are case-insensitive. This means that filtering for "smith" will match "Smith", "SMITH", and "smith".

<k-table id="recordFilteringExample">
  <k-tc-filters slot="top"></k-tc-filters>
</k-table>
<script type="module" src="/src/components/tableControls/Filters.js"></script>
<script type="module">
  document.getElementById('recordFilteringExample').setRecords(contacts);
</script>

Case-Sensitive Filtering

You can enable case-sensitive filtering by adding the case-sensitive-filters attribute. With this enabled, filtering for "smith" will only match "smith", not "Smith" or "SMITH".

<k-table id="caseSensitiveExample" case-sensitive-filters>
  <k-tc-filters slot="top"></k-tc-filters>
</k-table>
<script type="module">
  document.getElementById('caseSensitiveExample').setRecords(contacts);
</script>