@visns-studio/visns-components 6.24.3 → 6.25.0

package/src/components/DataGrid.jsx

@@ -47,9 +47,20 @@ import { resolveFormVariant } from '../utils/formLayout';
 import { confirmDialog } from './utils/ConfirmDialog';
 import {
     useDensity,
+    useNarrowViewport,
     useAvailableHeight,
+    useCardRowsEnabled,
     rowsForHeight,
+    gridHeightFloor,
+    NARROW_COLUMN_MIN_WIDTH,
 } from './utils/useDensity';
+import {
+    CARD_COLUMN_NAME,
+    MAX_BODY_LINES,
+    cardRowHeight,
+    deriveCardLayout,
+} from './utils/cardLayout';
+import StackedRow from './columns/StackedRow';
 import { openRecordWindow } from './utils/popupWindow';
 import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../utils/relationshipSortingUtils';
 import {
@@ -1072,7 +1083,145 @@ const DataGrid = forwardRef(
         // unreliable after auto-refresh on an idle tab (background-throttled
         // rAF/timers). A fixed height bypasses measurement entirely and
         // prevents action buttons from being clipped.
-        const { grid } = useDensity();
+        const { grid, density } = useDensity();
+
+        // Width, which is a different question from density — see
+        // NARROW_VIEWPORT_QUERY. A phone is both; a browser window dragged to
+        // a third of a monitor is only this one.
+        const isNarrow = useNarrowViewport();
+
+        // ---------------------------------------------------------------
+        // CARD MODE — the same grid, projected onto one synthetic column
+        // ---------------------------------------------------------------
+        //
+        // Below 640px the columns are built exactly as they always are — every
+        // per-type renderer, the trailing Action column, the lot — and then
+        // ONE column is handed to the grid whose `render` draws them stacked.
+        //
+        // This is the whole design decision, and it is what is NOT rewritten
+        // that makes it worth having: `dataSource`, the search debounce, the
+        // `where` clauses, `suppressRepeated`, `setTotal`/`setTableData`,
+        // auto-refresh, selection, the pager and its finished ≤640px CSS all
+        // carry on knowing nothing about any of it. Above all `onRowClick`
+        // resolves a link by CELL INDEX, and the card IS a cell — so a tap on
+        // a card follows the same link the table's first column does, through
+        // the same code.
+        //
+        // A `renderRow` override was the obvious alternative and needs
+        // `rowHeight={null}` plus natural measurement, which is precisely the
+        // configuration `utils/useDensity.js` documents as unreliable on a
+        // coarse pointer. A sibling card list re-owns skip/limit/sortInfo/
+        // filterValue and becomes the second fetch path.
+        const cardRowsEnabled = useCardRowsEnabled();
+        const cardOverrides = tableSetting?.cardLayout;
+
+        const cardMapping = useMemo(() => {
+            // Precedence, highest first: a view that says no; a view that
+            // supplies its own mapping (which opts itself in, whatever the
+            // app-wide attribute says); the app-wide attribute.
+            if (cardOverrides === false) {
+                return null;
+            }
+
+            const viewOptedIn =
+                cardOverrides !== null &&
+                cardOverrides !== undefined &&
+                typeof cardOverrides === 'object';
+
+            if (!cardRowsEnabled && !viewOptedIn) {
+                return null;
+            }
+
+            // A grouped grid draws bucket headers between its rows and the
+            // card knows nothing about them. Hard off rather than half-right.
+            if (ajaxSetting?.groupBy) {
+                return null;
+            }
+
+            return deriveCardLayout(columns, {
+                overrides: cardOverrides,
+                maxLines:
+                    density === 'large'
+                        ? MAX_BODY_LINES.large
+                        : MAX_BODY_LINES.default,
+                log: debugLog,
+            });
+        }, [
+            columns,
+            cardOverrides,
+            cardRowsEnabled,
+            ajaxSetting?.groupBy,
+            density,
+        ]);
+
+        // The reader's own escape hatch, per grid and for this session only.
+        // Nothing about card mode is a preference worth persisting to a
+        // profile: it answers "I need the filter row for the next minute", and
+        // a choice that outlives the tab is a choice somebody has to undo on
+        // a device they are no longer holding.
+        const cardPreferenceKey = `visns:cardRows:${ajaxSetting?.url ?? ''}`;
+        const [cardPreference, setCardPreference] = useState('');
+
+        useEffect(() => {
+            let stored = '';
+
+            try {
+                stored =
+                    window.sessionStorage.getItem(cardPreferenceKey) || '';
+            } catch (unavailable) {
+                // Private browsing, or storage disabled. The default stands.
+            }
+
+            setCardPreference(stored);
+        }, [cardPreferenceKey]);
+
+        const chooseCardPreference = useCallback(
+            (next) => {
+                setCardPreference(next);
+
+                try {
+                    window.sessionStorage.setItem(cardPreferenceKey, next);
+                } catch (unavailable) {
+                    // The choice still holds for as long as the grid is mounted.
+                }
+            },
+            [cardPreferenceKey]
+        );
+
+        const cardCapable = isNarrow && Boolean(cardMapping);
+        const cardMode = cardCapable && cardPreference !== 'table';
+
+        // `tableSetting` is SPREAD onto the datagrid, so every key a view puts
+        // in it becomes a prop. `cardLayout` is ours and means nothing to the
+        // toolkit; leaving it in the spread hands ReactDataGrid an unknown
+        // prop, and unknown props on this component end up on the DOM node as
+        // React attribute warnings.
+        const gridTableSetting = useMemo(() => {
+            if (!tableSetting || tableSetting.cardLayout === undefined) {
+                return tableSetting;
+            }
+
+            const { cardLayout, ...rest } = tableSetting;
+
+            return rest;
+        }, [tableSetting]);
+
+        // Every row is this tall, computed from the mapping rather than
+        // measured — see `cardRowHeight`. It reaches the grid in FOUR places
+        // and all four have to agree: `rowHeight`, `minRowHeight`, the page
+        // size (`rowsForHeight`, or the pager reads "Page 1 of 236") and the
+        // height floor's own pitch.
+        const cardHeight = useMemo(() => {
+            if (!cardMode) {
+                return null;
+            }
+
+            const hasActions =
+                (memoizedSettings?.length ?? 0) > 0 ||
+                (cardMapping?.actionColumns?.length ?? 0) > 0;
+
+            return cardRowHeight(cardMapping, { density, hasActions });
+        }, [cardMode, cardMapping, memoizedSettings, density]);
 
         // ---------------------------------------------------------------
         // Per-column autoGrow
@@ -3123,9 +3272,27 @@ const DataGrid = forwardRef(
                     })),
                 });
 
