EFX Grid is a custom element, providing simple ways to display and manipulate data in table layout. All HTML native properties and events are available in EFX Grid.
EFX Grid element and extensions are published under single package.
npm install @refinitiv-ui/efx-gridThe element is required theme to instantiate itself in the app. Refinitiv's design system is called Halo theme and you can install it from npm command.
npm install @refinitiv-ui/halo-themeImport EFX Grid and its themes into your application. To follow Refinitiv design system, it is required styles of some native elements e.g. typography.
The font "Proxima Nova Fin" shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text
// import element and its Halo dark theme
import '@refinitiv-ui/efx-grid';
import '@refinitiv-ui/efx-grid/themes/halo/dark';
// import native styles for typography, css variables, etc.
import '@refinitiv-ui/halo-theme/dark/imports/native-elements';Now the EFX Grid can be easily created by just writing the tag and setting the configuration as shown below:
<body>
<efx-grid></efx-grid>
<script>
var grid = document.getElementsByTagName("efx-grid")[0];
grid.config = {
/* See the document for all available options */
};
</script>
</body>See list of APIs, demo and more usage guide by visiting EFX Grid document
You can check out the full license here
However, Halo theme shall only be used within Refinitiv products or services due to license of the font "Proxima Nova Fin".