Adaptive Rendering
The adaptive rendering is an advanced capability that allows the Grid to adjust its layout and behavior based on the screen size by providing different rendering of the pager and the popup elements of the Grid, such as the column menu or an external editing form.
To enable adaptive rendering for the Grid, set its adaptive property to true.
To set the title of the adaptive popup rendered when the Grid is opened on a smaller screen, set the adaptiveTitle property of the component.
When adaptive rendering is enabled, the Grid adjusts its components to fit smaller screens. The adaptive components of the Grid include:
Note: The
alwaysExpandedproperty of the GridColumnMenuFilter, GridColumnMenuCheckboxFilter, and GridColumnMenuColumnsChooser components is not considered in adaptive mode. The column menu components are initially collapsed.
Adaptive Breakpoints
The adaptive rendering for the Grid uses the following default breakpoints:
- Small screens (up to 500px): Displays components in full-screen dialogs.
- Medium screens (500px to 768px): Displays components in pinned action sheets.
- Large screens (above 768px): Displays components in their default layout.
You can customize the breakpoints via the AdaptiveMode React Context.