Skip to content

Commit f9255b2

Browse files
Revise README structure and enhance content clarity
Updated the README to improve structure and clarity, adding sections for repository description, project prerequisites, installation, and running the application.
1 parent 8bba537 commit f9255b2

1 file changed

Lines changed: 37 additions & 23 deletions

File tree

README.md

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,47 @@
11
# Customizing the React TreeGrid Columns Using Templates
22

3-
A sample React project demonstrating how to customize TreeGrid column headers and cell content using templates and conditional rendering. This repository shows practical, minimal examples for applying header templates, cell templates, and conditional column formatting in a Syncfusion React TreeGrid component.
3+
## Repository Description
4+
This repository shows practical, minimal examples for applying header templates, cell templates, and conditional column formatting in a Syncfusion React TreeGrid component.
45

5-
Documentation: https://ej2.syncfusion.com/react/documentation/treegrid/columns/
6-
7-
Online examples: https://ej2.syncfusion.com/react/demos/#/material/treegrid/columntemplate
8-
9-
## Project overview
10-
11-
This quick-start project provides focused examples that illustrate how to replace default header text, render custom HTML within cells, and apply conditional templates to change column appearance at runtime. The samples are minimal and intended to be adapted into larger applications where column-level templating is required.
6+
## Overview
7+
A sample React project demonstrating how to customize TreeGrid column headers and cell content using templates and conditional rendering.
128

139
## Features
1410

1511
- Header templates for custom heading content
1612
- Cell templates for rendering icons, formatted values, or custom JSX
1713
- Conditional column customization based on data values
1814

19-
## Prerequisites
20-
21-
Ensure you have a recent LTS release of Node.js and a working `npm` installation. A code editor such as Visual Studio Code is recommended for exploring and modifying the samples.
22-
23-
## Installation and running
24-
25-
1. Clone this repository to your local machine.
26-
2. Open the project folder in Visual Studio Code (or your preferred editor).
27-
3. Install dependencies: `npm install`
28-
4. Start the development server: `npm start`
29-
5. Open the app in your browser (usually at `http://localhost:3000`).
30-
31-
32-
33-
15+
## Project prerequisites
16+
17+
Before starting, ensure you have the following installed:
18+
- **Node.js**: Latest stable version
19+
- **Visual Studio Code**: Latest version recommended
20+
- **npm**: Node Package Manager (included with Node.js)
21+
- Basic knowledge of React and JavaScript
22+
23+
## Installation
24+
25+
Clone and set up the project:
26+
27+
```
28+
git clone https://github.com/SyncfusionExamples/customizing-the-react-treegrid-columns-using-templates
29+
cd customizing-the-react-treegrid-columns-using-templates
30+
npm install
31+
```
32+
## Running the Application
33+
34+
Start the development server:
35+
36+
```
37+
npm start
38+
```
39+
40+
The application will open in your default browser. Any changes you make to the source files will automatically reload the application.
41+
42+
## Examples
43+
Explore Syncfusion EJ2 TreeGrid Column template and header template examples:
44+
45+
https://ej2.syncfusion.com/react/demos/#/fluent2/treegrid/header-template
46+
47+
https://ej2.syncfusion.com/react/demos/#/fluent2/treegrid/columntemplate

0 commit comments

Comments
 (0)