+                // "The last column is the row-action column; its icons handle
+                // their own clicks, so a click on the column itself is not a
+                // row click." THE RULE IS POSITIONAL AND THE POSITION IS NOT
+                // ALWAYS THE ACTION COLUMN: in card mode the columns are
+                // `[__checkbox-column, __card]`, the card IS last, and every
+                // tap on a card would be swallowed here.
+                //
+                // The exemption names the card rather than re-testing the
+                // trailing column for `name === 'setting'`, which is what it
+                // ought to be. A grid whose config carries no `settings` gets
+                // no trailing action column at all, so its last DATA column is
+                // the one this branch currently ignores — making that column
+                // clickable is a behaviour change across three applications,
+                // and this pass has no reason to make it. Above 640px nothing
+                // reaches here differently than it did.
+                const clickedColumn = rowProps.columns[columnIndex];
+
                 if (
                     rowProps.columns.length > 1 &&
-                    columnIndex === rowProps.columns.length - 1
+                    columnIndex === rowProps.columns.length - 1 &&
+                    clickedColumn?.name !== CARD_COLUMN_NAME
                 ) {
                     debugLog('🔍 Last column clicked - no action');
                     // Handle last column click
@@ -4286,13 +4453,27 @@ const DataGrid = forwardRef(
                             // ("dd / mm / yyyy" in Firefox, glyph included -
                             // Firefox will not hide it); below ~160px the
                             // native input clips its own value.
+                            // On a narrow viewport the floor rises to
+                            // NARROW_COLUMN_MIN_WIDTH, because 80px is where
+                            // seven flex columns land on a phone and 80px is
+                            // an ellipsis, not a column — every header on
+                            // /contacts rendered as "FI…", "LA…", "TI…". The
+                            // columns then total more than the screen and the
+                            // grid's own body scrolls sideways, which it is
+                            // already built to do; the page does not move.
+                            //
+                            // A view's own `column.minWidth` still wins, so a
+                            // column that really is narrow stays narrow.
                             minWidth:
                                 column.minWidth ??
-                                (['date', 'datetime', 'datetime-local'].includes(
-                                    column.type
-                                )
-                                    ? Math.max(grid.columnMinWidth, 160)
-                                    : grid.columnMinWidth),
+                                Math.max(
+                                    isNarrow ? NARROW_COLUMN_MIN_WIDTH : 0,
+                                    ['date', 'datetime', 'datetime-local'].includes(
+                                        column.type
+                                    )
+                                        ? Math.max(grid.columnMinWidth, 160)
+                                        : grid.columnMinWidth
+                                ),
                             maxWidth: column.maxWidth ?? undefined,
                             textAlign: column.textAlign ?? undefined,
                             textVerticalAlign:
@@ -5424,7 +5605,131 @@ const DataGrid = forwardRef(
                         });
                     }
 
