pinning a column on both left and right sides.I’ve combed through the implementations of the pinning functionality in React datagrids and have distilled the following list of sub features: Ignite UI grid component by Infragistics.We’ll take a look at the following JavaScript Data Grids: In this article I also intend to compare the implementation of this feature across other major enterprise targeted datagrids for JavaScript and React.Ĭolumn pinning as a general datagrid feature is supported by all major JavaScript datagrid vendors but is often given a different name e.g.
Ag grid competitors full#
Although pinning as a general datagrid feature is supported by all major datagrid vendors, only ag-Grid supports full spectrum of requirements that users have towards pinning. In this article I want to demonstrate certain features of pinning functionality based on how we implemented in ag-Grid. If you’ve used Excel a lot, you’re probably used this functionality once or twice. The “frozen” part of the datatable will be fixed, while the scrollable part will remain movable. In effect, this feature splits a datagrid into two separate parts: the “frozen” one and the “scrollable” one. With column pinning you can fix a column on the left or on the right side of the grid to prevent it getting out of user view when scrolling horizontally. This feature is useful in cases when a javascript datagrid contains many columns that cause horizontal scrolling. Sometimes it’s also referred to as column fixing or column freezing. For example, the datagrid by IgniteUI requires you to memorize the syntax for conditionals and loops provided by their templating engine.Column pinning is a standard feature of all datagrids. Cell templates have one advantage - they can be compiled and later reused multiple times with different data which has a positive effect on performance. This feature enables you to define a presentation using a built-in template mechanism. Now let’s look at advantages and disadvantages of each method and where you’ll need stateful components that only ag-Grid provides. Here’s the table that shows which functionality each datagrid implements:
cell templates with custom syntax for loops and conditionals.In general, cell customization can be implemented using one of the following: Just as in the previous article, we’ll be comparing implementations against these guys: And as I’ll show you in a minute, only ag-Grid provides capabilities required to implement complex stateful components in a performance optimized way. Most datagrids that target enterprise have this functionality, however the way they implement it differs significantly. sparkline:Ĭell rendering or templating is a feature that allows you to render completely arbitrary DOM inside the cell.
Or you might need to implement a full-blown stateful component that renders complex UI, e.g. However, sometimes you need to customize appearance of a cell by tweaking styles or adding extra HTML elements like buttons or inputs:
This is enough if you just want to show the value. When rendering the contents of cells all datagrids take values and render them inside the cells as plain strings wrapped in a block level DOM element, typically HTMLDivElement. Build Your Own JavaScript App With ag-Grid.Here at ag-Grid a developer experience working on complex scenarios has always been the top priority for us and this article is meant to show it to you. This mechanism is commonly known as cell templating or cell rendering. In this article I want to explore the datagrids capabilities when it comes to the customization of cell content. In my previous article I looked at column pinning functionality and showed how the implementation in ag-Grid gives the most flexibility to developers and end users among all JavaScript datagrids.
Ag grid competitors series#
This articles continuous the series of explaining datagrids features and comparing their implementation in enterprise JavaScript datagrids.
0 kommentar(er)
