Implementing the Web Components Datagrid
Web Components are reusable user interface widgets that are created
using open Web technology. They are part of the browser and so they do not depend on external libraries
such as AngularJS or JQuery.
Web Components are of particular interest to ag-Grid as I see them as the future for reusable components.
A true Web Component will be reusable in any framework. Angular's directives are based on Web Components.
Web components are an emerging technology and not available in all browsers. Some browsers lacking support
can be plugged using polyfills. The examples on this page use
polyfill from Google. The examples on this page have been tested to work with latest versions of Chrome
and Firefox on Windows. They failed using IE 11 and Safari on Windows. I have not done extensive testing
on which browsers Web Components as what browsers support Web Components and which don't is not a grid
problem / discussion, it's specific to Web Components. If you are going to use Web Components in your
application, then which browsers your application will run on is a big question you need to answer for
Using ag-Grid Web Component
When using Web Components, you have the choice of using the bundled version of ag-Grid
or the CommonJS version.
When the ag-Grid script loads, it does not register the Web Component. This is because the
Web Component is an optional part of ag-Grid and you need to tell ag-Grid you
want to use it.
// get ag-Grid to install the web component
ag-Grid registers as a tag named 'ag-grid'. To insert a grid into your application, use the
through html attributes.
var myGrid = document.querySelector('#myGrid');
Basic Web Components Example
The example below shows a simple grid using Web Components.
Complex Web Components Example
The complex example for Web Components is similar to that for Angular. This is on purpose as
Angular components are based on Web Components. The example demonstrates the following:
- Events: All data out of the grid comes through events. These events
are native browser events and can be listened to one of:
a) Calling addEventListener(eventName, handler) on the element
b) Add an onXXX handler directly to the element or
c) Add an onXXX handler directly to the grid options.
In the example,
the event 'columnResized' is added in each of these three ways.
- Attributes: Attributes can be used for setting up the grid.
The example uses such properties for the simple data types (ie when
to 'true' IF the attribute is provided WITHOUT any value. If the attribute is not provided,
it is taken as false. Attributes can be changed after the grid is initialised,
and the grid will update if appropriate (eg open up your dev tools and
change the 'group-headers' and set it to 'false').
- Properties: The more complex properties (eg row and column data)
are attached directly to the grid DOM element.
- Grid API: The grid can be interfaced with through it's API. The following
interact via the API:
a) The quickFilter text.
b) The Grid API and Column API buttons
c) The 'Refresh Data via API' buton
- Changing Attributes & Properties: When an attribute or property changes value,
the grid, if appropriate, acts on this change. This is done in the example in the following locations:
a) The 'Show Tool Panel' checkbox has it's value bound to the 'showToolPanel'
property of the grid.
b) The 'Refresh Data via Element' generates new data for the grid by attaching
it to the rowData property.
To get the grid to release resources, call api.destroy(). If you do not do this, old grids will hang around
and add to a memory leak problem in your application.
Now you can go to interfacing
to learn about accessing all the features of the grid.