/

Intelligent Column Fit & Arrangement

Two independent, on-by-default responsive-grid features that keep a wide table usable without any horizontal scrolling on smaller screens.

Overview

Both features are on by default site-wide (XcrudConfig::$intelligentColumnFit and XcrudConfig::$intelligentColumnArrangement, both true), and both can be overridden per page:

$xcrud->intelligent_column_fit();
$xcrud->intelligent_column_arrangement();

// Or turn either off for this page specifically:
$xcrud->intelligent_column_fit(false);
MethodTypeDefaultDescription
intelligent_column_fit($enabled = true)boolXcrudConfig::$intelligentColumnFitPer-page override for Column Fit
intelligent_column_arrangement($enabled = true)boolXcrudConfig::$intelligentColumnArrangementPer-page override for Column Arrangement

They solve different width problems and don't conflict - see "How the two interact" below.

Column Fit

Column Fit live-measures, in the browser, which of a grid's columns actually fit its container's current width and shows only those - the rest are hidden behind a small per-row expand toggle that reveals them as a borderless "label: value" detail line for just that row when clicked. It's re-measured automatically on window resize, so a grid that fits perfectly on a wide monitor and only shows 4 of 8 columns on a laptop will show more or fewer as the window is dragged wider or narrower.

$xcrud->table('customers');
$xcrud->intelligent_column_fit();

This is purely additive and client-side - it changes nothing for a table whose columns already fit, or for a page that never enables it.

Column Arrangement

Column Arrangement targets narrow, phone-width viewports specifically (roughly ≤640px) where a table simply has no meaningful "sideways" reading left. Instead of shrinking or hiding columns, it reshapes each row entirely: every grid row becomes its own bordered, stacked card with one "Label: value" line per field. If the row has an image, photo, or camera-type field, that field is pinned as a thumbnail anchored to the card's edge instead of appearing as just another label:value line.

$xcrud->table('products');
$xcrud->intelligent_column_arrangement();

How the two interact

Column Fit and Column Arrangement are mutually aware, not competing: at the narrow (≤640px) breakpoint, Arrangement takes over from Fit automatically - the grid becomes stacked cards rather than a fit-measured row of columns. Above that width, Arrangement does nothing and Fit (if also enabled) keeps handling overflow the normal way. In practice you can leave both on everywhere and each will step in exactly where it's the right fit.