Skip to content

Commit ed81a31

Browse files
indumathi-muraliindumathi-murali
committed
Added Grid Sample.
1 parent 119f130 commit ed81a31

68 files changed

Lines changed: 25071 additions & 2 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.npmrc
2+
.vscode/
3+
node_modules/
4+
src/**/*.js
5+
dist/
6+
styles/*.*
7+
!styles/index.css

‎.npmignore‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.npmrc
2+
.vscode/
3+
.npmignore
4+
config.json
5+
gulpfile.js
6+
tsconfig.json
7+
node-modules/
8+
Jenkinsfile
9+
src/**/*.js

‎Jenkinsfile‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
#!groovy
2+
3+
node('EJ2Angularlatest') {
4+
try {
5+
deleteDir()
6+
7+
stage('Import') {
8+
git url: 'https://gitea.syncfusion.com/essential-studio/ej2-groovy-scripts.git', branch: 'master', credentialsId: env.GiteaCredentialID;
9+
shared = load 'src/shared.groovy'
10+
}
11+
12+
stage('Checkout') {
13+
checkout scm
14+
shared.getProjectDetails()
15+
shared.gitlabCommitStatus('running')
16+
}
17+
18+
stage('Install') {
19+
sh 'npm install'
20+
}
21+
22+
stage('Build') {
23+
sh 'gulp hide-license && npm run build && gulp finished'
24+
}
25+
26+
stage('Publish') {
27+
shared.publish()
28+
}
29+
30+
shared.gitlabCommitStatus('success')
31+
32+
deleteDir()
33+
}
34+
catch(Exception e) {
35+
shared.throwError(e)
36+
deleteDir()
37+
error('Build Failed')
38+
}
39+
}

‎README.md‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,26 @@
1-
# React-Feature-Rich-Grid
2-
This repository contains a complete example that shows how to use all the main features of the React DataGrid component in one place, making it easier to explore and understand its capabilities.
1+
# React-feature-rich-datagrid
2+
3+
This sample demonstrates the full capabilities of the Syncfusion [React Data Grid](https://www.syncfusion.com/react-components/react-data-grid) by integrating all available APIs into a single, interactive experience. Users can dynamically enable or disable features such as CRUD operations, editing, and exporting—directly through the UI—without writing a single line of code. This makes it an ideal tool for presales evaluations, customer demos, and internal testing, allowing users to explore and understand the grid's flexibility and power in real time.
4+
5+
<p align="center">
6+
<img src="src/assets/images/react-datagrid-preview.jpg" alt="React Data Grid Preview"/>
7+
</p>
8+
9+
## Project prerequisites
10+
Make sure that you have the compatible versions of [Visual Studio Code](https://code.visualstudio.com/download ) and [NodeJS](https://nodejs.org/en/download) or later version in your machine before starting to work on this project.
11+
12+
## How to run this application?
13+
14+
1. Clone the React-Feature-Rich-Grid repository.
15+
2. Run the `npm install` command to install the required packages
16+
3. Replace YOUR_LICENSE_KEY in registerLicense method of the index.tsx file with your license key.
17+
18+
<p align="center">
19+
<img src="src/assets/images/register-license.png" alt="React DataGrid Preview"/>
20+
</p>
21+
22+
4. Run your project using the `npm start` command.
23+
24+
## Further help
25+
For more help, check the [Syncfusion React Data Grid example](https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/overview),
26+
[Syncfusion React Data Grid documentation](https://ej2.syncfusion.com/react/documentation/grid/getting-started).

‎config.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"productOwner": "Mydeen SN"
3+
}

‎favicon.ico‎

6.42 KB
Binary file not shown.

‎gulpfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('@syncfusion/ej2-showcase-helper');

‎index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="description" content="Essential JS 2 for React - Feature Rich DataGrid">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
9+
<title>Essential JS 2 for React - Feature Rich DataGrid</title>
10+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
11+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
12+
<link href="https://cdn.syncfusion.com/ej2/29.1.33/material3.css" class="theme-primary" rel="stylesheet">
13+
</head>
14+
15+
<body>
16+
<div id="content-area"></div>
17+
</body>
18+
19+
</html>

‎license‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
2+
3+
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
4+
5+
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
6+
7+
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
8+
9+
The Syncfusion license that contains the terms and conditions can be found at
10+
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

‎package.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "@syncfusion/ej2-react-feature-rich-datagrid",
3+
"version": "1.0.0",
4+
"description": "Essential JS 2 - Feature Rich DataGrid",
5+
"author": "Syncfusion Inc.",
6+
"license": "SEE LICENSE IN license",
7+
"scripts": {
8+
"start": "webpack-dev-server --open --mode development",
9+
"build": "webpack --mode production",
10+
"ci-publish": "gulp publish-sample"
11+
},
12+
"devDependencies": {
13+
"@types/node": "^20.4.1",
14+
"@types/react": "^18.2.14",
15+
"@types/react-dom": "^18.2.6",
16+
"@types/react-router-dom": "^5.3.3",
17+
"css-loader": "^6.8.1",
18+
"html-webpack-plugin": "^5.5.3",
19+
"mini-css-extract-plugin": "^2.7.6",
20+
"terser-webpack-plugin": "^5.3.9",
21+
"ts-loader": "^9.4.4",
22+
"typescript": "^5.1.6",
23+
"webpack": "^5.88.1",
24+
"webpack-cli": "^5.1.4",
25+
"webpack-dev-server": "^4.15.1"
26+
},
27+
"dependencies": {
28+
"@syncfusion/ej2-react-buttons": "*",
29+
"@syncfusion/ej2-react-calendars": "*",
30+
"@syncfusion/ej2-react-dropdowns": "*",
31+
"@syncfusion/ej2-react-grids": "*",
32+
"@syncfusion/ej2-react-inputs": "*",
33+
"@syncfusion/ej2-react-lists": "*",
34+
"@syncfusion/ej2-react-navigations": "*",
35+
"@syncfusion/ej2-react-popups": "*",
36+
"@syncfusion/ej2-react-progressbar": "*",
37+
"react": "^18.2.0",
38+
"react-dom": "^18.2.0",
39+
"react-router-dom": "^6.14.1"
40+
}
41+
}

0 commit comments

Comments
 (0)