feat(datatable): ✨ Aggiunto filtraggio dei dati

.idea/inspectionProfiles/Project_Default.xml

@@ -95,6 +95,9 @@
         <item value="indeterminate" />
         <item value="inner" />
         <item value="fixedmenuposition" />
+        <item value="comfortable" />
+        <item value="dense" />
+        <item value="compact" />
       </myValues>
     </inspection_tool>
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">

resources/js/Components/DataTable/TableColumn.jsx

@@ -37,6 +37,17 @@ export default class TableColumn extends Component {
       vnode.children = <mwc-checkbox className="mdc-data-table__header-row-checkbox" />;
     }
 
+    if (this.attrs.get('type') !== 'checkbox' && this.attrs.has('filterable')) {
+      vnode.children = (
+        <>
+          {vnode.children}
+          <div style="margin-top: 8px;">
+            <text-field outlined className="mdc-data-table__filter-textfield" label={__('Filtro')} compact/>
+          </div>
+        </>
+      );
+    }
+
     return <th {...this.attrs.all()} role="columnheader" scope="col">{vnode.children}</th>;
   }
 
@@ -81,5 +92,19 @@ export default class TableColumn extends Component {
       attributes: true,
       attributeFilter: ['class']
     });
+
+    $(this.element).find('.mdc-data-table__filter-textfield').on('input', (event: InputEvent) => {
+      const index = $(this.element).index();
+      const rows: Cash = $(this.element)
+        .closest('table')
+        .find('tbody tr');
+      rows.hide();
+      rows.filter(
+        (index_, element) => $(element)
+          .find(`td:nth-child(${index + 1})`)
+          .text()
+          .search(event.target.value) !== -1
+      ).show();
+    });
   }
 }

resources/js/Components/Pages/RecordsPage.jsx

@@ -127,7 +127,7 @@ export default class RecordsPage extends Page {
     return collect(this.columns)
       .map(
         (column: ColumnT | string, id: string) => (
-          <TableColumn id={id} key={id} {...((typeof column === 'object') ? column : {})} sortable>
+          <TableColumn id={id} key={id} {...((typeof column === 'object') ? column : {})} sortable filterable>
             {typeof column === 'string' ? column : column.title}
           </TableColumn>
         )