-                    setGridColumns(newColumns);
+                    // CARD MODE — hand the grid ONE column that draws the rest.
+                    //
+                    // Every descriptor above still exists and is still the only
+                    // thing that formats a value; the card calls them. That is
+                    // the point of building the full array first and throwing
+                    // away nothing but the LAYOUT.
+                    //
+                    // The filter defaults below are computed and set either
+                    // way, and they still reach the server: the datagrid's
+                    // `getFilterValueForColumns` is a `map`, not a `filter`, so
+                    // an entry whose column is not mounted passes through
+                    // untouched. A view whose Stage filter defaults to "active
+                    // deals only" opens on active deals here as well.
+                    if (cardMode && cardMapping) {
+                        // `newColumns` is `columns.map(...)` with the Action
+                        // column pushed after it, so index i of one is index i
+                        // of the other for every config column.
+                        const builtByColumn = new Map(
+                            columns.map((column, index) => [
+                                column,
+                                newColumns[index],
+                            ])
+                        );
+
+                        const valueOf = (column, row) => {
+                            const path = Array.isArray(column.id)
+                                ? column.id
+                                : String(column.id ?? '').split('.');
+
+                            return path.reduce(
+                                (value, segment) =>
+                                    value === null || value === undefined
+                                        ? value
+                                        : value[segment],
+                                row
+                            );
+                        };
+
+                        const renderCardCell = (column, row) => {
+                            const built = builtByColumn.get(column);
+
+                            if (!built || typeof built.render !== 'function') {
+                                return null;
+                            }
+
+                            return built.render({
+                                data: row,
+                                value: valueOf(column, row),
+                                column: built,
+                            });
+                        };
+
+                        // The rail, and it is the trailing Action column's own
+                        // render restated — same `splitSettingEntries`, same
+                        // exclusion of settings an action column already draws,
+                        // same role and per-row gating inside `renderSetting`.
+                        // Both entry points already stopPropagation, which is
+                        // what makes an icon safe inside a clickable card.
+                        const renderCardActions = (row) => {
+                            if (row?.__treeParent) {
+                                return null;
+                            }
+
+                            const { inlineActions, standard } =
+                                splitSettingEntries(memoizedSettings);
+
+                            const controls = [
+                                ...inlineActions.map((config) =>
+                                    renderRowAction(config, row)
+                                ),
+                                ...standard
+                                    .filter(
+                                        (setting) =>
+                                            !actionColumnSettingIds.has(
+                                                setting.id
+                                            )
+                                    )
+                                    .map((setting) =>
+                                        renderSetting(setting, row)
+                                    ),
+                                ...cardMapping.actionColumns.map((column) =>
+                                    renderCardCell(column, row)
+                                ),
+                            ].filter(Boolean);
+
+                            return controls.length > 0 ? controls : null;
+                        };
+
+                        setGridColumns([
+                            {
+                                name: CARD_COLUMN_NAME,
+                                header: '',
+                                sortable: false,
+                                defaultFlex: 1,
+                                // Lands on the CELL, which is what the ≤640px
+                                // block in global-datagrid.css needs: the
+                                // checkbox column is a cell too and must keep
+                                // the grid's padding and centring.
+                                className: 'datagrid-card-cell',
+                                // The NARROW floor is deliberately NOT applied.
+                                // It exists to stop seven flex columns
+                                // collapsing to an ellipsis each; one flex
+                                // column has no such problem, and a 160px floor
+                                // on it is how a card would find a horizontal
+                                // scrollbar it has no use for.
+                                minWidth: 0,
+                                // Inherited verbatim from whichever column the
+                                // mapping decided the row follows, so
+                                // `onRowClick` runs the same navigate /
+                                // window.open / openRecordWindow cascade it
+                                // runs for the table's first cell.
+                                link: cardMapping.link ?? {},
+                                render: ({ data }) => (
+                                    <StackedRow
+                                        row={data}
+                                        mapping={cardMapping}
+                                        renderCell={renderCardCell}
+                                        renderActions={renderCardActions}
+                                    />
+                                ),
+                            },
+                        ]);
+                    } else {
+                        setGridColumns(newColumns);
+                    }
 
                     const newFilterValue = columns
                         .filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
