Skip to content

Explore these feature-packed Web Components Grid examples crafted with Ignite UI for Web Components. Inspect the code, explore the controls, and get a head-start.

Notifications You must be signed in to change notification settings

IgniteUI/webcomponents-grid-examples

Repository files navigation

Ignite UI for Web Components Examples

Explore how to build lightning-fast apps with these Web Components examples.

https://www.infragistics.com/webcomponents-grid-examples/home/inventory

Each sample demonstrates the power of Ignite UI’s Web Components Grids, ensuring scalability, interactivity, and flexibility. Use them as a starting point to create scalable, customizable solutions.

Financial Portfolio App

Web Components Financial Portfolio App

Description:
The Financial Portfolio app in Web Components delivers a clear overview of assets, profits, and losses using a sleek, responsive interface and dynamic, interactive charts. Designed with the Bootstrap Light theme, it provides a professional look and ensures a consistent user experience.

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

Web Components ERP/Inventory example

Description:
Built with the Ignite UI for Web Components Hierarchical Grid and styled with the Material Light theme, the ERP/Inventory example app enables users to manage and monitor large product datasets efficiently. It allows businesses to keep track of quantities, locations, and product details without performance slowdowns.

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

Web Components HR Portal Example App

Description:
The HR Portal sample app leverages the Ignite UI for Web Components Tree Grid to present and manage employee information in an intuitive, hierarchical view. With its focus on usability, the portal simplifies the management of company-wide personnel data.

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

Web Components Fleet Management System Example

Description:
This Fleet Management System showcases how the Ignite UI for Web Components Grid can power a detailed master-detail layout for operational tracking. This Web Components example app is tailored for managing fleet information, covering acquisition, maintenance, and performance details of each vehicle.

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

Web Components Sales Dashboard Example App

Description:
This Web Components example app demonstrates how to visualize and analyze key sales metrics using the Pivot Grid from Ignite UI for Web Components. Designed for data-driven teams, it enables users to evaluate sales by product, region, and time, while spotting trends through powerful interactive filtering and pivoting.

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

Explore these feature-packed Web Components Grid examples crafted with Ignite UI for Web Components. Inspect the code, explore the controls, and get a head-start.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 10