Empowering Mobile Users with Syncfusion React Data Grid’s Adaptive UI Layout
Tags: react, datagrid, webdev, mobile
Published: 2023-03-15 16:13:12

---
title: Empowering Mobile Users with Syncfusion React Data Grid’s Adaptive UI Layout
published: true
date: 2023-03-15 11:15:00 UTC
tags: react, datagrid, webdev, mobile
canonical_url: https://www.syncfusion.com/blogs/post/empowering-mobile-users-with-syncfusion-react-data-grids-adaptive-ui-layout.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1te2hsfvfaj0edp376j.png
---
As technology advances, users’ demands also advance regarding software interfaces. One area where this is particularly evident is in the realm of data grids. To meet these demands, Syncfusion has introduced a new layout design for its grid component, specifically designed to provide an optimal viewing experience and improve usability on small screens.

This feature ensures that users can easily interact with the grid on various devices, improving the overall usability of the component.

## Enable Adaptive UI Layout in Syncfusion React Data Grid

One of the most significant features of this new layout design is the ability to render row elements in both vertical and horizontal modes. In today’s mobile-first world, vertical rendering of row elements is becoming increasingly necessary. This feature allows more rows to be shown on the screen at once and can make it easier for users to scroll and interact with the grid. This can be useful for mobile devices, tablets, and small screens.

The UI interaction-oriented features such as filtering, sorting, searching, and dialog editing were also redesigned to fit small screens.

To enable the adaptive UI layout and vertical rendering mode, developers need to set the **enableAdaptiveUI** property of the grid to _true_ and the **rowRenderingMode** property to **vertical.** This will unleash the full potential of this new layout design.

We’ve included the following example to give you a better idea of this new layout.

**Note:** We’ve integrated the grid with a mobile layout for this example to give you a mobile experience.

```js
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateColumnDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Filter, Sort, Edit, Toolbar, Aggregate, Page } from ‘@syncfusion/ej2-react-grids’;
import * as React from ‘react’;
import { data } from './datasource';
function App() {
    const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: ‘Dialog' };
    const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
    const validationRule = { required: true };
    const orderidRules = { required: true, number: true };
    const filterOptions = { type: 'Excel' };
    const renderingMode = 'Vertical';
    let grid;
    
    const load = () => {
        grid = document.getElementById('adaptivebrowser').ej2_instances[0];
        grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];
    };
    
    const footerSum = (props) => {
        return (<span>Total Models: {props.Count}</span>);
    };
    
    let menuFilter = { type: 'Menu' };
    let checkboxFilter = { type: 'CheckBox' };
    
    return (<div className="e-adaptive-demo e-bigger">
            <div className="e-mobile-layout">
              <div className="e-mobile-content">
                  <GridComponent id="adaptivebrowser" dataSource={data} height='100%' ref={g => grid = g} enableAdaptiveUI={true} rowRenderingMode={renderingMode} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} created={created}>
                    <ColumnsDirective>
                      <ColumnDirective field='SNO' headerText='S NO' width='150' isPrimaryKey={true} validationRules={orderidRules}></ColumnDirective>
                      <ColumnDirective field='Model' headerText='Model Name' width='200' editType='dropdownedit' validationRules={validationRule}/>
                      <ColumnDirective field='Developer' headerText='Developer' width='200' filter={menuFilter} validationRules={validationRule}></ColumnDirective>
                      <ColumnDirective field='ReleaseDate' headerText='Released Date' editType='datepickeredit' type='date' format='yMMM' width='200'></ColumnDirective>
                      <ColumnDirective field='AndroidVersion' headerText='Android Version' width='200' filter={checkboxFilter} validationRules={validationRule}></ColumnDirective>
                    </ColumnsDirective>
                    
                    <Inject services={[Filter, Sort, Edit, Toolbar, Aggregate, Page]}/>
                      <AggregatesDirective>
                       <AggregateDirective>
                        <AggregateColumnsDirective>
                          <AggregateColumnDirective field='Model' type='Count' footerTemplate={footerSum}> </AggregateColumnDirective>
                        </AggregateColumnsDirective>
                      </AggregateDirective>
                    </AggregatesDirective>
                  </GridComponent>
              </div>
            </div>
            
            <br></br>
              <div className="datalink">Source:
                <a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones" target="_blank">Wikipedia: List of Android smartphones</a>
              </div>
            </div>);
}
export default App;
```

The next images show the adaptive layout’s horizontal and vertical rendering modes.
<table>
<tbody>
<tr style="background: none;">
<td style="width: 50%; border: none !important;"><figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Vertical-Rendering-Mode.png" alt="Vertical Rendering Mode" style="width:100%">

  <figcaption>Vertical Rendering Mode</figcaption>
</td>
<td style="width: 50%; border: none !important;"><figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Horizontal-Rendering-Mode.png" alt="Horizontal Rendering Mode" style="width:100%">

  <figcaption>Horizontal Rendering Mode</figcaption>

</figure>
</td>
</tr>
</tbody>
</table>

## Data Grid Features with Adaptive UI Layout

Now, let’s look at the different grid features in the new layout. The following .gif demonstrates the new layout’s sorting, filtering, searching, and dialog editing features and how to interact with them.

![Data Grid with Adaptive UI Layout](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Adaptive-UI-Layout.gif)

## References

For more details, refer to our [documentation](https://ej2.syncfusion.com/react/documentation/grid/adaptive/ "Getting started with adaptive UI layout in React Data Grid component") and [demos](https://ej2.syncfusion.com/react/demos/#/bootstrap5/grid/adaptive-layout "Adaptive UI layout in React Data Grid live demo").

## Conclusion

The adaptive UI layout feature in [Syncfusion’s React Data Grid](https://www.syncfusion.com/react-components/react-data-grid "Syncfusion React Data Grid") offers a unique solution for grid lovers and users looking for optimal viewing and improved usability on small screens.

With the ability to render row elements in vertical mode, developers can create more user-friendly and efficient interfaces for small-screen devices.

Please try out this great feature and provide valuable feedback in the comments section.

Are you already a Syncfusion user? You can download the product setup [here](https://www.syncfusion.com/account/downloads/studio/ "License and downloads page for Syncfusion Essential Studio"). If you’re not yet a Syncfusion user, you can download a [free 30-day trial](https://www.syncfusion.com/downloads/ "Free evaluation of Essenstial Studio").

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Restrict Editing of Word Documents Based on User in a Web Application](https://www.syncfusion.com/blogs/post/restrict-editing-of-word-documents-based-on-user-in-a-web-application.aspx "Blog: Restrict Editing of Word Documents Based on User in a Web Application")
- [Preact vs. React](https://www.syncfusion.com/blogs/post/preact-vs-react.aspx "Blog: Preact vs. React")
- [7 VS Code Extensions for React Developers](https://www.syncfusion.com/blogs/post/7-vs-code-extensions-for-react-developers.aspx "Blog: 7 VS Code Extensions for React Developers")
- [How to Integrate the Syncfusion React Mention Component with Rich Text Editor](https://www.syncfusion.com/blogs/post/integrate-react-mention-component-with-rich-text-editor.aspx "Blog: How to Integrate the Syncfusion React Mention Component with Rich Text Editor")