@refinitiv-ui/efx-grid
v6.0.168
Published
Grid Components Library
Downloads
1,031
Readme
EFX Grid
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.
Installation
EFX Grid element and extensions are published under single package.
npm install @refinitiv-ui/efx-grid
The 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-theme
Usage
Import 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>
Documentation
See list of APIs, demo and more usage guide by visiting EFX Grid document
License
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".