Product List Column Layout Customization

Download PDF version

This tutorial guides you through customizing the product list table (/products) column layout in Ultimate POS.

Overview

By default, the product image column stretches to full width, the product name column is narrow, and the business location column sits near the beginning of the table. This enhancement fixes the layout for a cleaner, more practical product list.

What This Enhancement Changes

• Product image fixed to a 40x40px thumbnail instead of full width
• Product name column expanded to take full available width
• Business location column moved to the last position in the table

Benefits

• Better use of table space with a compact image thumbnail
• Product names are fully visible without truncation
• Less-used business location column moved out of the way

Implementation Steps

Step 1: Update Table Headers

File: resources/views/product/partials/product_list.blade.php

a) Change the image and product name headers

Find:

<th class="tw-w-full">{{__('lang_v1.product_image')}} </th>
<th>@lang('messages.action')</th>
<th>@lang('sale.product')</th>
<th>@lang('purchase.business_location') @show_tooltip(__('lang_v1.product_business_location_tooltip'))</th>

Replace with:

<th>{{__('lang_v1.product_image')}} </th>
<th>@lang('messages.action')</th>
<th class="tw-w-full">@lang('sale.product')</th>

What changed:

• Removed tw-w-full from the image <th> so it no longer stretches
• Added tw-w-full to the product name <th> so it takes the remaining width
• Removed the business location <th> from this position (will be added at the end)

b) Add business location header at the end

Find the last custom field header:

<th id="cf_7">{{ $custom_labels['product']['custom_field_7'] ?? '' }}</th>

Add after it:

<th>@lang('purchase.business_location') @show_tooltip(__('lang_v1.product_business_location_tooltip'))</th>

---

Step 2: Update DataTable JavaScript Columns

File: resources/views/product/index.blade.php

The JavaScript DataTable column order must match the new header order.

a) Remove product_locations from its current position

Find inside the columns: [...] array:

{
    data: 'product',
    name: 'products.name'
},
{
    data: 'product_locations',
    name: 'product_locations'
},
@can('view_purchase_price')

Replace with:

{
    data: 'product',
    name: 'products.name'
},
@can('view_purchase_price')

b) Add product_locations at the end of the columns array

Find the last custom field column entry:

{
    data: 'product_custom_field7',
    name: 'products.product_custom_field7',
    visible: $('#cf_7').text().length > 0
},
],

Replace with:

{
    data: 'product_custom_field7',
    name: 'products.product_custom_field7',
    visible: $('#cf_7').text().length > 0
},
{
    data: 'product_locations',
    name: 'product_locations'
},
],

---

Step 3: Fix Product Image Size in Controller

File: app/Http/Controllers/ProductController.php

Inside the index method, find the image column edit:

->editColumn('image', function ($row) {
    return '<div style="display: flex;"><img src="'.$row->image_url.'" alt="Product image" class="product-thumbnail-small"></div>';
})

Replace with:

->editColumn('image', function ($row) {
    return '<div style="display: flex;"><img src="'.$row->image_url.'" alt="Product image" class="product-thumbnail-small" style="width:40px;height:40px;object-fit:cover;"></div>';
})

What changed: Added inline style="width:40px;height:40px;object-fit:cover;" to constrain the image to a fixed 40x40 thumbnail that crops proportionally.

---

Summary of Changes

File	Change
resources/views/product/partials/product_list.blade.php	Moved tw-w-full from image to product name header, moved business location <th> to last
resources/views/product/index.blade.php	Moved product_locations column to end of JS columns array
app/Http/Controllers/ProductController.php	Added 40x40px inline style to product image

Result

Before	After
Image column takes full width	Image is fixed at 40x40px
Product name column is narrow	Product name column takes full width
Business location is column 5	Business location is the last column