AutoComplete Filtering

The AutoComplete control takes control of its source collectionView filtering in order to show only items that match what the user typed.

If you want to keep control of the filter, set the itemsSource property to your CollectionView's items property. The AutoComplete will create a new CollectionView for its internal use, and the original filtering will be preserved.

For example, the AutoComplete below uses a filtered CollectionView as its itemsSource. The filter remains active while searching for items as the user types:

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create a filtered CollectionView to use as a data source let view = new wijmo.CollectionView(getData(), { filter: theFilterFunction }); showItemCount(); // // create the AutoComplete using the CollectionView's items as a source let theAutoComplete = new input.AutoComplete('#theAutoComplete', { displayMemberPath: 'country', itemsSource: view.items }); // // toggle our filter document.querySelector('#filter').addEventListener('click', e => { view.filter = e.target.checked ? theFilterFunction : null; theAutoComplete.itemsSource = view.items; showItemCount(); }); // // our filter function function theFilterFunction(item) { return item.popk > 50000; } // // show filtered item count function showItemCount() { let msg = wijmo.format('Source list contains <b>{length:n0}</b> countries.', view.items); document.querySelector('#itemCount').innerHTML = msg; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity AutoComplete Filtering</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="form-group"> <div id="theAutoComplete"></div> </div> <div class="form-check"> <label class="form-check-label" for="filter">Apply Filter</label> <input id="filter" type="checkbox" checked="checked"> </div> <div id="itemCount"></div> </div> </body> </html> // export function getData() { return [ { id: 1, country: 'Luxembourg', gdpm: 57825, popk: 563, gdpcap: 102708 }, { id: 2, country: 'Switzerland', gdpm: 664005, popk: 8238, gdpcap: 80602 }, { id: 3, country: 'Norway', gdpm: 388315, popk: 5205, gdpcap: 74604 }, { id: 4, country: 'Macao', gdpm: 46178, popk: 647, gdpcap: 71372 }, { id: 5, country: 'Qatar', gdpm: 166908, popk: 2421, gdpcap: 68941 }, { id: 6, country: 'Ireland', gdpm: 283716, popk: 4635, gdpcap: 61211 }, { id: 7, country: 'United States', gdpm: 18036650, popk: 321601, gdpcap: 56083 }, { id: 8, country: 'Singapore', gdpm: 292734, popk: 5535, gdpcap: 52887 }, { id: 9, country: 'Denmark', gdpm: 295091, popk: 5660, gdpcap: 52136 }, { id: 10, country: 'Australia', gdpm: 1225286, popk: 23940, gdpcap: 51181 }, { id: 11, country: 'Iceland', gdpm: 16718, popk: 333, gdpcap: 50204 }, { id: 12, country: 'Sweden', gdpm: 493042, popk: 9851, gdpcap: 50049 }, { id: 13, country: 'San Marino', gdpm: 1558, popk: 31, gdpcap: 50258 }, { id: 14, country: 'Netherlands', gdpm: 750696, popk: 16937, gdpcap: 44322 }, { id: 15, country: 'United Kingdom', gdpm: 2858482, popk: 65110, gdpcap: 43902 }, { id: 16, country: 'Austria', gdpm: 374261, popk: 8621, gdpcap: 43412 }, { id: 17, country: 'Canada', gdpm: 1550537, popk: 35825, gdpcap: 43280 }, { id: 18, country: 'Finland', gdpm: 232077, popk: 5472, gdpcap: 42411 }, { id: 19, country: 'Germany', gdpm: 3365293, popk: 82176, gdpcap: 40952 }, { id: 20, country: 'Belgium', gdpm: 454288, popk: 11209, gdpcap: 40528 }, { id: 21, country: 'United Arab Emirates', gdpm: 370296, popk: 9581, gdpcap: 38648 }, { id: 22, country: 'France', gdpm: 2420163, popk: 64275, gdpcap: 37653 }, { id: 23, country: 'New Zealand', gdpm: 172257, popk: 4647, gdpcap: 37068 }, { id: 24, country: 'Israel', gdpm: 299413, popk: 8377, gdpcap: 35742 }, { id: 25, country: 'Japan', gdpm: 4124211, popk: 126981, gdpcap: 32478 }, { id: 26, country: 'Brunei Darussalam', gdpm: 12930, popk: 417, gdpcap: 31007 }, { id: 27, country: 'Italy', gdpm: 1815759, popk: 60796, gdpcap: 29866 }, { id: 28, country: 'Puerto Rico', gdpm: 102906, popk: 3474, gdpcap: 29621 }, { id: 29, country: 'Kuwait', gdpm: 114079, popk: 4110, gdpcap: 27756 }, { id: 30, country: 'South Korea', gdpm: 1377873, popk: 50617, gdpcap: 27221 }, { id: 31, country: 'Spain', gdpm: 1199715, popk: 46423, gdpcap: 25843 }, { id: 32, country: 'The Bahamas', gdpm: 8854, popk: 364, gdpcap: 24324 }, { id: 33, country: 'Bahrain', gdpm: 31119, popk: 1294, gdpcap: 24048 }, { id: 34, country: 'Cyprus', gdpm: 19330, popk: 847, gdpcap: 22821 }, { id: 35, country: 'Malta', gdpm: 9752, popk: 429, gdpcap: 22731 }, { id: 36, country: 'Taiwan', gdpm: 523006, popk: 23492, gdpcap: 22263 }, { id: 37, country: 'Slovenia', gdpm: 42798, popk: 2063, gdpcap: 20745 }, { id: 38, country: 'Saudi Arabia', gdpm: 646002, popk: 31386, gdpcap: 20582 }, { id: 39, country: 'Portugal', gdpm: 199032, popk: 10411, gdpcap: 19117 }, { id: 40, country: 'Trinidad and Tobago', gdpm: 24631, popk: 1358, gdpcap: 18137 }, { id: 41, country: 'Greece', gdpm: 195320, popk: 10858, gdpcap: 17988 }, { id: 42, country: 'Czech Republic', gdpm: 185156, popk: 10538, gdpcap: 17570 }, { id: 43, country: 'Estonia', gdpm: 22704, popk: 1313, gdpcap: 17291 }, { id: 44, country: 'Equatorial Guinea', gdpm: 13819, popk: 799, gdpcap: 17295 }, { id: 45, country: 'Oman', gdpm: 64121, popk: 3840, gdpcap: 16698 }, { id: 46, country: 'St. Kitts and Nevis', gdpm: 915, popk: 56, gdpcap: 16339 }, { id: 47, country: 'Palau', gdpm: 287, popk: 18, gdpcap: 15944 }, { id: 48, country: 'Slovakia', gdpm: 86629, popk: 5421, gdpcap: 15980 }, { id: 49, country: 'Barbados', gdpm: 4385, popk: 280, gdpcap: 15660 }, { id: 50, country: 'Uruguay', gdpm: 53107, popk: 3416, gdpcap: 15546 } ]; } body { margin-bottom: 24px; } label { margin-right: 3px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; // import { Component, enableProdMode, NgModule, Inject, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { DataService, TDataItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('theAutoComplete') theAutoComplete: input.AutoComplete; view: wijmo.CollectionView; // constructor(@Inject(DataService) private dataService: DataService) { this.view = new wijmo.CollectionView(dataService.getData(), { filter: this._filterFunction }); } // private _filter = true; get filter() { return this._filter; } set filter(value: boolean) { if (this._filter !== value) { this.view.filter = value ? this._filterFunction : null; this.theAutoComplete.itemsSource = this.view.items; this._filter = value; } } // private _filterFunction(item: TDataItem) { return item.popk > 50000; } } // @NgModule({ imports: [WjInputModule, BrowserModule, FormsModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity AutoComplete Filtering</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="form-group"> <wj-auto-complete #theAutoComplete [displayMemberPath]="'country'" [itemsSource]="view.items"> </wj-auto-complete> </div> <div class="form-check"> <label class="form-check-label" for="filter">Apply Filter</label> <input id="filter" type="checkbox" [(ngModel)]="filter"> </div> <div>Source list contains <b>{{view.items.length | number:'1.0-0'}}</b> countries.</div> </div> import { Injectable } from '@angular/core'; // export type TDataItem = { id: number; country: string; gdpm: number; popk: number; gdpcap: number; } // @Injectable() export class DataService { getData() { return <TDataItem[]>[ { id: 1, country: 'Luxembourg', gdpm: 57825, popk: 563, gdpcap: 102708 }, { id: 2, country: 'Switzerland', gdpm: 664005, popk: 8238, gdpcap: 80602 }, { id: 3, country: 'Norway', gdpm: 388315, popk: 5205, gdpcap: 74604 }, { id: 4, country: 'Macao', gdpm: 46178, popk: 647, gdpcap: 71372 }, { id: 5, country: 'Qatar', gdpm: 166908, popk: 2421, gdpcap: 68941 }, { id: 6, country: 'Ireland', gdpm: 283716, popk: 4635, gdpcap: 61211 }, { id: 7, country: 'United States', gdpm: 18036650, popk: 321601, gdpcap: 56083 }, { id: 8, country: 'Singapore', gdpm: 292734, popk: 5535, gdpcap: 52887 }, { id: 9, country: 'Denmark', gdpm: 295091, popk: 5660, gdpcap: 52136 }, { id: 10, country: 'Australia', gdpm: 1225286, popk: 23940, gdpcap: 51181 }, { id: 11, country: 'Iceland', gdpm: 16718, popk: 333, gdpcap: 50204 }, { id: 12, country: 'Sweden', gdpm: 493042, popk: 9851, gdpcap: 50049 }, { id: 13, country: 'San Marino', gdpm: 1558, popk: 31, gdpcap: 50258 }, { id: 14, country: 'Netherlands', gdpm: 750696, popk: 16937, gdpcap: 44322 }, { id: 15, country: 'United Kingdom', gdpm: 2858482, popk: 65110, gdpcap: 43902 }, { id: 16, country: 'Austria', gdpm: 374261, popk: 8621, gdpcap: 43412 }, { id: 17, country: 'Canada', gdpm: 1550537, popk: 35825, gdpcap: 43280 }, { id: 18, country: 'Finland', gdpm: 232077, popk: 5472, gdpcap: 42411 }, { id: 19, country: 'Germany', gdpm: 3365293, popk: 82176, gdpcap: 40952 }, { id: 20, country: 'Belgium', gdpm: 454288, popk: 11209, gdpcap: 40528 }, { id: 21, country: 'United Arab Emirates', gdpm: 370296, popk: 9581, gdpcap: 38648 }, { id: 22, country: 'France', gdpm: 2420163, popk: 64275, gdpcap: 37653 }, { id: 23, country: 'New Zealand', gdpm: 172257, popk: 4647, gdpcap: 37068 }, { id: 24, country: 'Israel', gdpm: 299413, popk: 8377, gdpcap: 35742 }, { id: 25, country: 'Japan', gdpm: 4124211, popk: 126981, gdpcap: 32478 }, { id: 26, country: 'Brunei Darussalam', gdpm: 12930, popk: 417, gdpcap: 31007 }, { id: 27, country: 'Italy', gdpm: 1815759, popk: 60796, gdpcap: 29866 }, { id: 28, country: 'Puerto Rico', gdpm: 102906, popk: 3474, gdpcap: 29621 }, { id: 29, country: 'Kuwait', gdpm: 114079, popk: 4110, gdpcap: 27756 }, { id: 30, country: 'South Korea', gdpm: 1377873, popk: 50617, gdpcap: 27221 }, { id: 31, country: 'Spain', gdpm: 1199715, popk: 46423, gdpcap: 25843 }, { id: 32, country: 'The Bahamas', gdpm: 8854, popk: 364, gdpcap: 24324 }, { id: 33, country: 'Bahrain', gdpm: 31119, popk: 1294, gdpcap: 24048 }, { id: 34, country: 'Cyprus', gdpm: 19330, popk: 847, gdpcap: 22821 }, { id: 35, country: 'Malta', gdpm: 9752, popk: 429, gdpcap: 22731 }, { id: 36, country: 'Taiwan', gdpm: 523006, popk: 23492, gdpcap: 22263 }, { id: 37, country: 'Slovenia', gdpm: 42798, popk: 2063, gdpcap: 20745 }, { id: 38, country: 'Saudi Arabia', gdpm: 646002, popk: 31386, gdpcap: 20582 }, { id: 39, country: 'Portugal', gdpm: 199032, popk: 10411, gdpcap: 19117 }, { id: 40, country: 'Trinidad and Tobago', gdpm: 24631, popk: 1358, gdpcap: 18137 }, { id: 41, country: 'Greece', gdpm: 195320, popk: 10858, gdpcap: 17988 }, { id: 42, country: 'Czech Republic', gdpm: 185156, popk: 10538, gdpcap: 17570 }, { id: 43, country: 'Estonia', gdpm: 22704, popk: 1313, gdpcap: 17291 }, { id: 44, country: 'Equatorial Guinea', gdpm: 13819, popk: 799, gdpcap: 17295 }, { id: 45, country: 'Oman', gdpm: 64121, popk: 3840, gdpcap: 16698 }, { id: 46, country: 'St. Kitts and Nevis', gdpm: 915, popk: 56, gdpcap: 16339 }, { id: 47, country: 'Palau', gdpm: 287, popk: 18, gdpcap: 15944 }, { id: 48, country: 'Slovakia', gdpm: 86629, popk: 5421, gdpcap: 15980 }, { id: 49, country: 'Barbados', gdpm: 4385, popk: 280, gdpcap: 15660 }, { id: 50, country: 'Uruguay', gdpm: 53107, popk: 3416, gdpcap: 15546 } ]; } } body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <div class="form-group"> <wj-auto-complete :displayMemberPath="'country'" :itemsSource="view.items"> </wj-auto-complete> </div> <div class="form-check"> <label class="form-check-label" for="filter">Apply Filter</label> <input id="filter" type="checkbox" v-model="filter" @click="filterItem"> </div> <div>Source list contains <b>{{view.items.length | formatNumber}}</b> countries.</div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; import * as wijmo from '@grapecity/wijmo'; import { getData } from './data'; let App = Vue.extend({ name: 'app', data: function () { return { view: new wijmo.CollectionView(getData(), { filter: this.theFilterFunction }), filter: true } }, methods: { // our filter function theFilterFunction: function(item) { return item.popk > 50000; }, filterItem: function(e) { this.view.filter = e.target.checked ? this.theFilterFunction : null; } }, filters: { formatNumber: function(value){ return wijmo.Globalize.format(value, 'n0'); } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity AutoComplete Filtering</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> export function getData() { return [ { id: 1, country: 'Luxembourg', gdpm: 57825, popk: 563, gdpcap: 102708 }, { id: 2, country: 'Switzerland', gdpm: 664005, popk: 8238, gdpcap: 80602 }, { id: 3, country: 'Norway', gdpm: 388315, popk: 5205, gdpcap: 74604 }, { id: 4, country: 'Macao', gdpm: 46178, popk: 647, gdpcap: 71372 }, { id: 5, country: 'Qatar', gdpm: 166908, popk: 2421, gdpcap: 68941 }, { id: 6, country: 'Ireland', gdpm: 283716, popk: 4635, gdpcap: 61211 }, { id: 7, country: 'United States', gdpm: 18036650, popk: 321601, gdpcap: 56083 }, { id: 8, country: 'Singapore', gdpm: 292734, popk: 5535, gdpcap: 52887 }, { id: 9, country: 'Denmark', gdpm: 295091, popk: 5660, gdpcap: 52136 }, { id: 10, country: 'Australia', gdpm: 1225286, popk: 23940, gdpcap: 51181 }, { id: 11, country: 'Iceland', gdpm: 16718, popk: 333, gdpcap: 50204 }, { id: 12, country: 'Sweden', gdpm: 493042, popk: 9851, gdpcap: 50049 }, { id: 13, country: 'San Marino', gdpm: 1558, popk: 31, gdpcap: 50258 }, { id: 14, country: 'Netherlands', gdpm: 750696, popk: 16937, gdpcap: 44322 }, { id: 15, country: 'United Kingdom', gdpm: 2858482, popk: 65110, gdpcap: 43902 }, { id: 16, country: 'Austria', gdpm: 374261, popk: 8621, gdpcap: 43412 }, { id: 17, country: 'Canada', gdpm: 1550537, popk: 35825, gdpcap: 43280 }, { id: 18, country: 'Finland', gdpm: 232077, popk: 5472, gdpcap: 42411 }, { id: 19, country: 'Germany', gdpm: 3365293, popk: 82176, gdpcap: 40952 }, { id: 20, country: 'Belgium', gdpm: 454288, popk: 11209, gdpcap: 40528 }, { id: 21, country: 'United Arab Emirates', gdpm: 370296, popk: 9581, gdpcap: 38648 }, { id: 22, country: 'France', gdpm: 2420163, popk: 64275, gdpcap: 37653 }, { id: 23, country: 'New Zealand', gdpm: 172257, popk: 4647, gdpcap: 37068 }, { id: 24, country: 'Israel', gdpm: 299413, popk: 8377, gdpcap: 35742 }, { id: 25, country: 'Japan', gdpm: 4124211, popk: 126981, gdpcap: 32478 }, { id: 26, country: 'Brunei Darussalam', gdpm: 12930, popk: 417, gdpcap: 31007 }, { id: 27, country: 'Italy', gdpm: 1815759, popk: 60796, gdpcap: 29866 }, { id: 28, country: 'Puerto Rico', gdpm: 102906, popk: 3474, gdpcap: 29621 }, { id: 29, country: 'Kuwait', gdpm: 114079, popk: 4110, gdpcap: 27756 }, { id: 30, country: 'South Korea', gdpm: 1377873, popk: 50617, gdpcap: 27221 }, { id: 31, country: 'Spain', gdpm: 1199715, popk: 46423, gdpcap: 25843 }, { id: 32, country: 'The Bahamas', gdpm: 8854, popk: 364, gdpcap: 24324 }, { id: 33, country: 'Bahrain', gdpm: 31119, popk: 1294, gdpcap: 24048 }, { id: 34, country: 'Cyprus', gdpm: 19330, popk: 847, gdpcap: 22821 }, { id: 35, country: 'Malta', gdpm: 9752, popk: 429, gdpcap: 22731 }, { id: 36, country: 'Taiwan', gdpm: 523006, popk: 23492, gdpcap: 22263 }, { id: 37, country: 'Slovenia', gdpm: 42798, popk: 2063, gdpcap: 20745 }, { id: 38, country: 'Saudi Arabia', gdpm: 646002, popk: 31386, gdpcap: 20582 }, { id: 39, country: 'Portugal', gdpm: 199032, popk: 10411, gdpcap: 19117 }, { id: 40, country: 'Trinidad and Tobago', gdpm: 24631, popk: 1358, gdpcap: 18137 }, { id: 41, country: 'Greece', gdpm: 195320, popk: 10858, gdpcap: 17988 }, { id: 42, country: 'Czech Republic', gdpm: 185156, popk: 10538, gdpcap: 17570 }, { id: 43, country: 'Estonia', gdpm: 22704, popk: 1313, gdpcap: 17291 }, { id: 44, country: 'Equatorial Guinea', gdpm: 13819, popk: 799, gdpcap: 17295 }, { id: 45, country: 'Oman', gdpm: 64121, popk: 3840, gdpcap: 16698 }, { id: 46, country: 'St. Kitts and Nevis', gdpm: 915, popk: 56, gdpcap: 16339 }, { id: 47, country: 'Palau', gdpm: 287, popk: 18, gdpcap: 15944 }, { id: 48, country: 'Slovakia', gdpm: 86629, popk: 5421, gdpcap: 15980 }, { id: 49, country: 'Barbados', gdpm: 4385, popk: 280, gdpcap: 15660 }, { id: 50, country: 'Uruguay', gdpm: 53107, popk: 3416, gdpcap: 15546 } ]; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wijmo from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this._filterFunction = (item) => { return item.popk > 50000; }; this._formatNumber = (length) => { return wijmo.Globalize.format(length, 'n0'); }; this._changeFilter = (value) => { this.setState((state) => { state.view.filter = value ? this._filterFunction : null; return state; }); }; this.state = { view: new wijmo.CollectionView(getData(), { filter: this._filterFunction }) }; } ; render() { return <div className="container-fluid"> <div className="form-group"> <wjInput.AutoComplete displayMemberPath="country" itemsSource={this.state.view.items}> </wjInput.AutoComplete> </div> <div className="form-check"> <label className="form-check-label" htmlFor="filter">Apply Filter</label> <input id="filter" type="checkbox" defaultChecked={true} onChange={e => this._changeFilter(e.target.checked)}/> </div> <div>Source list contains <b>{this._formatNumber(this.state.view.items.length)}</b> countries.</div> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> body { margin-bottom: 24px; } label { margin-right: 3px; } export function getData() { return [ { id: 1, country: 'Luxembourg', gdpm: 57825, popk: 563, gdpcap: 102708 }, { id: 2, country: 'Switzerland', gdpm: 664005, popk: 8238, gdpcap: 80602 }, { id: 3, country: 'Norway', gdpm: 388315, popk: 5205, gdpcap: 74604 }, { id: 4, country: 'Macao', gdpm: 46178, popk: 647, gdpcap: 71372 }, { id: 5, country: 'Qatar', gdpm: 166908, popk: 2421, gdpcap: 68941 }, { id: 6, country: 'Ireland', gdpm: 283716, popk: 4635, gdpcap: 61211 }, { id: 7, country: 'United States', gdpm: 18036650, popk: 321601, gdpcap: 56083 }, { id: 8, country: 'Singapore', gdpm: 292734, popk: 5535, gdpcap: 52887 }, { id: 9, country: 'Denmark', gdpm: 295091, popk: 5660, gdpcap: 52136 }, { id: 10, country: 'Australia', gdpm: 1225286, popk: 23940, gdpcap: 51181 }, { id: 11, country: 'Iceland', gdpm: 16718, popk: 333, gdpcap: 50204 }, { id: 12, country: 'Sweden', gdpm: 493042, popk: 9851, gdpcap: 50049 }, { id: 13, country: 'San Marino', gdpm: 1558, popk: 31, gdpcap: 50258 }, { id: 14, country: 'Netherlands', gdpm: 750696, popk: 16937, gdpcap: 44322 }, { id: 15, country: 'United Kingdom', gdpm: 2858482, popk: 65110, gdpcap: 43902 }, { id: 16, country: 'Austria', gdpm: 374261, popk: 8621, gdpcap: 43412 }, { id: 17, country: 'Canada', gdpm: 1550537, popk: 35825, gdpcap: 43280 }, { id: 18, country: 'Finland', gdpm: 232077, popk: 5472, gdpcap: 42411 }, { id: 19, country: 'Germany', gdpm: 3365293, popk: 82176, gdpcap: 40952 }, { id: 20, country: 'Belgium', gdpm: 454288, popk: 11209, gdpcap: 40528 }, { id: 21, country: 'United Arab Emirates', gdpm: 370296, popk: 9581, gdpcap: 38648 }, { id: 22, country: 'France', gdpm: 2420163, popk: 64275, gdpcap: 37653 }, { id: 23, country: 'New Zealand', gdpm: 172257, popk: 4647, gdpcap: 37068 }, { id: 24, country: 'Israel', gdpm: 299413, popk: 8377, gdpcap: 35742 }, { id: 25, country: 'Japan', gdpm: 4124211, popk: 126981, gdpcap: 32478 }, { id: 26, country: 'Brunei Darussalam', gdpm: 12930, popk: 417, gdpcap: 31007 }, { id: 27, country: 'Italy', gdpm: 1815759, popk: 60796, gdpcap: 29866 }, { id: 28, country: 'Puerto Rico', gdpm: 102906, popk: 3474, gdpcap: 29621 }, { id: 29, country: 'Kuwait', gdpm: 114079, popk: 4110, gdpcap: 27756 }, { id: 30, country: 'South Korea', gdpm: 1377873, popk: 50617, gdpcap: 27221 }, { id: 31, country: 'Spain', gdpm: 1199715, popk: 46423, gdpcap: 25843 }, { id: 32, country: 'The Bahamas', gdpm: 8854, popk: 364, gdpcap: 24324 }, { id: 33, country: 'Bahrain', gdpm: 31119, popk: 1294, gdpcap: 24048 }, { id: 34, country: 'Cyprus', gdpm: 19330, popk: 847, gdpcap: 22821 }, { id: 35, country: 'Malta', gdpm: 9752, popk: 429, gdpcap: 22731 }, { id: 36, country: 'Taiwan', gdpm: 523006, popk: 23492, gdpcap: 22263 }, { id: 37, country: 'Slovenia', gdpm: 42798, popk: 2063, gdpcap: 20745 }, { id: 38, country: 'Saudi Arabia', gdpm: 646002, popk: 31386, gdpcap: 20582 }, { id: 39, country: 'Portugal', gdpm: 199032, popk: 10411, gdpcap: 19117 }, { id: 40, country: 'Trinidad and Tobago', gdpm: 24631, popk: 1358, gdpcap: 18137 }, { id: 41, country: 'Greece', gdpm: 195320, popk: 10858, gdpcap: 17988 }, { id: 42, country: 'Czech Republic', gdpm: 185156, popk: 10538, gdpcap: 17570 }, { id: 43, country: 'Estonia', gdpm: 22704, popk: 1313, gdpcap: 17291 }, { id: 44, country: 'Equatorial Guinea', gdpm: 13819, popk: 799, gdpcap: 17295 }, { id: 45, country: 'Oman', gdpm: 64121, popk: 3840, gdpcap: 16698 }, { id: 46, country: 'St. Kitts and Nevis', gdpm: 915, popk: 56, gdpcap: 16339 }, { id: 47, country: 'Palau', gdpm: 287, popk: 18, gdpcap: 15944 }, { id: 48, country: 'Slovakia', gdpm: 86629, popk: 5421, gdpcap: 15980 }, { id: 49, country: 'Barbados', gdpm: 4385, popk: 280, gdpcap: 15660 }, { id: 50, country: 'Uruguay', gdpm: 53107, popk: 3416, gdpcap: 15546 } ]; }