From a50521f061b7133439876c93fbe68f4ad992189c Mon Sep 17 00:00:00 2001 From: aldbr Date: Tue, 22 Oct 2024 14:36:58 +0200 Subject: [PATCH] feat(DataTable): add a button to show/hide columns --- .../components/shared/DataTable.tsx | 74 +++++++++++++++++-- .../diracx-web-components/hooks/theme.tsx | 17 ++++- .../lint-staged.config.js | 5 ++ packages/diracx-web-components/package.json | 7 +- packages/diracx-web-components/tsup.config.ts | 1 - packages/diracx-web-components/types/index.ts | 1 - 6 files changed, 91 insertions(+), 14 deletions(-) create mode 100644 packages/diracx-web-components/lint-staged.config.js diff --git a/packages/diracx-web-components/components/shared/DataTable.tsx b/packages/diracx-web-components/components/shared/DataTable.tsx index 87b1bd1f..7298bf43 100644 --- 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> { title: string; + table: TanstackTable; 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>( + props: DataTableToolbarProps, +) { + const { title, table, numSelected, selectedIds, toolbarComponents } = props; const [snackbarOpen, setSnackbarOpen] = React.useState(false); + const [anchorEl, setAnchorEl] = React.useState(null); + + const handleVisibilityClick = (event: React.MouseEvent) => { + 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} ) : ( - <> + + + + + + + + + + {table.getAllLeafColumns().map((column) => ( + + + {String(column.columnDef.header)} + + ))} + + + + + )} ); @@ -232,9 +286,14 @@ export function DataTable>( 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([]); const [appliedFilters, setAppliedFilters] = @@ -402,6 +461,10 @@ export function DataTable>( const table = useReactTable({ data: rows, columns, + state: { + columnVisibility, + }, + onColumnVisibilityChange: setColumnVisibility, getCoreRowModel: getCoreRowModel(), enableColumnResizing: true, columnResizeMode: "onChange", @@ -536,6 +599,7 @@ export function DataTable>( > { }, }, }, + 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 new file mode 100644 index 00000000..6eeb9c45 --- /dev/null +++ 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 index be5c1bbd..eb2b4d2c 100644 --- 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 index e1a1991a..9504632f 100644 --- 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 index 39df68bd..0e02f182 100644 --- 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";