Web: Add buttons to filter by category

codee-com · Jan 3, 2025 · 89f5437 · 89f5437
1 parent 7eb86d1
commit 89f5437
Showing 1 changed file with 39 additions and 0 deletions.
diff --git a/src/components/ChecksTable.jsx b/src/components/ChecksTable.jsx
@@ -11,13 +11,17 @@ const ChecksTable = () => {
         const createDataTable = async () => {
             const [
                 DataTableCSS,
+                DataTableButtonsCSS,
                 { 'default': DataTable },
                 { 'default': DT },
+                DataTableButtons,
                 { 'default': jQuery },
             ] = await Promise.all([
                 import('datatables.net-dt/css/dataTables.dataTables.css'),
+                import('datatables.net-buttons-dt/css/buttons.dataTables.css'),
                 import('datatables.net-react'),
                 import('datatables.net-dt'),
+                import('datatables.net-buttons/js/dataTables.buttons'),
                 import('jquery'),
             ])
 
@@ -73,10 +77,45 @@ const ChecksTable = () => {
                         // C, Fortran, C++, AutoFix
                         { 'targets': [3, 4, 5, 6], 'type': 'ticks' },
                     ],
+                    // Filters
+                    layout: {
+                        topStart: {
+                            buttons: [
+                                ...[
+                                    {
+                                        'label': 'All checks',
+                                        'searchValue': '',
+                                    },
+                                    {
+                                        'label': 'Correctness',
+                                        'searchValue': 'correctness',
+                                    },
+                                    {
+                                        'label': 'Modernization',
+                                        'searchValue': 'modernization',
+                                    },
+                                    {
+                                        'label': 'Optimization',
+                                        'searchValue': 'optimization',
+                                    },
+                                ].map(({ label, searchValue }) => ({
+                                    'text': label,
+                                    'action': (event, dataTable, node, config) => {
+                                        dataTable.column(2).search(searchValue).draw();
+                                        dataTable.buttons().enable();
+                                        dataTable.buttons(node).disable();
+                                    }
+                                })),
+                            ]
+                        }
+                    },
                     ordering: true,
                     paging: false,
                     searching: true,
                 });
+
+                // By default, all checks are shown
+                dataTable.buttons([0]).disable(0);
             }
         };