New component: stag-table-filter

public/css/style.css

@@ -2318,4 +2318,7 @@ tr.relevant-to-visit td:nth-child(2) {
 }
 .autosave-indicator.show {
     display: block;
+}
+table .stag-filter-hide {
+    display: none !important;
 }

public/js/stag-table-filter.js

@@ -0,0 +1,34 @@
+(function () {
+    window.initStagTableFilters = function () {
+
+        function applyFilter(_elem) {
+            let term = $.trim(_elem.val()).toLowerCase(),
+                columnIndex = _elem.closest('td, th').index(),
+                trs = _elem.closest('table').find('tbody').find('tr');
+            trs.removeClass('stag-filter-hide');
+            if(!!term) {
+                trs.each(function () {
+                    if ($(this).find('td:eq(' + columnIndex + ')').text().toLowerCase().indexOf(term) === -1) {
+                        $(this).addClass('stag-filter-hide');
+                    }
+                });
+            }
+        }
+
+        $(document)
+            .off('input.stag-table-filter').on('input.stag-table-filter', 'input[stag-table-filter]', function() { applyFilter($(this)); })
+            .off('change.stag-table-filter').on('change.stag-table-filter', 'input[stag-table-filter]', function() { applyFilter($(this)); })
+            .off('paste.stag-table-filter').on('paste.stag-table-filter', 'input[stag-table-filter]', function() { applyFilter($(this)); })
+
+        $(document)
+            .off('keyup.stag-table-filter')
+            .on('keyup.stag-table-filter', 'input[stag-table-filter]', function(_e) {
+                if(_e.which === 27) {
+                    $(this).val('');
+                    applyFilter($(this));
+                    return false;
+                }
+            })
+    }
+    addMCInitializer('stag-table-filter', window.initStagTableFilters);
+})();

resources/views/layouts/template.blade.php

@@ -412,6 +412,7 @@
     <script src="/js/click-to-copy.js?v={{config('app.asset_version')}}"></script>
     <script src="/js/stag-popup.js?v={{config('app.asset_version')}}"></script>
     <script src="/js/stag-suggest.js?v={{config('app.asset_version')}}"></script>
+    <script src="/js/stag-table-filter.js?v={{config('app.asset_version')}}"></script>
     <script src="/js/option-list.js?v={{config('app.asset_version')}}"></script>
     <script src="/js/show-on-click.js?v={{config('app.asset_version')}}"></script>
     <script src="/js/dq.js?v={{config('app.asset_version')}}"></script>