Skip to content

Get started with your next React project using these high-performance and feature-rich React example apps. Inspect the code, explore the controls, and customize them with ease.

Notifications You must be signed in to change notification settings

IgniteUI/react-grid-examples

Repository files navigation

Ignite UI for React Examples

Get started with our proven React grid samples. Instead of reinventing the wheel, you can inspect and rely on powerful, pre-built patterns that solve real problems with minimal effort. Explore each sample here before we go into details.

Financial Portfolio App

React Financial Portfolio App

Description:
This app uses the React Data Grid component and displays assets, profit, and loss analyses with the help of a high-performance UI and interactive dynamic charts.

Components Used:

  • Data Grid
  • Avatar
  • Button
  • Icon
  • Linear Bar
  • Input Group
  • Excel Exporter Service
  • CSV Exporter Service

Features:

  • Row Selection
  • Sorting
  • Column Hiding
  • Column Pinning
  • Exporting
  • Conditional Cell Styling
  • Filtering

ERP/Inventory

React ERP/Inventory example

Description:
With our React ERP/Inventory example app, businesses and users can track and monitor the quantity, location, and details of products in stock, as well as visualize orders for each item.

Components Used:

  • Hierarchical Grid
  • Data Chart
  • Rating
  • Dialog
  • Badge
  • Button
  • Icon
  • Excel Exporter Service
  • CSV Exporter Service

Features:

  • Row Selection
  • Sorting
  • Filtering
  • Column Moving
  • Column Hiding
  • Column Pinning
  • Exporting

Org Chart/HR Portal

React HR Portal Example App

Description:
Integrating the Ignite UI for React Tree Grid, the portal lets users effectively manage, display, and oversee employees’ information.

Components Used:

  • Tree Grid
  • Avatar
  • Button
  • Icon
  • Paginator
  • Excel Exporter Service
  • CSV Exporter Service

Features:

  • Row Selection
  • Sorting
  • Excel Style Filtering
  • Column Hiding
  • Column Pinning
  • Exporting
  • Paging

Fleet Management System

React Fleet Management System Example

Description:
This React sample app integrates Ignite UI for React Master-Detail Grid with a master-detail view for managing the acquisition, operations, and maintenance of an organization’s vehicles. It displays additional details for a given row by expanding/collapsing its content.

Components Used:

  • Grid
  • Pie Chart
  • Category Chart
  • Card
  • Geographic Map
  • Overlay
  • Avatar
  • Badge
  • Tabs
  • Carousel
  • Slide
  • Divider
  • Select
  • Button
  • Icon
  • Excel Exporter Service
  • CSV Exporter Service

Features:

  • Sorting
  • Exporting
  • Filtering
  • Column Pinning
  • Column Hiding

Sales Dashboard

React Sales Dashboard Example App

Description:
Built with React Pivot Grid, the dashboard is designed for sales teams and managers who need to monitor sales metrics, analyze data, and make informed decisions.

Components Used:

  • Pivot Grid
  • Pivot Data Selector
  • Button
  • Icon
  • Toggle
  • Tooltip
  • Dropdown
  • Excel Exporter Service
  • CSV Exporter Service

Features:

  • Sorting
  • Exporting
  • Filtering
  • Resizing
  • Super Compact Mode

About

Get started with your next React project using these high-performance and feature-rich React example apps. Inspect the code, explore the controls, and customize them with ease.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 9