@@ -5511,7 +5816,22 @@ const DataGrid = forwardRef(
                 .catch((error) => {
                     console.error('Error in fetching dropdown data: ', error);
                 });
-        }, [columns, filterDataSource, memoizedSettings, grid]);
+            // `isNarrow` is in here because the column floor is built from it:
+            // without it, rotating a phone or dragging a window across the
+            // 640px line keeps the widths the grid was first built with.
+            //
+            // `cardMode` and `cardMapping` ride along for the same reason —
+            // crossing 640px, or a reader pressing Table, has to rebuild the
+            // column array, not just restyle it.
+        }, [
+            columns,
+            filterDataSource,
+            memoizedSettings,
+            grid,
+            isNarrow,
+            cardMode,
+            cardMapping,
+        ]);
 
         // Force re-render when filterDataSource updates to ensure dropdown filters get their data
         const [renderKey, setRenderKey] = useState(0);
@@ -5692,11 +6012,38 @@ const DataGrid = forwardRef(
                 return el ? el.getBoundingClientRect().height : 0;
             };
 
+            // TWO BUGS LIVED IN THIS SUM, AND THEY CANCELLED.
+            //
+            // `.InovuaReactDataGrid__header-wrapper` ALREADY CONTAINS the
+            // filter row, so adding the filter wrapper counted it twice. And
+            // the pager is `.inovua-react-pagination-toolbar` — the toolkit's
+            // own toolbar component, with no grid prefix on it — so
+            // `.InovuaReactDataGrid__pagination-toolbar` matched nothing and
+            // the pager was never counted at all.
+            //
+            // On /contacts both errors are the same 41px and the total came
+            // out right by accident. They stop cancelling the moment the two
+            // differ, which is any density change: the filter row steps to
+            // 32px under a coarse pointer while the pager stays 41.
+            //
+            // So: take the header wrapper WHOLE when it is there, and only
+            // fall back to summing the column-header and filter rows when it
+            // is not.
+            const headerWrapper = heightOf(
+                '.InovuaReactDataGrid__header-wrapper'
+            );
+            const header =
+                headerWrapper > 0
+                    ? headerWrapper
+                    : heightOf('.InovuaReactDataGrid__column-header') +
+                      heightOf(
+                          '.InovuaReactDataGrid__column-header__filter-wrapper'
+                      );
+
             const chrome =
-                heightOf('.InovuaReactDataGrid__header-wrapper, .InovuaReactDataGrid__column-header') +
-                heightOf('.InovuaReactDataGrid__column-header__filter-wrapper') +
+                header +
                 heightOf('.InovuaReactDataGrid__footer-wrapper, .InovuaReactDataGrid__footer') +
-                heightOf('.InovuaReactDataGrid__pagination-toolbar');
+                heightOf('.inovua-react-pagination-toolbar');
 
             return chrome > 0 ? chrome : null;
         };
