diff --git a/src/frontend/package.json b/src/frontend/package.json
index 2c4ea515cd..1c499bcf1f 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -46,12 +46,13 @@
"@uiw/react-split": "^5.9.3",
"@vanilla-extract/css": "^1.15.5",
"axios": "^1.7.5",
- "clsx": "^2.1.0",
+ "clsx": "^2.1.1",
"codemirror": ">=6.0.0",
"dayjs": "^1.11.13",
"embla-carousel-react": "^8.2.0",
"fuse.js": "^7.0.0",
"html5-qrcode": "^2.3.8",
+ "mantine-contextmenu": "^7.11.3",
"mantine-datatable": "^7.11.3",
"qrcode": "^1.5.4",
"react": "^18.3.1",
diff --git a/src/frontend/src/contexts/ThemeContext.tsx b/src/frontend/src/contexts/ThemeContext.tsx
index e5562c58fa..0d734c1392 100644
--- a/src/frontend/src/contexts/ThemeContext.tsx
+++ b/src/frontend/src/contexts/ThemeContext.tsx
@@ -2,6 +2,7 @@ import { t } from '@lingui/macro';
import { MantineProvider, createTheme } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';
import { Notifications } from '@mantine/notifications';
+import { ContextMenuProvider } from 'mantine-contextmenu';
import { AboutInvenTreeModal } from '../components/modals/AboutInvenTreeModal';
import { LicenseModal } from '../components/modals/LicenseModal';
@@ -38,20 +39,22 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
return (
-
-
-
- {children}
-
-
+
+
+
+
+ {children}
+
+
+
);
}
diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx
index 3a3be69dc7..bf22faedcd 100644
--- a/src/frontend/src/main.tsx
+++ b/src/frontend/src/main.tsx
@@ -5,6 +5,7 @@ import '@mantine/dates/styles.css';
import '@mantine/notifications/styles.css';
import '@mantine/spotlight/styles.css';
import * as Sentry from '@sentry/react';
+import 'mantine-contextmenu/styles.layer.css';
import 'mantine-datatable/styles.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx
index c5164e1946..f72496b4b7 100644
--- a/src/frontend/src/tables/InvenTreeTable.tsx
+++ b/src/frontend/src/tables/InvenTreeTable.tsx
@@ -12,11 +12,18 @@ import {
} from '@mantine/core';
import {
IconBarcode,
+ IconEdit,
+ IconEye,
IconFilter,
IconRefresh,
IconTrash
} from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query';
+import {
+ ContextMenuContent,
+ ContextMenuItemOptions,
+ useContextMenu
+} from 'mantine-contextmenu';
import {
DataTable,
DataTableCellClickHandler,
@@ -112,6 +119,7 @@ export type InvenTreeTableProps = {
modelType?: ModelType;
rowStyle?: (record: T, index: number) => any;
modelField?: string;
+ onRowContextMenu?: (record: T, event: any) => void;
};
/**
@@ -158,6 +166,7 @@ export function InvenTreeTable({
const [fieldNames, setFieldNames] = useState>({});
const navigate = useNavigate();
+ const { showContextMenu } = useContextMenu();
// Construct table filters - note that we can introspect filter labels from column names
const filters: TableFilter[] = useMemo(() => {
@@ -587,6 +596,28 @@ export function InvenTreeTable({
[props.onRowClick, props.onCellClick]
);
+ // Callback when a row is right-clicked
+ const handleRowContextMenu = ({
+ record,
+ event
+ }: {
+ record: any;
+ event: any;
+ }) => {
+ if (props.onRowContextMenu) {
+ return props.onRowContextMenu(record, event);
+ } else if (props.rowActions) {
+ const rowActions = props.rowActions(record);
+ return showContextMenu(
+ rowActions.map((action) => ({
+ key: action.title ?? '',
+ icon: action.icon,
+ onClick: action.onClick
+ }))
+ )(event);
+ }
+ };
+
// pagination refresth table if pageSize changes
function updatePageSize(newData: number) {
tableState.setPageSize(newData);
@@ -741,6 +772,7 @@ export function InvenTreeTable({
}}
recordsPerPageOptions={PAGE_SIZES}
onRecordsPerPageChange={updatePageSize}
+ onRowContextMenu={handleRowContextMenu}
/>
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index 8e1fec119d..b7a9ec3217 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -3260,7 +3260,7 @@ clsx@^1.1.1:
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1:
+clsx@^2.0.0, clsx@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -4533,6 +4533,11 @@ make-dir@^4.0.0:
dependencies:
semver "^7.5.3"
+mantine-contextmenu@^7.11.3:
+ version "7.11.3"
+ resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.11.3.tgz#ce2243dd5069aa3acc6aae4fb8e169e90b3af5bf"
+ integrity sha512-E2YfK5AggpxBCAMRn6T/XDeq4fArJqNWmT78azrJSvB1ox/8v+oBznOxh4A2bgHJabp908M5puw+pnjGZ/AC5A==
+
mantine-datatable@^7.11.3:
version "7.11.3"
resolved "https://registry.yarnpkg.com/mantine-datatable/-/mantine-datatable-7.11.3.tgz#e36a52db3b91420ab3c7fab75abf028c83b782aa"