feat(DataTable): add a button to show/hide columns

DIRACGrid · Oct 22, 2024 · a50521f · a50521f
1 parent d9fea28
commit a50521f
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 14 deletions.
diff --git a/packages/diracx-web-components/components/shared/DataTable.tsx b/packages/diracx-web-components/components/shared/DataTable.tsx
@@ -16,14 +16,16 @@ import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 import IconButton from "@mui/material/IconButton";
-import { FormatListBulleted } from "@mui/icons-material";
+import { FormatListBulleted, Visibility } from "@mui/icons-material";
 import {
   Alert,
   Menu,
   MenuItem,
+  Popover,
   Skeleton,
   Snackbar,
   Stack,
+  Switch,
 } from "@mui/material";
 import { cyan } from "@mui/material/colors";
 import { TableComponents, TableVirtuoso } from "react-virtuoso";
@@ -32,6 +34,7 @@ import {
   Cell,
   flexRender,
   getCoreRowModel,
+  Table as TanstackTable,
   useReactTable,
 } from "@tanstack/react-table";
 import { FilterToolbar } from "./FilterToolbar";
@@ -55,8 +58,9 @@ export interface MenuItem {
  * @property {number[]} selectedIds - the ids of the selected rows
  * @property {function} clearSelected - the function to call when the selected rows are cleared
  */
-interface DataTableToolbarProps {
+interface DataTableToolbarProps<T extends Record<string, unknown>> {
   title: string;
+  table: TanstackTable<T>;
   numSelected: number;
   selectedIds: readonly number[];
   toolbarComponents: JSX.Element;
@@ -66,9 +70,23 @@ interface DataTableToolbarProps {
  * Data table toolbar component
  * @param {DataTableToolbarProps} props - the props for the component
  */
-function DataTableToolbar(props: DataTableToolbarProps) {
-  const { title, numSelected, selectedIds, toolbarComponents } = props;
+function DataTableToolbar<T extends Record<string, unknown>>(
+  props: DataTableToolbarProps<T>,
+) {
+  const { title, table, numSelected, selectedIds, toolbarComponents } = props;
   const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleVisibilityClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
 
   /**
    * Handle the copy of the selected IDs
@@ -131,7 +149,43 @@ function DataTableToolbar(props: DataTableToolbarProps) {
           {toolbarComponents}
         </Stack>
       ) : (
-        <></>
+        <Box>
+          <Toolbar>
+            <IconButton onClick={handleVisibilityClick}>
+              <Visibility />
+            </IconButton>
+
+            <Popover
+              id={id}
+              open={open}
+              anchorEl={anchorEl}
+              onClose={handlePopoverClose}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+            >
+              <Box sx={{ p: 2 }}>
+                <Stack direction="column" spacing={2}>
+                  {table.getAllLeafColumns().map((column) => (
+                    <Stack
+                      key={column.id}
+                      direction="row"
+                      alignItems="center"
+                      spacing={1}
+                    >
+                      <Switch
+                        checked={column.getIsVisible()}
+                        onChange={column.getToggleVisibilityHandler()}
+                      />
+                      <Typography>{String(column.columnDef.header)}</Typography>
+                    </Stack>
+                  ))}
+                </Stack>
+              </Box>
+            </Popover>
+          </Toolbar>
+        </Box>
       )}
     </Toolbar>
   );
@@ -232,9 +286,14 @@ export function DataTable<T extends Record<string, unknown>>(
     mouseY: number | null;
     id: number | null;
   }>({ mouseX: null, mouseY: null, id: null });
+
+  // State for the search parameters
   const { getParam, setParam } = useSearchParamsUtils();
   const appId = getParam("appId");
 
+  // Add columnVisibility state
+  const [columnVisibility, setColumnVisibility] = React.useState({});
+
   // State for filters
   const [filters, setFilters] = React.useState<InternalFilter[]>([]);
   const [appliedFilters, setAppliedFilters] =
@@ -402,6 +461,10 @@ export function DataTable<T extends Record<string, unknown>>(
   const table = useReactTable({
     data: rows,
     columns,
+    state: {
+      columnVisibility,
+    },
+    onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: getCoreRowModel(),
     enableColumnResizing: true,
     columnResizeMode: "onChange",
@@ -536,6 +599,7 @@ export function DataTable<T extends Record<string, unknown>>(
       >
         <DataTableToolbar
           title={title}
+          table={table}
           numSelected={selected.length}
           selectedIds={selected}
           toolbarComponents={toolbarComponents}

diff --git a/packages/diracx-web-components/hooks/theme.tsx b/packages/diracx-web-components/hooks/theme.tsx
@@ -1,4 +1,4 @@
-import { PaletteMode } from "@mui/material";
+import { alpha, PaletteMode } from "@mui/material";
 import { cyan, grey, lightGreen } from "@mui/material/colors";
 import {
   createTheme,
@@ -201,6 +201,21 @@ export const useMUITheme = () => {
         },
       },
     },
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          "& .MuiSwitch-switchBase.Mui-checked": {
+            color: secondary,
+            "&:hover": {
+              backgroundColor: alpha(secondary, 0.2),
+            },
+          },
+          "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
+            backgroundColor: secondary,
+          },
+        },
+      },
+    },
     MuiListItemButton: {
       styleOverrides: {
         root: {

diff --git a/packages/diracx-web-components/lint-staged.config.js b/packages/diracx-web-components/lint-staged.config.js
@@ -0,0 +1,5 @@
+export default {
+  "*.{js,ts,jsx,tsx}": "eslint --cache --fix",
+  "*.{js,ts,jsx,tsx,css,md}": "prettier --write",
+  "**/*.{ts,tsx}": () => "tsc --noEmit",
+};
diff --git a/packages/diracx-web-components/package.json b/packages/diracx-web-components/package.json
@@ -111,10 +111,5 @@
     "hooks",
     "types",
     "public"
-  ],
-  "lint-staged": {
-    "*.{js,ts,jsx,tsx}": "eslint --cache --fix",
-    "*.{js,ts,jsx,tsx,css,md}": "prettier --write",
-    "**/*.{ts,tsx}": "tsc-files --noEmit"
-  }
+  ]
 }
diff --git a/packages/diracx-web-components/tsup.config.ts b/packages/diracx-web-components/tsup.config.ts
@@ -5,7 +5,6 @@ import { defineConfig } from "tsup";
 export default defineConfig([
   {
     entry: [
-      "global.d.ts",
       "components/!(index|*.stories).ts?(x)",
       "components/*/!(index|*.stories).ts?(x)",
       "hooks/!(index|*.stories).ts?(x)",

diff --git a/packages/diracx-web-components/types/index.ts b/packages/diracx-web-components/types/index.ts
@@ -1,5 +1,4 @@
 export { type default as ApplicationMetadata } from "./ApplicationMetadata";
-/* eslint-disable import/export */
 export * from "./Filter";
 export * from "./DashboardGroup";
 export * from "./DashboardItem";