@@ -5758,14 +6105,33 @@ const DataGrid = forwardRef(
                     ? resolvedHeight
                     : fitToRows(dataCount, window.innerHeight);
 
+            // The chrome and the row pitch, in the one place that reads both.
+            // The pitch rule is `contentHeight`'s, restated here rather than
+            // duplicated in spirit: measurement first, floored by the density
+            // unit and then by ROW_PITCH_FLOOR, so a stale or unavailable
+            // reading can only ever over-allocate.
+            //
+            // In card mode the pitch is the CARD's height, not the density
+            // unit — a card is 84–122px against a rowUnit of 52, and costing
+            // five of them at 52 sizes the body less than half what it needs.
+            // It is floored the same way for the same reason: measurement
+            // reads the previous render.
+            const gridMetrics = () => ({
+                chrome: measureGridChrome() ?? GRID_CHROME,
+                pitch: Math.max(
+                    measureRowPitch() ?? 0,
+                    cardHeight ?? 0,
+                    grid.rowUnit ?? 0,
+                    ROW_PITCH_FLOOR
+                ),
+            });
+
             // A window-sized grid asks for as many rows as fit — 37 on a 1440p
             // screen. A table holding four of them rendered the other 33 as
             // empty body, which is the single most dated thing about an index
             // page: a thousand pixels of nothing under the last row, with the
             // pager stranded at the bottom of it.
             const contentHeight = () => {
-                const chrome = measureGridChrome() ?? GRID_CHROME;
-
                 // ERR HIGH, DELIBERATELY.
                 //
                 // The two errors here are not symmetrical. Over-allocating
@@ -5777,12 +6143,11 @@ const DataGrid = forwardRef(
                 // use; measured, rows render at 44px against a rowUnit of 32.
                 // Measurement is preferred when it is available, but it reads
                 // the DOM and the DOM is not always there when this runs — so
-                // there is a floor under whatever it returns.
-                const pitch = Math.max(
-                    measureRowPitch() ?? 0,
-                    grid.rowUnit ?? 0,
-                    ROW_PITCH_FLOOR
-                );
+                // there is a floor under whatever it returns. That is
+                // `gridMetrics`, shared with the floor below: the ceiling and
+                // the floor costing a row differently is how a grid ends up
+                // asking for rows it has no room to draw.
+                const { chrome, pitch } = gridMetrics();
 
                 const rows = Math.max(dataCount || 0, MIN_VISIBLE_ROWS);
 
@@ -5801,7 +6166,28 @@ const DataGrid = forwardRef(
             // being expressed, not a measurement. Honouring it literally put
             // ~975px of empty body under the two rows on a customer's Sites
             // tab.
-            const renderedHeight = Math.min(availableHeight, contentHeight());
+            // ...and a FLOOR under the result, because a ceiling alone let the
+            // grid be drawn shorter than its own chrome. See `gridHeightFloor`
+            // in useDensity for the measurements; the short version is that a
+            // phone leaves ~130px under the stat strip and the grid's header,
+            // filter row and pager need 123 of it, so the body got seven
+            // pixels and painted nothing. `contentHeight()` already carries
+            // MIN_VISIBLE_ROWS, but it only ever reaches the grid through a
+            // `Math.min`, so it could make the grid shorter and never taller.
+            //
+            // Below the floor the grid overflows its slot and the PAGE
+            // scrolls, which is what a page whose content does not fit is
+            // supposed to do.
+            const floorFor = () => {
+                const { chrome, pitch } = gridMetrics();
+
+                return gridHeightFloor(chrome, pitch, MIN_VISIBLE_ROWS);
+            };
+
+            const renderedHeight = Math.max(
+                Math.min(availableHeight, contentHeight()),
+                floorFor()
+            );
 
             // Re-measure ONCE MORE after the browser has painted.
             //
@@ -5816,7 +6202,10 @@ const DataGrid = forwardRef(
             // stops it looping: it only writes when the corrected height
             // actually differs.
             const frame = requestAnimationFrame(() => {
-                const corrected = Math.min(availableHeight, contentHeight());
+                const corrected = Math.max(
+                    Math.min(availableHeight, contentHeight()),
+                    floorFor()
+                );
 
                 if (Math.abs(corrected - renderedHeight) > 1) {
                     setGridStyle((prev) =>
@@ -5833,8 +6222,20 @@ const DataGrid = forwardRef(
                 height: renderedHeight,
             }));
 
-            // Everything below sizes the REQUEST, so it reads availableHeight.
-            const minHeight = availableHeight;
+            // Everything below sizes the REQUEST, so it reads availableHeight
+            // — floored to the same minimum the grid is DRAWN at.
+            //
+            // Without the floor the two disagree in the worst possible
+            // direction: the pager on a phone read "Page 1 of 236" for 236
+            // contacts, because `rowsForHeight(130, 123, 52)` is
+            // `max(1, floor(7 / 52))` — one contact per page, 236 pages of
+            // them. The floor is applied here rather than swapping in
+            // `renderedHeight` because `renderedHeight` follows the CONTENT,
+            // and sizing the request from it is the feedback loop the comment
+            // above warns about: a short table shrinks the grid, a shorter
+            // grid asks for fewer rows, and it can never grow back to find out
+            // there was more data.
+            const minHeight = Math.max(availableHeight, floorFor());
 
             // How many rows to ask for.
             //
@@ -5886,7 +6287,14 @@ const DataGrid = forwardRef(
                 // first pass, before the grid exists to be measured.
                 const chrome = measureGridChrome() ?? GRID_CHROME;
 
-                setLimit(rowsForHeight(minHeight, chrome, grid.rowUnit));
+                // THE UNIT, NOT THE DENSITY UNIT, in card mode. `rowUnit` is
+                // 52 under a coarse pointer and a card is 122; asking for
+                // rowsForHeight(…, 52) on a phone requests twelve rows into a
+                // body with room for five, which is the "Page 1 of 236" shape
+                // of bug the floor above was added to fix at the other end.
+                setLimit(
+                    rowsForHeight(minHeight, chrome, cardHeight ?? grid.rowUnit)
+                );
             }
             return () => cancelAnimationFrame(frame);
         }, [
@@ -5895,6 +6303,7 @@ const DataGrid = forwardRef(
             resolvedHeight,
             window.innerHeight,
             grid,
+            cardHeight,
             ajaxSetting?.take,
             userProfile?.rows_per_page,
             userProfile?.settings?.rows_per_page,
@@ -6001,6 +6410,17 @@ const DataGrid = forwardRef(
                                 pageData={pageData}
                                 pageSetting={pageSetting}
                                 onBulkUploadClick={handleBulkUploadClick}
+                                cardCapable={cardCapable}
+                                cardMode={cardMode}
+                                onCardModeChange={chooseCardPreference}
+                                columns={columns}
+                                columnsMetadata={columnsMetadata}
+                                sortBy={ajaxSetting?.sortBy ?? null}
+                                sort={ajaxSetting?.sort ?? null}
+                                // The SAME function a column header calls, so
+                                // there is one sort implementation and the
+                                // sheet cannot drift from it.
+                                onSort={handleSort}
                             />
                         </div>
                         <div className={styles.dataGridTopRightContainer}>
@@ -6063,7 +6483,7 @@ const DataGrid = forwardRef(
                             key={`datagrid-${ajaxSetting?.url || ''}-${
                                 ajaxSetting?.groupBy ? 'grouped' : 'ungrouped'
                             }-${groupRenderKey}`}
-                            {...tableSetting}
+                            {...gridTableSetting}
                             columns={gridColumns}
                             dataSource={dataSource}
                             {...(ajaxSetting && ajaxSetting.groupBy
@@ -6591,7 +7011,7 @@ const DataGrid = forwardRef(
                             }
                             headerProps={headerProps}
                             idProperty="id"
-                            minRowHeight={grid.minRowHeight}
+                            minRowHeight={cardHeight ?? grid.minRowHeight}
                             onFilterValueChange={(fv) => {
                                 handleFilterChange(fv, filterValue);
                             }}
@@ -6608,7 +7028,19 @@ const DataGrid = forwardRef(
                             // need — measurement is unreliable in a
                             // background-throttled tab and clips action
                             // buttons. See the density table in useDensity.
-                            rowHeight={grid.rowHeight}
+                            //
+                            // A card is always a number, computed per view
+                            // from its mapping. Same argument, more force: the
+                            // one platform card mode runs on is the one this
+                            // comment says not to trust measurement on.
+                            rowHeight={cardHeight ?? grid.rowHeight}
+                            // Header AND filter row in one prop: the header
+                            // wrapper returns null for the whole thing, and
+                            // a column header over a card is a header for a
+                            // column that does not exist. See the Sort control
+                            // in DataGridSearch for what replaces the header's
+                            // other job.
+                            {...(cardMode ? { showHeader: false } : {})}
                             rowStyle={getRowStyle}
                             selected={selected}
                             showZebraRows={true}
@@ -6629,11 +7061,20 @@ const DataGrid = forwardRef(
                                 border: '1px solid #d1d5db',
                                 overflow: 'hidden',
                             }}
-                            className={
+                            className={[
                                 ajaxSetting?.groupBy
                                     ? 'InovuaReactDataGrid--grouped datagrid-with-grouping datagrid-fixed-group-headers'
-                                    : 'datagrid-without-grouping'
-                            }
+                                    : 'datagrid-without-grouping',
+                                // The hook the ≤640px block in
+                                // global-datagrid.css needs to strip the cell's
+                                // padding and its right border — a card owns
+                                // its own gutters, and a cell divider down the
+                                // right of a full-width row is a line to
+                                // nowhere.
+                                cardMode ? 'datagrid-card-mode' : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
                             // The real prop is `checkboxColumn` (bool | column
                             // object) — {...tableSetting} spreads the view's
                             // `checkboxColumn: true` and this object, placed