IntegralUI Web

Native Web Components for Angular, React and Vue


IntegralUI TreeGrid
Displays hierarchical data structures in multiple columns
Appearance
  • Customize the appearance of every control part: background, border, columns, rows, cells and scrollbars
  • Separate look for each row state: normal, selected, focused, hovered and disabled
  • Opton to show even/odd rows in alternate colors using custom styles
  • Option to change appearance of each row separately
  • Themes: Office and Midnight
  • Option to create your own Themes
  • Option to change the overall appearance using your own custom settings with conditions
Data Formatting
Choose the way data is presented using standard data formats
  • Each column can have its own data format
  • Support for standard Numeric and Date formats including localization
Drag and Drop
Reorder rows using advanced drag drop operations
  • Use built-in reordering or create your own custom reordering
  • Option to drag and drop multiple rows
  • Drag Drop rows from/to other components
  • Choose whether rows can be dragged or whether they can accept drops
  • Option to drop copies of dragged rows while holding SHIFT key
  • Use built-in operation where rows are reordered in standard way showing the reorder position tooltip
  • Ability to create your own custom drag drop operation
  • Support for all standard drag drop events
  • Auto expanding while mouse cursor hovers over target row, allows you to easily reorder rows
  • Auto scrolling near component area edges allows you to easily scroll the current view
Editing
Advanced editing options available
  • Different built-in editors ready to use: Button, CheckBox, Date, DropList, Numeric, Progress, Rating, Slider and Text
  • Customize the editing process with your own custom editors
  • Option to handle different events and enhance the editing with your own custom code
Events
Control the flow of operations using large number of events
  • Change events during sorting and filtering
  • Column and Row add/remove events
  • Column and Row selection events
  • Column resize event
  • Drag Drop events during each step of drag and drop operation
  • Editing events
  • Expand/Collapse events
  • Keyboard related events
  • Mouse Click events: Click, DoubleClick and RightClick
  • Mouse hovering events
  • Notification events during loading and update
  • Pagination events
  • Scrolling events when scroll position changes
Expand/Collapse
Manage the appareance and behavior of expand box
  • Auto-expand during drag and drop
  • Option to replace the expand box with your own icon
Grouping
Arranged data dynamically in different groups.
  • Use drag and drop of column headers to create groups on demand
  • Groups can be expanded or collapsed
  • Rearrange the group order using drag and drop in grouping panel
  • Support for aggregation functions for each column cells that can be different for each group
  • Set groups from code
Filtering
Advanced built-in filtering system
  • Built-in suport for number and string filter operations
  • Filter can accept multiple values and performs complex operations with AND, OR criteria
  • Option to create your own custom filtering criteria
High Performance
Maintain high performance while loading and updating your data
  • Full screen grid size with high performance
  • Using virtualization you can load thousands of rows in milliseconds
  • Provides a flat list of whole tree hierarchy that allows you to easily navigate among rows
Keyboard Navigation
Navigate through rows using keyboard
  • Use arrow keys to navigate among rows
  • Edit row cells using keyboard
  • Option to handle keyboard events and select rows by pressing keys
Layout
Organize the content of each column header and footer or row cells in custom layouts
  • Add your own custom content using column and row templates
  • Each column and row can have its own template or template can be shared
  • You can change the template content based on custom conditions
  • Option to add other components or custom HTML elements inside the template
  • Each column and row can have its own context menu or tooltip
  • Show customizable toolbar when row is hovered or selected
  • Columns can be fixed on left or right side
  • Option to add custom drop down menus in column header
Pagination
Divide the grid data in multiple views
  • Create your own pagination controls by using built-in methods and events
  • Option to set the page size that determines the maximum number of rows per page.
  • Pagination is endabled or disabled on demand
Scrolling
Manage the appearance and behavior of scrollbars
  • Option to show or hide horizontal and vertical scrollbars separately
  • Determine whether the component is scrollable
  • Determine the scrolling speed of mouse wheel from 5 supported values
  • Option to set up scroll position from code
  • Customize the appareance of scrollbars using custom styles
  • Scroll to specific row from code
Selection
Manage row selection in efficient way
  • Four ways to select rows: None, One, MiltiSimple and MultiExtended
  • Choose whether only a single row or multiple rows are selected
  • Selection is done with mouse, touch and/or keyboard
  • Option to preserve selection while doing other operations
  • Ability to have multiple selection using keyboard keys: CTRL and SHIFT
  • Option to select rows from code
Sorting
Choose how rows are sorted by using built-in or custom sorting
  • Ability to create your own custom sort operation very easily
  • Sort rows in ascending or descending order, or choose none to stop sorting
  • Sort rows by using three built-in types: integer, double and string
Tooltips
Show customizable tooltips
  • Each column and row can have its own tooltip
  • Choose how soon a tolltip will popup, and how long should remain visible