Index in React TreeGrid

8 Oct 20251 minute to read

Essential Studio for JavaScript TreeGrid is a feature-rich control for visualizing self-referential hierarchical data in a tabular layout. It binds data from sources such as JSON arrays, RESTful services, OData services, WCF services, or DataManager, and maps fields to columns. Child records can be expanded or collapsed using the tree column.

Key features include paging, sorting, filtering, and searching.

Key Features

  • Data sources: Binds the TreeGrid to JavaScript object arrays or DataManager.
  • Adaptive Layout: Optimized UI for small screens with clear viewing and efficient interactions.
  • Sorting: Supports multi-level sorting.
  • Filtering: Provides filter bar and menu modes for refining records.
  • Paging: Enables quick navigation between pages using the pager.
  • Editing: Supports cell and row editing modes for updating records.
  • Virtual scrolling: Efficiently handles and displays large data sets without performance degradation.
  • Columns: Column definitions act as the data schema for rendering values in a hierarchical structure.
    • Reordering: Drag and drop columns within the header row to reposition them.
    • Resizing: Adjust column width by dragging the header edge.
    • Cell Styling: Customize cell styles through CSS or programmatically.
  • Selection: Select rows or cells, including multiple selection with modifier keys or programmatically.
  • Templates: Use templates to build custom layouts and rendering within the TreeGrid.
  • Aggregation: Compute and display aggregate values for columns, including aggregates for child data.
  • Context menu: Display a context menu with actions when right-clicking cells, headers, or the pager.
  • Export: Export TreeGrid data to Excel, PDF, and CSV formats.
  • RTL support: Align content from right to left for right-to-left scripts.
  • Localization: Localize UI text and messages.