Touch screens
Resize, reorder and fill by touch, keep a long press from selecting text, and leave vertical swipes to scroll the grid.
The grid reads pointer events, so a finger works where a mouse does: the column resizers, the header cells that reorder, the rows' drag handles and the fill handle all drag by touch, and a tap on a cell makes it the active cell. What the browser does with a finger before the page sees it is decided by CSS, and that CSS is yours.
Handles: touch-action: none
A browser pans the page when a finger moves, and tells the page the pointer was cancelled. An
element you drag must take that move from the browser with touch-action: none. Every handle the
grid drags is your element, so the property goes in your styles:
[data-grid-part="column-resizer"],
[data-grid-part="row-drag-handle"],
[data-grid-part="fill-handle"] {
touch-action: none;
}A header cell that reorders is larger than a handle and sits over the grid you scroll. Keep the vertical pans for the browser and the sideways moves for the drag:
[data-grid-part="header-cell"][data-reorderable] {
touch-action: pan-y;
}A finger moved sideways then drags the column. One moved up or down scrolls the grid, and the header no longer scrolls it sideways (the body still does).
Swipes scroll the body
The grid sets no touch-action of its own. A swipe on the body scrolls it as the browser does on
any scroll container: a press on a body cell by touch never starts a range drag, even with
cellSelection, so dragging across cells with a finger scrolls. A tap selects nothing beyond the
active cell; the keys, a mouse or a pen select ranges.
A long press
While a finger holds one of the grid's handles or a reorderable header cell, the grid keeps the long press to itself: it prevents the text selection and the context menu the browser would open. The press can then still turn into a drag. Released, the page's own behaviour comes back.
Elsewhere a long press is the browser's: on a body cell it selects the cell's text, which is what lets someone copy it on a phone. To turn that off, or the callout iOS shows over a link or an image, use your CSS:
[data-grid-part="cell"] {
user-select: none;
-webkit-touch-callout: none;
}Not built in
Pinch to zoom is the browser's. Touch gestures of the grid's own (a swipe to delete a row, a long press to open a menu) are yours, through the parts' props.
Server rendering
Render the grid on the server with React, hydrate it on the client, and know what the first HTML holds before the browser measures anything.
Coming from React Data Grid
Map React Data Grid's props, column options, renderers and examples onto this headless grid, and see what your app writes in their place.