From 7f6d0bac67e7ee4681a75b394ce6a16eca6584f7 Mon Sep 17 00:00:00 2001 From: Deyan Kamburov Date: Thu, 4 Dec 2025 16:03:05 +0200 Subject: [PATCH 1/2] Revise README for Ignite UI for React examples Updated README to reflect new project focus on Ignite UI for React examples, including descriptions and components used for various applications. --- README.md | 149 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 136 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 8833933..75778f1 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,149 @@ -# grid landing pages +# Ignite UI for React Examples -This project was generated with [App Builder Code Gen](https://www.appbuilder.dev/platform). +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.](https://www.infragistics.com/react-grid-examples/home/inventory) -## Development server +## Financial Portfolio App +React Financial Portfolio App -Run `npm start` to build the application, start a web server and open the application in the default browser. The application will open in `http://localhost:3003/` by default. -## Build +**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. -Run `npm run build` to build the application into an output directory. +**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 -## Running code style checks +--- -Run `npm run lint` to execute the code styling rules for the project. +## ERP/Inventory +React ERP/Inventory example -## Licensing -See the [License FAQ and Installation documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-licensing) for information on how to upgrade to the full licensed package, if the project is using a Trial version of Ignite UI for React, and how to setup your environment and CI to use our licensed npm feed. +**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. -Alternatively run `npm run infragistics-login` for a guided login to our licensed feed. +**Components Used:** +- Hierarchical Grid +- Data Chart +- Rating +- Dialog +- Badge +- Button +- Icon +- Excel Exporter Service +- CSV Exporter Service -## Additional resources +**Features:** +- Row Selection +- Sorting +- Filtering +- Column Moving +- Column Hiding +- Column Pinning +- Exporting -- [Ignite UI for React](https://www.infragistics.com/products/ignite-ui-react) - to learn more about the product or to dive into component specifics and showcases. +--- + +## 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 From 2e873f2f4aa399b617b0cd992d803246f6f37a34 Mon Sep 17 00:00:00 2001 From: Deyan Kamburov Date: Thu, 4 Dec 2025 16:30:32 +0200 Subject: [PATCH 2/2] chore: rename the package to react-grid-examples --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 896eebb..2586530 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "grid-landing-pages", + "name": "react-grid-examples", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "grid-landing-pages", + "name": "react-grid-examples", "version": "0.1.0", "dependencies": { "@floating-ui/react": "^0.27.8", diff --git a/package.json b/package.json index 4031289..0af215f 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "grid-landing-pages", + "name": "react-grid-examples", "version": "0.1.0", "private": true, "type": "module",