Display parameters

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({
     <Table.Tr style={{ verticalAlign: 'top' }}>
       <Table.Td style={{ minWidth: 75, lineBreak: 'auto', flex: 2 }}>
         <Group gap='xs' wrap='nowrap'>
-          <InvenTreeIcon
-            icon={field.icon ?? (field.name as keyof InvenTreeIconType)}
-          />
-          <Text style={{ paddingLeft: 10 }}>{field.label}</Text>
+          {showIcons && (
+            <InvenTreeIcon
+              icon={field.icon ?? (field.name as keyof InvenTreeIconType)}
+            />
+          )}
+          <Text style={{ paddingLeft: showIcons ? 10 : 0 }}>{field.label}</Text>
         </Group>
       </Table.Td>
       <Table.Td
@@ -528,11 +532,13 @@ export function DetailsTableField({
 export function DetailsTable({
   item,
   fields,
-  title
+  title,
+  showIcons = true
 }: Readonly<{
   item: any;
   fields: DetailsField[];
   title?: string;
+  showIcons?: boolean;
 }>) {
   const visibleFields = useMemo(() => {
     return fields.filter((field) => !field.hidden);
@@ -553,7 +559,12 @@ export function DetailsTable({
         <Table striped verticalSpacing={5} horizontalSpacing='sm'>
           <Table.Tbody>
             {visibleFields.map((field: DetailsField, index: number) => (
-              <DetailsTableField field={field} item={item} key={index} />
+              <DetailsTableField
+                field={field}
+                item={item}
+                showIcons={showIcons}
+                key={index}
+              />
             ))}
           </Table.Tbody>
         </Table>

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<string, string> = {};
+    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 (
+    <DetailsTable
+      title={t`Parameters`}
+      fields={fields}
+      item={item}
+      showIcons={false}
+    />
+  );
+}

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({
       <DetailsTable fields={tr} item={data} />
       <DetailsTable fields={bl} item={data} />
       <DetailsTable fields={br} item={data} />
+      <ParameterDetailsGrid
+        model_type={ModelType.part}
+        model_id={instance.pk}
+      />
     </ItemDetailsGrid>
   );
 }