Column min width (#10204)

* Support minimum column width

* Adjust DescriptionColumn and StatusColumn

* Column refactoring

* Refactor PartColumn

* Refactor LineItemsProgerssColumn

* Tweaks

src/frontend/lib/types/Tables.tsx

@@ -91,6 +91,7 @@ export type TableState = {
  * @param filter - A custom filter function
  * @param filtering - Whether the column is filterable
  * @param width - The width of the column
+ * @param minWidth - The minimum width of the column
  * @param resizable - Whether the column is resizable (defaults to true)
  * @param noWrap - Whether the column should wrap
  * @param ellipsis - Whether the column should be ellipsized
@@ -113,6 +114,7 @@ export type TableColumnProps<T = any> = {
   filter?: any;
   filtering?: boolean;
   width?: number;
+  minWidth?: string | number;
   resizable?: boolean;
   noWrap?: boolean;
   ellipsis?: boolean;
@@ -120,6 +122,7 @@ export type TableColumnProps<T = any> = {
   cellsStyle?: any;
   extra?: any;
   noContext?: boolean;
+  style?: MantineStyleProp;
 };
 
 /**

src/frontend/src/components/wizards/OrderPartsWizard.tsx

@@ -14,7 +14,7 @@ import { useSupplierPartFields } from '../../forms/CompanyForms';
 import { usePurchaseOrderFields } from '../../forms/PurchaseOrderForms';
 import { useCreateApiFormModal } from '../../hooks/UseForm';
 import useWizard from '../../hooks/UseWizard';
-import { PartColumn } from '../../tables/ColumnRenderers';
+import { RenderPartColumn } from '../../tables/ColumnRenderers';
 import RemoveRowButton from '../buttons/RemoveRowButton';
 import { StandaloneField } from '../forms/StandaloneField';
 import Expand from '../items/Expand';
@@ -133,7 +133,7 @@ function SelectPartsStep({
         render: (record: PartOrderRecord) => (
           <Tooltip label={record.part?.description}>
             <Paper p='xs'>
-              <PartColumn part={record.part} />
+              <RenderPartColumn part={record.part} />
             </Paper>
           </Tooltip>
         )

src/frontend/src/forms/BuildForms.tsx

@@ -36,7 +36,7 @@ import {
   useSerialNumberGenerator
 } from '../hooks/UseGenerator';
 import { useGlobalSettingsState } from '../states/SettingsStates';
-import { PartColumn } from '../tables/ColumnRenderers';
+import { RenderPartColumn } from '../tables/ColumnRenderers';
 
 /**
  * Field set for BuildOrder forms
@@ -248,7 +248,7 @@ function BuildOutputFormRow({
     <>
       <Table.Tr>
         <Table.Td>
-          <PartColumn part={record.part_detail} />
+          <RenderPartColumn part={record.part_detail} />
         </Table.Td>
         <Table.Td>
           <TableFieldErrorWrapper props={props} errorKey='output'>
@@ -541,7 +541,7 @@ function BuildAllocateLineRow({
   return (
     <Table.Tr key={`table-row-${record.pk}`}>
       <Table.Td>
-        <PartColumn part={record.part_detail} />
+        <RenderPartColumn part={record.part_detail} />
       </Table.Td>
       <Table.Td>
         <ProgressBar
@@ -704,7 +704,7 @@ function BuildConsumeItemRow({
   return (
     <Table.Tr key={`table-row-${record.pk}`}>
       <Table.Td>
-        <PartColumn part={record.part_detail} />
+        <RenderPartColumn part={record.part_detail} />
       </Table.Td>
       <Table.Td>
         <RenderStockItem instance={record.stock_item_detail} />
@@ -807,7 +807,7 @@ function BuildConsumeLineRow({
   return (
     <Table.Tr key={`table-row-${record.pk}`}>
       <Table.Td>
-        <PartColumn part={record.part_detail} />
+        <RenderPartColumn part={record.part_detail} />
       </Table.Td>
       <Table.Td>
         {remaining <= 0 ? (

src/frontend/src/forms/SalesOrderForms.tsx

@@ -23,7 +23,7 @@ import type {
 import type { TableFieldRowProps } from '../components/forms/fields/TableField';
 import { useCreateApiFormModal } from '../hooks/UseForm';
 import { useGlobalSettingsState } from '../states/SettingsStates';
-import { PartColumn } from '../tables/ColumnRenderers';
+import { RenderPartColumn } from '../tables/ColumnRenderers';
 
 export function useSalesOrderFields({
   duplicateOrderId
@@ -197,7 +197,7 @@ function SalesOrderAllocateLineRow({
   return (
     <Table.Tr key={`table-row-${props.idx}-${record.pk}`}>
       <Table.Td>
-        <PartColumn part={record.part_detail} />
+        <RenderPartColumn part={record.part_detail} />
       </Table.Td>
       <Table.Td>
         <ProgressBar

src/frontend/src/pages/part/pricing/BomPricingPanel.tsx

@@ -136,13 +136,11 @@ export default function BomPricingPanel({
 
   const columns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({
         accessor: 'name',
         title: t`Component`,
-        sortable: true,
+        part: 'sub_part_detail'
-        switchable: false,
+      }),
-        render: (record: any) => PartColumn({ part: record.sub_part_detail })
-      },
       {
         accessor: 'quantity',
         title: t`Quantity`,

src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx

@@ -25,13 +25,11 @@ export default function VariantPricingPanel({
 
   const columns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({
-        accessor: 'name',
         title: t`Variant Part`,
-        sortable: true,
+        part: '',
-        switchable: false,
+        full_name: true
-        render: (record: any) => PartColumn({ part: record, full_name: true })
+      }),
-      },
       {
         accessor: 'pricing_min',
         title: t`Minimum Price`,

src/frontend/src/tables/ColumnRenderers.tsx

@@ -30,15 +30,24 @@ import {
 } from '../states/SettingsStates';
 import { ProjectCodeHoverCard, TableHoverCard } from './TableHoverCard';
 
-// Render a Part instance within a table
+export type PartColumnProps = TableColumnProps & {
-export function PartColumn({
+  part?: string;
+  full_name?: boolean;
+};
+
+// Extract rendering function for Part column
+export function RenderPartColumn({
   part,
   full_name
 }: {
   part: any;
   full_name?: boolean;
 }) {
-  return part ? (
+  if (!part) {
+    return <Skeleton />;
+  }
+
+  return (
     <Group justify='space-between' wrap='nowrap'>
       <Thumbnail
         src={part?.thumbnail ?? part?.image}
@@ -63,11 +72,32 @@ export function PartColumn({
         )}
       </Group>
     </Group>
-  ) : (
-    <Skeleton />
   );
 }
 
+// Render a Part instance within a table
+export function PartColumn(props: PartColumnProps): TableColumn {
+  return {
+    accessor: 'part',
+    title: t`Part`,
+    sortable: true,
+    switchable: false,
+    minWidth: '175px',
+    render: (record: any) => {
+      const part =
+        props.part === ''
+          ? record
+          : resolveItem(record, props.part ?? props.accessor ?? 'part_detail');
+
+      return RenderPartColumn({
+        part: part,
+        full_name: props.full_name ?? false
+      });
+    },
+    ...props
+  };
+}
+
 export function CompanyColumn({
   company
 }: {
@@ -146,6 +176,7 @@ export function LocationColumn(props: TableColumnProps): TableColumn {
       title: t`Location`,
       sortable: true,
       ordering: 'location',
+      minWidth: '150px',
       ...props
     });
   } else {
@@ -154,6 +185,7 @@ export function LocationColumn(props: TableColumnProps): TableColumn {
       title: t`Location`,
       sortable: true,
       ordering: 'location',
+      minWidth: '125px',
       ...props
     });
   }
@@ -192,6 +224,7 @@ export function CategoryColumn(props: TableColumnProps): TableColumn {
       title: t`Category`,
       sortable: true,
       ordering: 'category',
+      minWidth: '150px',
       ...props
     });
   } else {
@@ -200,6 +233,7 @@ export function CategoryColumn(props: TableColumnProps): TableColumn {
       title: t`Category`,
       sortable: true,
       ordering: 'category',
+      minWidth: '125px',
       ...props
     });
   }
@@ -209,6 +243,7 @@ export function BooleanColumn(props: TableColumn): TableColumn {
   return {
     sortable: true,
     switchable: true,
+    minWidth: '75px',
     render: (record: any) => (
       <Center>
         <YesNoButton value={resolveItem(record, props.accessor ?? '')} />
@@ -234,7 +269,7 @@ export function DescriptionColumn(props: TableColumnProps): TableColumn {
     title: t`Description`,
     sortable: false,
     switchable: true,
-    width: 300,
+    minWidth: '200px',
     ...props
   };
 }
@@ -291,17 +326,19 @@ export function NoteColumn(props: TableColumnProps): TableColumn {
   };
 }
 
-export function LineItemsProgressColumn(): TableColumn {
+export function LineItemsProgressColumn(props: TableColumnProps): TableColumn {
   return {
     accessor: 'line_items',
     sortable: true,
+    minWidth: 125,
     render: (record: any) => (
       <ProgressBar
         progressLabel={true}
         value={record.completed_lines}
         maximum={record.line_items}
       />
-    )
+    ),
+    ...props
   };
 }
 
@@ -326,31 +363,20 @@ export function ProjectCodeColumn(props: TableColumnProps): TableColumn {
   };
 }
 
-export function StatusColumn({
+export type StatusColumnProps = TableColumnProps & {
-  model,
-  sortable,
-  switchable,
-  ordering,
-  accessor,
-  title,
-  hidden
-}: {
   model: ModelType;
-  sortable?: boolean;
+};
-  switchable?: boolean;
+
-  accessor?: string;
+export function StatusColumn(props: StatusColumnProps): TableColumn {
-  ordering?: string;
+  const accessor: string = props.accessor ?? 'status';
-  hidden?: boolean;
+
-  title?: string;
-}) {
   return {
-    accessor: accessor ?? 'status',
+    accessor: 'status',
-    sortable: sortable ?? true,
+    sortable: true,
-    switchable: switchable ?? true,
+    switchable: true,
-    ordering: ordering,
+    minWidth: '50px',
-    title: title,
+    render: TableStatusRenderer(props.model, accessor ?? 'status_custom_key'),
-    hidden: hidden,
+    ...props
-    render: TableStatusRenderer(model, accessor ?? 'status_custom_key')
   };
 }
 

src/frontend/src/tables/InvenTreeTable.tsx

@@ -260,7 +260,12 @@ export function InvenTreeTable<T extends Record<string, any>>({
         ...col,
         hidden: hidden,
         resizable: col.resizable ?? true,
-        title: col.title ?? fieldNames[col.accessor] ?? `${col.accessor}`
+        title: col.title ?? fieldNames[col.accessor] ?? `${col.accessor}`,
+        titleStyle: (record: any, index: number) => {
+          return {
+            minWidth: (col as any).minWidth ?? '100px'
+          };
+        }
       };
     });
 

src/frontend/src/tables/bom/UsedInTable.tsx

@@ -30,13 +30,10 @@ export function UsedInTable({
 
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({
-        accessor: 'part',
-        switchable: false,
-        sortable: true,
         title: t`Assembly`,
-        render: (record: any) => PartColumn({ part: record.part_detail })
+        part: 'part_detail'
-      },
+      }),
       {
         accessor: 'part_detail.IPN',
         sortable: false,
@@ -51,12 +48,12 @@ export function UsedInTable({
       DescriptionColumn({
         accessor: 'part_detail.description'
       }),
-      {
+      PartColumn({
         accessor: 'sub_part',
         sortable: true,
         title: t`Component`,
-        render: (record: any) => PartColumn({ part: record.sub_part_detail })
+        part: 'sub_part_detail'
-      },
+      }),
       {
         accessor: 'quantity',
         switchable: false,

src/frontend/src/tables/build/BuildAllocatedStockTable.tsx

@@ -97,14 +97,10 @@ export default function BuildAllocatedStockTable({
         title: t`Order Status`,
         hidden: showBuildInfo != true
       }),
-      {
+      PartColumn({
-        accessor: 'part',
         hidden: !showPartInfo,
-        title: t`Part`,
+        switchable: false
-        sortable: true,
+      }),
-        switchable: false,
-        render: (record: any) => PartColumn({ part: record.part_detail })
-      },
       {
         accessor: 'part_detail.IPN',
         ordering: 'IPN',
@@ -136,11 +132,11 @@ export default function BuildAllocatedStockTable({
       },
       DecimalColumn({
         accessor: 'available',
-        title: t`Available Quantity`
+        title: t`Available`
       }),
       DecimalColumn({
         accessor: 'quantity',
-        title: t`Allocated Quantity`,
+        title: t`Allocated`,
         sortable: true,
         switchable: false
       }),

src/frontend/src/tables/build/BuildLineTable.tsx

@@ -46,7 +46,8 @@ import {
   DecimalColumn,
   DescriptionColumn,
   LocationColumn,
-  PartColumn
+  PartColumn,
+  RenderPartColumn
 } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
 import RowExpansionIcon from '../RowExpansionIcon';
@@ -75,13 +76,9 @@ export function BuildLineSubTable({
 
   const tableColumns: any[] = useMemo(() => {
     return [
-      {
+      PartColumn({
-        accessor: 'part',
+        part: 'part_detail'
-        title: t`Part`,
+      }),
-        render: (record: any) => {
-          return <PartColumn part={record.part_detail} />;
-        }
-      },
       {
         accessor: 'quantity',
         title: t`Quantity`,
@@ -305,9 +302,9 @@ export default function BuildLineTable({
 
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({
         accessor: 'bom_item',
-        title: t`Component`,
+        part: 'part_detail',
         ordering: 'part',
         sortable: true,
         switchable: false,
@@ -320,11 +317,11 @@ export default function BuildLineTable({
                 enabled={hasAllocatedItems}
                 expanded={table.isRowExpanded(record.pk)}
               />
-              <PartColumn part={record.part_detail} />
+              <RenderPartColumn part={record.part_detail} />
             </Group>
           );
         }
-      },
+      }),
       {
         accessor: 'part_detail.IPN',
         sortable: false,
@@ -471,6 +468,7 @@ export default function BuildLineTable({
         switchable: false,
         sortable: true,
         hidden: !isActive,
+        minWidth: 125,
         render: (record: any) => {
           if (record?.bom_item_detail?.consumable) {
             return (
@@ -514,6 +512,7 @@ export default function BuildLineTable({
         accessor: 'consumed',
         sortable: true,
         hidden: !!output?.pk,
+        minWidth: 125,
         render: (record: any) => {
           return record?.bom_item_detail?.consumable ? (
             <Text style={{ fontStyle: 'italic' }}>{t`Consumable item`}</Text>

src/frontend/src/tables/build/BuildOrderTable.tsx

@@ -68,12 +68,9 @@ export function BuildOrderTable({
   const tableColumns = useMemo(() => {
     return [
       ReferenceColumn({}),
-      {
+      PartColumn({
-        accessor: 'part',
+        switchable: false
-        sortable: true,
+      }),
-        switchable: false,
-        render: (record: any) => PartColumn({ part: record.part_detail })
-      },
       {
         accessor: 'part_detail.IPN',
         sortable: true,
@@ -92,6 +89,8 @@ export function BuildOrderTable({
       },
       {
         accessor: 'completed',
+        title: t`Completed`,
+        minWidth: 125,
         sortable: true,
         switchable: false,
         render: (record: any) => (

src/frontend/src/tables/build/BuildOutputTable.tsx

@@ -56,7 +56,12 @@ import useStatusCodes from '../../hooks/UseStatusCodes';
 import { useStockAdjustActions } from '../../hooks/UseStockAdjustActions';
 import { useTable } from '../../hooks/UseTable';
 import { useUserState } from '../../states/UserState';
-import { LocationColumn, PartColumn, StatusColumn } from '../ColumnRenderers';
+import {
+  LocationColumn,
+  PartColumn,
+  RenderPartColumn,
+  StatusColumn
+} from '../ColumnRenderers';
 import {
   BatchFilter,
   HasBatchCodeFilter,
@@ -100,7 +105,7 @@ function OutputAllocationDrawer({
           <Space h='lg' />
           <Paper withBorder p='sm'>
             <Group gap='xs'>
-              <PartColumn part={build.part_detail} />
+              <RenderPartColumn part={build.part_detail} />
               {output?.serial && (
                 <Text size='sm'>
                   {t`Serial Number`}: {output.serial}
@@ -578,11 +583,7 @@ export default function BuildOutputTable({
 
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({}),
-        accessor: 'part',
-        sortable: true,
-        render: (record: any) => PartColumn({ part: record?.part_detail })
-      },
       {
         accessor: 'quantity',
         ordering: 'stock',

src/frontend/src/tables/company/CompanyTable.tsx

@@ -44,6 +44,7 @@ export function CompanyTable({
     return [
       {
         accessor: 'name',
+        title: t`Company`,
         sortable: true,
         switchable: false,
         render: (record: any) => {

src/frontend/src/tables/part/ParametricPartTable.tsx

@@ -365,14 +365,10 @@ export default function ParametricPartTable({
 
   const tableColumns: TableColumn[] = useMemo(() => {
     const partColumns: TableColumn[] = [
-      {
+      PartColumn({
-        accessor: 'name',
+        part: '',
-        title: t`Part`,
+        switchable: false
-        sortable: true,
+      }),
-        switchable: false,
-        noWrap: true,
-        render: (record: any) => PartColumn({ part: record })
-      },
       DescriptionColumn({
         defaultVisible: false
       }),

src/frontend/src/tables/part/PartBuildAllocationsTable.tsx

@@ -55,22 +55,18 @@ export default function PartBuildAllocationsTable({
           </Group>
         )
       },
-      {
+      PartColumn({
-        accessor: 'assembly_detail',
+        part: 'assembly_detail',
-        title: t`Assembly`,
+        title: t`Assembly`
-        switchable: false,
+      }),
-        render: (record: any) => <PartColumn part={record.assembly_detail} />
-      },
       {
         accessor: 'assembly_detail.IPN',
         title: t`Assembly IPN`
       },
-      {
+      PartColumn({
-        accessor: 'part_detail',
+        part: 'part_detail',
-        title: t`Part`,
+        defaultVisible: false
-        defaultVisible: false,
+      }),
-        render: (record: any) => <PartColumn part={record.part_detail} />
-      },
       {
         accessor: 'part_detail.IPN',
         defaultVisible: false,

src/frontend/src/tables/part/PartParameterTable.tsx

@@ -52,11 +52,9 @@ export function PartParameterTable({
 
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({
-        accessor: 'part',
+        part: 'part_detail'
-        sortable: true,
+      }),
-        render: (record: any) => PartColumn({ part: record?.part_detail })
-      },
       {
         accessor: 'part_detail.IPN',
         sortable: false,

src/frontend/src/tables/part/PartSalesAllocationsTable.tsx

@@ -53,11 +53,9 @@ export default function PartSalesAllocationsTable({
       DescriptionColumn({
         accessor: 'order_detail.description'
       }),
-      {
+      PartColumn({
-        accessor: 'part_detail',
+        part: 'part_detail'
-        title: t`Part`,
+      }),
-        render: (record: any) => <PartColumn part={record.part_detail} />
-      },
       {
         accessor: 'part_detail.IPN',
         title: t`IPN`

src/frontend/src/tables/part/PartTable.tsx

@@ -39,14 +39,10 @@ import { TableHoverCard } from '../TableHoverCard';
  */
 function partTableColumns(): TableColumn[] {
   return [
-    {
+    PartColumn({
-      accessor: 'name',
+      part: '',
-      title: t`Part`,
+      accessor: 'name'
-      sortable: true,
+    }),
-      noWrap: true,
-      switchable: false,
-      render: (record: any) => PartColumn({ part: record })
-    },
     {
       accessor: 'IPN',
       sortable: true

src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx

@@ -41,12 +41,9 @@ export function ManufacturerPartTable({
   // Construct table columns for this table
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({
-        accessor: 'part',
+        switchable: 'part' in params
-        switchable: 'part' in params,
+      }),
-        sortable: true,
-        render: (record: any) => PartColumn({ part: record?.part_detail })
-      },
       {
         accessor: 'manufacturer',
         sortable: true,
@@ -56,7 +53,7 @@ export function ManufacturerPartTable({
       },
       {
         accessor: 'MPN',
-        title: t`Manufacturer Part Number`,
+        title: t`MPN`,
         sortable: true
       },
       DescriptionColumn({}),

src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx

@@ -132,14 +132,10 @@ export function PurchaseOrderLineItemTable({
 
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({
-        accessor: 'part',
+        part: 'part_detail',
-        title: t`Part`,
+        ordering: 'part_name'
-        sortable: true,
+      }),
-        ordering: 'part_name',
-        switchable: false,
-        render: (record: any) => PartColumn({ part: record.part_detail })
-      },
       {
         accessor: 'part_detail.IPN',
         sortable: true,

src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx

@@ -115,7 +115,7 @@ export function PurchaseOrderTable({
       {
         accessor: 'supplier_reference'
       },
-      LineItemsProgressColumn(),
+      LineItemsProgressColumn({}),
       StatusColumn({ model: ModelType.purchaseorder }),
       ProjectCodeColumn({
         defaultVisible: false

src/frontend/src/tables/purchasing/SupplierPartTable.tsx

@@ -48,13 +48,10 @@ export function SupplierPartTable({
   // Construct table columns for this table
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({
-        accessor: 'part',
         switchable: 'part' in params,
-        sortable: true,
+        part: 'part_detail'
-        render: (record: any) =>
+      }),
-          PartColumn({ part: record?.part_detail, full_name: true })
-      },
       {
         accessor: 'supplier',
         sortable: true,

src/frontend/src/tables/sales/ReturnOrderLineItemTable.tsx

@@ -106,12 +106,9 @@ export default function ReturnOrderLineItemTable({
 
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({
-        accessor: 'part',
+        part: 'part_detail'
-        title: t`Part`,
+      }),
-        switchable: false,
-        render: (record: any) => PartColumn({ part: record?.part_detail })
-      },
       {
         accessor: 'part_detail.IPN',
         sortable: false

src/frontend/src/tables/sales/ReturnOrderTable.tsx

@@ -115,7 +115,7 @@ export function ReturnOrderTable({
         accessor: 'customer_reference'
       },
       DescriptionColumn({}),
-      LineItemsProgressColumn(),
+      LineItemsProgressColumn({}),
       StatusColumn({ model: ModelType.returnorder }),
       ProjectCodeColumn({
         defaultVisible: false

src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx

@@ -119,14 +119,10 @@ export default function SalesOrderAllocationTable({
         title: t`Order Status`,
         hidden: showOrderInfo != true
       }),
-      {
+      PartColumn({
-        accessor: 'part',
         hidden: showPartInfo != true,
-        title: t`Part`,
+        part: 'part_detail'
-        sortable: true,
+      }),
-        switchable: false,
-        render: (record: any) => PartColumn({ part: record.part_detail })
-      },
       DescriptionColumn({
         accessor: 'part_detail.description',
         hidden: showPartInfo != true

src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx

@@ -48,7 +48,7 @@ import {
   DecimalColumn,
   DescriptionColumn,
   LinkColumn,
-  PartColumn
+  RenderPartColumn
 } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
 import RowExpansionIcon from '../RowExpansionIcon';
@@ -78,6 +78,7 @@ export default function SalesOrderLineItemTable({
         accessor: 'part',
         sortable: true,
         switchable: false,
+        minWidth: 175,
         render: (record: any) => {
           return (
             <Group wrap='nowrap'>
@@ -85,7 +86,7 @@ export default function SalesOrderLineItemTable({
                 enabled={record.allocated}
                 expanded={table.isRowExpanded(record.pk)}
               />
-              <PartColumn part={record.part_detail} />
+              <RenderPartColumn part={record.part_detail} />
             </Group>
           );
         }

src/frontend/src/tables/sales/SalesOrderTable.tsx

@@ -141,10 +141,11 @@ export function SalesOrderTable({
         title: t`Customer Reference`
       },
       DescriptionColumn({}),
-      LineItemsProgressColumn(),
+      LineItemsProgressColumn({}),
       {
         accessor: 'shipments_count',
         title: t`Shipments`,
+        minWidth: 125,
         render: (record: any) => (
           <ProgressBar
             progressLabel

src/frontend/src/tables/stock/InstalledItemsTable.tsx

@@ -58,11 +58,9 @@ export default function InstalledItemsTable({
 
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
-      {
+      PartColumn({
-        accessor: 'part',
+        part: 'part'
-        switchable: false,
+      }),
-        render: (record: any) => PartColumn({ part: record?.part_detail })
-      },
       {
         accessor: 'quantity',
         switchable: false,

src/frontend/src/tables/stock/StockItemTable.tsx

@@ -61,11 +61,10 @@ function stockItemTableColumns({
   showPricing: boolean;
 }): TableColumn[] {
   return [
-    {
+    PartColumn({
       accessor: 'part',
-      sortable: true,
+      part: 'part_detail'
-      render: (record: any) => PartColumn({ part: record?.part_detail })
+    }),
-    },
     {
       accessor: 'part_detail.IPN',
       title: t`IPN`,