Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 136 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -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
<img width="975" height="597" alt="React Financial Portfolio App" src="https://github.com/user-attachments/assets/2bea183f-b383-4e38-a654-194e36f9a1d9" />

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
<img width="975" height="540" alt="React ERP/Inventory example" src="https://github.com/user-attachments/assets/0d1b17ae-1c03-4d0f-9e64-622f1a434b2d" />

## 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
<img width="975" height="601" alt="React HR Portal Example App" src="https://github.com/user-attachments/assets/7c58abe0-7d0d-4e47-9f4d-231a0fd58e33" />


**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
<img width="975" height="592" alt="React Fleet Management System Example" src="https://github.com/user-attachments/assets/1cd1fe7b-ca25-4000-b38f-3357823b0581" />


**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
<img width="975" height="527" alt="React Sales Dashboard Example App" src="https://github.com/user-attachments/assets/b539083f-3896-4d57-8431-7a1abc5ac7d0" />


**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
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "grid-landing-pages",
"name": "react-grid-examples",
"version": "0.1.0",
"private": true,
"type": "module",
Expand Down