|
1 | | -# grid landing pages |
| 1 | +# Ignite UI for React Examples |
2 | 2 |
|
3 | | -This project was generated with [App Builder Code Gen](https://www.appbuilder.dev/platform). |
| 3 | +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. |
| 4 | +[Explore each sample here before we go into details.](https://www.infragistics.com/react-grid-examples/home/inventory) |
4 | 5 |
|
5 | | -## Development server |
| 6 | +## Financial Portfolio App |
| 7 | +<img width="975" height="597" alt="React Financial Portfolio App" src="https://github.com/user-attachments/assets/2bea183f-b383-4e38-a654-194e36f9a1d9" /> |
6 | 8 |
|
7 | | -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. |
8 | 9 |
|
9 | | -## Build |
| 10 | +**Description:** |
| 11 | +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. |
10 | 12 |
|
11 | | -Run `npm run build` to build the application into an output directory. |
| 13 | +**Components Used:** |
| 14 | +- Data Grid |
| 15 | +- Avatar |
| 16 | +- Button |
| 17 | +- Icon |
| 18 | +- Linear Bar |
| 19 | +- Input Group |
| 20 | +- Excel Exporter Service |
| 21 | +- CSV Exporter Service |
12 | 22 |
|
| 23 | +**Features:** |
| 24 | +- Row Selection |
| 25 | +- Sorting |
| 26 | +- Column Hiding |
| 27 | +- Column Pinning |
| 28 | +- Exporting |
| 29 | +- Conditional Cell Styling |
| 30 | +- Filtering |
13 | 31 |
|
14 | | -## Running code style checks |
| 32 | +--- |
15 | 33 |
|
16 | | -Run `npm run lint` to execute the code styling rules for the project. |
| 34 | +## ERP/Inventory |
| 35 | +<img width="975" height="540" alt="React ERP/Inventory example" src="https://github.com/user-attachments/assets/0d1b17ae-1c03-4d0f-9e64-622f1a434b2d" /> |
17 | 36 |
|
18 | | -## Licensing |
19 | 37 |
|
20 | | -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. |
| 38 | +**Description:** |
| 39 | +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. |
21 | 40 |
|
22 | | -Alternatively run `npm run infragistics-login` for a guided login to our licensed feed. |
| 41 | +**Components Used:** |
| 42 | +- Hierarchical Grid |
| 43 | +- Data Chart |
| 44 | +- Rating |
| 45 | +- Dialog |
| 46 | +- Badge |
| 47 | +- Button |
| 48 | +- Icon |
| 49 | +- Excel Exporter Service |
| 50 | +- CSV Exporter Service |
23 | 51 |
|
24 | | -## Additional resources |
| 52 | +**Features:** |
| 53 | +- Row Selection |
| 54 | +- Sorting |
| 55 | +- Filtering |
| 56 | +- Column Moving |
| 57 | +- Column Hiding |
| 58 | +- Column Pinning |
| 59 | +- Exporting |
25 | 60 |
|
26 | | -- [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. |
| 61 | +--- |
| 62 | + |
| 63 | +## Org Chart/HR Portal |
| 64 | +<img width="975" height="601" alt="React HR Portal Example App" src="https://github.com/user-attachments/assets/7c58abe0-7d0d-4e47-9f4d-231a0fd58e33" /> |
| 65 | + |
| 66 | + |
| 67 | +**Description:** |
| 68 | +Integrating the Ignite UI for React Tree Grid, the portal lets users effectively manage, display, and oversee employees’ information. |
| 69 | + |
| 70 | +**Components Used:** |
| 71 | +- Tree Grid |
| 72 | +- Avatar |
| 73 | +- Button |
| 74 | +- Icon |
| 75 | +- Paginator |
| 76 | +- Excel Exporter Service |
| 77 | +- CSV Exporter Service |
| 78 | + |
| 79 | +**Features:** |
| 80 | +- Row Selection |
| 81 | +- Sorting |
| 82 | +- Excel Style Filtering |
| 83 | +- Column Hiding |
| 84 | +- Column Pinning |
| 85 | +- Exporting |
| 86 | +- Paging |
| 87 | + |
| 88 | +--- |
| 89 | + |
| 90 | +## Fleet Management System |
| 91 | +<img width="975" height="592" alt="React Fleet Management System Example" src="https://github.com/user-attachments/assets/1cd1fe7b-ca25-4000-b38f-3357823b0581" /> |
| 92 | + |
| 93 | + |
| 94 | +**Description:** |
| 95 | +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. |
| 96 | + |
| 97 | + |
| 98 | +**Components Used:** |
| 99 | +- Grid |
| 100 | +- Pie Chart |
| 101 | +- Category Chart |
| 102 | +- Card |
| 103 | +- Geographic Map |
| 104 | +- Overlay |
| 105 | +- Avatar |
| 106 | +- Badge |
| 107 | +- Tabs |
| 108 | +- Carousel |
| 109 | +- Slide |
| 110 | +- Divider |
| 111 | +- Select |
| 112 | +- Button |
| 113 | +- Icon |
| 114 | +- Excel Exporter Service |
| 115 | +- CSV Exporter Service |
| 116 | + |
| 117 | +**Features:** |
| 118 | +- Sorting |
| 119 | +- Exporting |
| 120 | +- Filtering |
| 121 | +- Column Pinning |
| 122 | +- Column Hiding |
| 123 | + |
| 124 | +--- |
| 125 | + |
| 126 | +## Sales Dashboard |
| 127 | +<img width="975" height="527" alt="React Sales Dashboard Example App" src="https://github.com/user-attachments/assets/b539083f-3896-4d57-8431-7a1abc5ac7d0" /> |
| 128 | + |
| 129 | + |
| 130 | +**Description:** |
| 131 | +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. |
| 132 | + |
| 133 | +**Components Used:** |
| 134 | +- Pivot Grid |
| 135 | +- Pivot Data Selector |
| 136 | +- Button |
| 137 | +- Icon |
| 138 | +- Toggle |
| 139 | +- Tooltip |
| 140 | +- Dropdown |
| 141 | +- Excel Exporter Service |
| 142 | +- CSV Exporter Service |
| 143 | + |
| 144 | +**Features:** |
| 145 | +- Sorting |
| 146 | +- Exporting |
| 147 | +- Filtering |
| 148 | +- Resizing |
| 149 | +- Super Compact Mode |
0 commit comments