RunList: Use custom filter

- Use custom filter to show filter inputs outside the table - Add a button to expand/hide filter options - Display sort button only on hover over the column title - Disable column action buttons (all of it's functions can be performed with sort, filter, and show/hide column buttons) Signed-off-by: Vallari Agrawal <[email protected]>
ceph · Nov 13, 2024 · 07b1729 · 07b1729
1 parent e2bad8f
commit 07b1729
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 10 deletions.
diff --git a/src/components/RunList/index.tsx b/src/components/RunList/index.tsx
@@ -1,5 +1,8 @@
 import { useMemo } from 'react';
+import { useState } from "react";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
 import type {
   DecodedValueMap,
   QueryParamConfigMap,
@@ -9,6 +12,7 @@ import { useDebounce } from "usehooks-ts";
 import {
   useMaterialReactTable,
   MaterialReactTable,
+  MRT_TableHeadCellFilterContainer,
   type MRT_ColumnDef,
   type MRT_PaginationState,
   type MRT_Updater,
@@ -38,14 +42,21 @@ const NON_FILTER_PARAMS = [
   "page",
   "pageSize",
 ];
+const FILTER_COLUMNS = [
+  "status",
+  "scheduled",
+  "suite",
+  "branch",
+  "machine_type",
+  "sha1",
+]
 
 const _columns: MRT_ColumnDef<Run>[] = [
   {
     accessorKey: "name",
     header: "link",
     maxSize: 12,
     enableColumnFilter: false,
-    enableColumnActions: false,
     Cell: ({ row }) => {
       return (
         <IconLink to={`/runs/${row.original.name}`}>
@@ -62,15 +73,13 @@ const _columns: MRT_ColumnDef<Run>[] = [
       return row.original.status.replace("finished ", "");
     },
     filterSelectOptions: Object.values(RunStatuses),
-    size: 40,
-    enableColumnActions: false,
+    maxSize: 25,
   },
   {
     accessorKey: "user",
     header: "user",
     maxSize: 45,
     enableColumnFilter: false,
-    enableColumnActions: false,
   },
   {
     id: "scheduled",
@@ -82,23 +91,23 @@ const _columns: MRT_ColumnDef<Run>[] = [
       const date_: string[] = row.original.scheduled.split(" ");
       return <div> {date_[0]} <br /> {date_[1]} </div>
     },
-    size: 50,
+    size: 35,
   },
   {
     id: "started",
     header: "started",
     accessorFn: (row: Run) => formatDate(row.started),
     enableColumnFilter: false,
     sortingFn: "datetime",
-    size: 125,
+    size: 35,
   },
   {
     id: "posted",
     header: "updated",
     accessorFn: (row: Run) => formatDate(row.posted),
     enableColumnFilter: false,
     sortingFn: "datetime",
-    size: 125,
+    maxSize: 35,
   },
   {
     id: "runtime",
@@ -116,12 +125,12 @@ const _columns: MRT_ColumnDef<Run>[] = [
   {
     accessorKey: "suite",
     header: "suite",
-    size: 70,
+    size: 50,
   },
   {
     accessorKey: "branch",
     header: "branch",
-    maxSize: 75,
+    maxSize: 70,
   },
   {
     accessorKey: "machine_type",
@@ -200,6 +209,11 @@ type RunListProps = {
 }
 
 export default function RunList(props: RunListProps) {
+  const [openFilterMenu, setOpenFilterMenu] = useState(false);
+
+  const toggleFilterMenu = (isOpen: boolean) => () => {
+    setOpenFilterMenu(isOpen);
+  };
   const { params, setter, tableOptions } = props;
   const options = useDefaultTableOptions<Run>();
   const debouncedParams = useDebounce(params, 500);
@@ -267,12 +281,17 @@ export default function RunList(props: RunListProps) {
     data: data,
     manualPagination: true,
     manualFiltering: true,
+    enableColumnActions: false,
     onPaginationChange,
     rowCount: Infinity,
     muiPaginationProps: {
       showLastButton: false,
     },
     onColumnFiltersChange,
+    columnFilterDisplayMode: 'custom',
+    muiFilterTextFieldProps: ({ column }) => ({
+      label: `Filter by ${column.columnDef.header}`,
+    }),
     initialState: {
       ...options.initialState,
       columnVisibility: {
@@ -300,5 +319,32 @@ export default function RunList(props: RunListProps) {
     ...tableOptions,
   });
   if (query.isError) return null;
-  return <MaterialReactTable table={table} />
+  return (
+      <div>
+        { openFilterMenu? (
+          <Grid container spacing={3} style={{padding: "10px"}}>
+            {table.getLeafHeaders().map((header) => {
+              console.log(header.id)
+              if (FILTER_COLUMNS.includes(header.id)) {
+                return (
+                  <Grid item xs={2}>
+                    <MRT_TableHeadCellFilterContainer
+                      key={header.id}
+                      header={header}
+                      table={table}
+                      style={{backgroundColor: "None"}}
+                      in
+                    />
+                  </Grid>
+                )
+                }
+            })}
+          </Grid>) 
+        : ""}
+        <Button onClick={toggleFilterMenu(!openFilterMenu)} >
+          {openFilterMenu ? "Hide": "Show"} Filters
+        </Button>
+        <MaterialReactTable table={table} />
+      </div>
+    )
 }
diff --git a/src/lib/table.ts b/src/lib/table.ts
@@ -24,6 +24,19 @@ export default function useDefaultTableOptions<TData extends MRT_RowData>(): Par
     mrtTheme: {
       baseBackgroundColor: theme.palette.background.default,
     },
+    muiTableHeadCellProps: {
+      sx: {
+        '& .Mui-TableHeadCell-Content': { 
+          fontSize: "0.8em",
+        }, 
+        '& .MuiTableSortLabel-root': {
+          display: "none",
+        },
+        '&:hover .MuiTableSortLabel-root': {
+          display: "block",
+        },
+      },
+    },
     muiTableBodyCellProps: {
       sx: {
         color: "black",