React TileLayout

  • Create sleek custom layouts by displaying information in an interactive dashboard-like view with configurable tiles.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • 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

  • 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

All KendoReact Components

waves bg

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.