This sample demonstrates how to render the Grid in desktop and mobile views, with the desktop displaying more columns and the mobile showing priority columns.
In this demo, the Grid initially renders in desktop view with all columns visible. Selecting Switch To Mobile View displays the Grid inside a simulated mobile device frame, showing only priority columns controlled by the visible property, with enableAdaptiveUI enabled and rowRenderingMode set to Vertical. Clearing the checkbox restores the standard desktop Grid layout.
Both layouts support sorting, filtering, and infinite scrolling, editing, and column chooser, through the Grid toolbar.
Injecting Module:
Grid features are provided through individual modules. To enable filtering, sorting, editing, column chooser, and infinite scrolling, inject the Filter, Sort, Edit, Toolbar, ColumnChooser, and InfiniteScroll, modules into the component providers.
Looking for the full React Data Grid component overview, features, pricing, and documentation? Visit our React Data Grid component page.