diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx
index d221ea543d..3598deada7 100644
--- a/src/frontend/src/components/details/Details.tsx
+++ b/src/frontend/src/components/details/Details.tsx
@@ -465,10 +465,12 @@ function CopyField({ value }: Readonly<{ value: string }>) {
export function DetailsTableField({
item,
- field
+ field,
+ showIcons = true
}: Readonly<{
item: any;
field: DetailsField;
+ showIcons?: boolean;
}>) {
function getFieldType(type: string) {
switch (type) {
@@ -502,10 +504,12 @@ export function DetailsTableField({
-
- {field.label}
+ {showIcons && (
+
+ )}
+ {field.label}
) {
const visibleFields = useMemo(() => {
return fields.filter((field) => !field.hidden);
@@ -553,7 +559,12 @@ export function DetailsTable({
{visibleFields.map((field: DetailsField, index: number) => (
-
+
))}
diff --git a/src/frontend/src/components/details/ParameterDetailsGrid.tsx b/src/frontend/src/components/details/ParameterDetailsGrid.tsx
new file mode 100644
index 0000000000..4849dcc25a
--- /dev/null
+++ b/src/frontend/src/components/details/ParameterDetailsGrid.tsx
@@ -0,0 +1,58 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import type { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import { t } from '@lingui/core/macro';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useApi } from '../../contexts/ApiContext';
+import { type DetailsField, DetailsTable } from './Details';
+
+export function ParameterDetailsGrid({
+ model_type,
+ model_id
+}: Readonly<{
+ model_type: ModelType;
+ model_id: number | string | undefined;
+}>) {
+ const api = useApi();
+
+ const { data: parameters = [] } = useQuery({
+ queryKey: ['parameter-details', model_type, model_id],
+ enabled: !!model_id && !!model_type,
+ queryFn: () =>
+ api
+ .get(apiUrl(ApiEndpoints.parameter_list), {
+ params: { model_type, model_id, limit: 100 }
+ })
+ .then((res) => res.data?.results ?? [])
+ });
+
+ const { fields, item } = useMemo(() => {
+ const item: Record = {};
+ const fields: DetailsField[] = parameters.map((param: any) => {
+ const key = `param_${param.pk}`;
+ const value =
+ param.data +
+ (param.template_detail?.units ? ` ${param.template_detail.units}` : '');
+ item[key] = value;
+ return {
+ type: 'string' as const,
+ name: key,
+ label: param.template_detail?.name ?? String(param.pk),
+ copy: true
+ };
+ });
+ return { fields, item };
+ }, [parameters]);
+
+ if (fields.length === 0) return null;
+
+ return (
+
+ );
+}
diff --git a/src/frontend/src/pages/part/PartDetailsPanel.tsx b/src/frontend/src/pages/part/PartDetailsPanel.tsx
index 320513dbfa..4f83264447 100644
--- a/src/frontend/src/pages/part/PartDetailsPanel.tsx
+++ b/src/frontend/src/pages/part/PartDetailsPanel.tsx
@@ -14,6 +14,7 @@ import {
} from '../../components/details/Details';
import { DetailsImage } from '../../components/details/DetailsImage';
import { ItemDetailsGrid } from '../../components/details/ItemDetails';
+import { ParameterDetailsGrid } from '../../components/details/ParameterDetailsGrid';
import { formatPriceRange } from '../../defaults/formatters';
import { useInstance } from '../../hooks/UseInstance';
@@ -355,6 +356,10 @@ export function PartDetailsPanel({
+
);
}