React TileLayout

Overview

The React TileLayout component is perfect for creating interactive dashboards using a single UI component with a flexible set of configuration options. It features draggable and resizable tiles, static tiles, automatic shuffling of tiles when items are rearranged by the user and much more. The rich configuration options ensure that each tile is completely customizable. Use this React component to build stunning and interactive custom layouts.

See React TileLayout demo

React TileLayout Component Overview

Tile Interactions

With end-user interactivity being the primary driver of the component, the KendoReact TileLayout component gives users the flexibility of rearranging and resizing the available tiles. This lets users increase the size of more important tiles, drag tiles around to change their position and much more—all through intuitive interactions.

See React TileLayout Tile Interactions demo

React TileLayout Component Resizing

Tile Configuration Options

Tiles are at the core of the KendoReact TileLayout. They can be static, resized with a resize handler, dragged & dropped to change their location, as well as edited. The layout of the React TileLayout component is defined through a set number of columns and then the available Tile collection will auto-populate the available columns and rows within the TileLayout component. Additionally, aspects like the gap between tiles can be configured across the entire component.

See React TileLayout Tile Configuration Options demo

React TileLayout Vertical Resize

Auto Flows

The KendoReact TileLayout component provides out-of-the-box defaults for how tiles should behave when they are placed within the component. In addition to the default AutoFlow, React developers can also customize the flow to their liking, based on the industry-standard CSS grid-auto-flow property. This enables React developers to lean on their existing knowledge for developing with the TileLayout component instead of learning a custom and complex implementation.

See React TileLayout Auto Flows demo

React TileLayout Component Auto Flows

Custom Rendering

Every aspect of the KendoReact TileLayout component is customizable. Each tile within the React TileLayout component can be customized to fit any look and feel. With the ability to pass in a custom renderer and component to be in charge of the rendering of each tile, the possibilities for customization are endless.

See React TileLayout Custom Rendering demo

React TileLayout Custom Rendering

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.