Column min width (#10204)

* Support minimum column width

* Adjust DescriptionColumn and StatusColumn

* Column refactoring

* Refactor PartColumn

* Refactor LineItemsProgerssColumn

* Tweaks

Author: SchrodingersGat

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,13 +114,15 @@ export type TableColumnProps<T = any> = {
   filter?: any;
   filtering?: boolean;
   width?: number;
+  minWidth?: string | number;
   resizable?: boolean;
   noWrap?: boolean;
   ellipsis?: boolean;
   textAlign?: 'left' | 'center' | 'right';
   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,
-        switchable: false,
-        render: (record: any) => PartColumn({ part: record.sub_part_detail })
-      },
+        part: '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 [
-      {
-        accessor: 'name',
+      PartColumn({
         title: t`Variant Part`,
-        sortable: true,
-        switchable: false,
-        render: (record: any) => PartColumn({ part: record, full_name: true })
-      },
+        part: '',
+        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 function PartColumn({
+export type PartColumnProps = TableColumnProps & {
+  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({
-  model,
-  sortable,
-  switchable,
-  ordering,
-  accessor,
-  title,
-  hidden
-}: {
+export type StatusColumnProps = TableColumnProps & {
   model: ModelType;
-  sortable?: boolean;
-  switchable?: boolean;
-  accessor?: string;
-  ordering?: string;
-  hidden?: boolean;
-  title?: string;
-}) {
+};
+
+export function StatusColumn(props: StatusColumnProps): TableColumn {
+  const accessor: string = props.accessor ?? 'status';
+
   return {
-    accessor: accessor ?? 'status',
-    sortable: sortable ?? true,
-    switchable: switchable ?? true,
-    ordering: ordering,
-    title: title,
-    hidden: hidden,
-    render: TableStatusRenderer(model, accessor ?? 'status_custom_key')
+    accessor: 'status',
+    sortable: true,
+    switchable: true,
+    minWidth: '50px',
+    render: TableStatusRenderer(props.model, accessor ?? 'status_custom_key'),
+    ...props
   };
 }
 

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 [
-      {
-        accessor: 'part',
-        switchable: false,
-        sortable: true,
+      PartColumn({
         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
       }),
-      {
-        accessor: 'part',
+      PartColumn({
         hidden: !showPartInfo,
-        title: t`Part`,
-        sortable: true,
-        switchable: false,
-        render: (record: any) => PartColumn({ part: record.part_detail })
-      },
+        switchable: false
+      }),
       {
         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
       }),