Skip to content
Open
Changes from 6 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
66 changes: 55 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,6 @@
# Getting Started with the Vue Tree Grid

A quick-start project that shows how to work with the Syncfusion Tree Grid in a Vue application. This project contains simple code customization, as well as some important features like binding data, customizing columns, and enable paging, sorting, and filtering.

Refer to the following documentation for the Syncfusion Vue Tree Grid component:
https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started-vue-3/

Check out this online example of the Syncfusion Vue Calendar component:
https://ej2.syncfusion.com/vue/demos/#/material/tree-grid/default.html

Refer to the following documentation for the feature modules in the Syncfusion Vue Tree Grid component:
https://ej2.syncfusion.com/vue/documentation/treegrid/module/

The [Vue TreeGrid](https://www.syncfusion.com/vue-components/vue-tree-grid?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples) is a feature-rich control used to visualize self-referential, hierarchical data effectively in a tabular format (a tree-like structure). A quick-start project that shows how to work with the Syncfusion Tree Grid in a Vue application. This project contains simple code customization, as well as some important features like binding data, customizing columns, and enable paging, sorting, and filtering.

## Project prerequisites

Expand All @@ -19,3 +9,57 @@ Make sure that you have the latest versions of Vue, Node, Vue Class Component, a
### How to run this application?

To run this application, you need to clone the `getting-started-with-the-vue-tree-grid` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `npm run serve` command.

## Features and Benefits

### Adaptive UI layout

The [Vue Tree Grid](https://www.syncfusion.com/vue-components/vue-tree-grid?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples) user interface is customized and redesigned for great views and usability on small screens. Filter, search, and edit dialogs are adaptive to the screen size.

### Column

Columns define the schema of a data source in Vue Tree Grid. Features include formatting, column definitions, text wrapping, column chooser, column menu, column reordering, and other important features.

### Paging

Through paging, a segment of data can be viewed from the assigned data source. The Vue Tree Grid offers built-in pager UI with options to customize its entire UI. It also has an on-demand paging mode for effective data retrieval from remote web services.

### Filtering

Filtering helps view specific or related records that meet a given filtering criteria. It supports various filter types that include powerful Excel-like filter. The Vue Tree Grid filter allows users to choose appropriate filter types, define their own custom filtering logic, and customize the filtering UI based on their application needs. Filtering with related parent or child records can be defined.


## Related links
[Learn More about Vue Tree Grid](https://www.syncfusion.com/vue-components/vue-tree-grid?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)

[Download Free Trial](https://www.syncfusion.com/downloads/vue?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)

[Pricing](https://www.syncfusion.com/sales/teamlicense?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)

[Documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)

[View Demos](https://github.com/SyncfusionExamples/getting-started-with-the-vue-tree-grid?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)

[Community Forums](https://www.syncfusion.com/forums/vue-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)

[Suggest a feature or report a bug](https://www.syncfusion.com/feedback/vue?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)

[Online example](https://ej2.syncfusion.com/vue/demos/#/bootstrap5/tree-grid/default.html?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)

[Knowledge base](https://support.syncfusion.com/kb/web/category/73?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)

## About Syncfusion Vue Components

Syncfusion's [Vue Components](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples) library is the only suite that you will ever need to build an application since it contains over 80 high-performance, lightweight, modular, and responsive UI Components in a single package. In addition to Tree Grid, we provide popular Vue Components such as [Chart](https://www.syncfusion.com/vue-components/vue-charts?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [Grid](https://www.syncfusion.com/vue-components/vue-grid?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [Scheduler](https://www.syncfusion.com/vue-components/vue-scheduler?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [Diagram](https://www.syncfusion.com/vue-components/vue-diagram?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), and [Word Processor](https://www.syncfusion.com/vue-components/vue-word-processor?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples).


### About Syncfusion
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [Angular](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [React](https://www.syncfusion.com/react-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [Vue](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples),[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

<hr style="height:0.3px;border:none;color:lightgrey;background-color:lightgrey;" />

<p align="center">
<a href="mailto:sales@syncfusion.com?Subject=Syncfusion Vue Tree Grid - GitHub" target="_top">sales@syncfusion.com</a> | <a href="https://www.syncfusion.com?utm_source=github&utm_medium=listing&utm_campaign=vue-tree-grid-github-samples)">www.syncfusion.com</a> | Toll Free: 1-888-9 DOTNET <br>
</p>