|
1 | 1 | # Customizing the React TreeGrid Columns Using Templates |
2 | 2 |
|
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. |
4 | 5 |
|
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. |
12 | 8 |
|
13 | 9 | ## Features |
14 | 10 |
|
15 | 11 | - Header templates for custom heading content |
16 | 12 | - Cell templates for rendering icons, formatted values, or custom JSX |
17 | 13 | - Conditional column customization based on data values |
18 | 14 |
|
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