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.
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.
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.
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.
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.