How to use ag-grid-enterprise - 9 common examples

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-material.css';
import 'ag-grid-enterprise';

import {LicenseManager} from "ag-grid-enterprise/main";
// The tree view from ag-Grid requires an enterprise license and a product key
// Pricing: https://www.ag-grid.com/license-pricing.php
// Trial: https://www.ag-grid.com/start-trial.php
LicenseManager.setLicenseKey("your license key");

const data = [
  {
    orgHierarchy: ['Erica Rogers'],
    jobTitle: 'CEO',
    employmentType: 'Permanent',
    email: 'erica.rogers@acme.com'
  },
  {
    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett'],
    jobTitle: 'Exec. Vice President',
    employmentType: 'Permanent',
    email: 'malcolm.barrett@acme.com'
  },
  {
    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker'],

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-material.css';
import 'ag-grid-enterprise';

import {LicenseManager} from "ag-grid-enterprise/main";
// The tree view from ag-Grid requires an enterprise license and a product key
// Pricing: https://www.ag-grid.com/license-pricing.php
// Trial: https://www.ag-grid.com/start-trial.php
LicenseManager.setLicenseKey("your license key");

const data = [
  {
    orgHierarchy: ['Erica Rogers'],
    jobTitle: 'CEO',
    employmentType: 'Permanent',
    email: 'erica.rogers@acme.com'
  },
  {
    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett'],
    jobTitle: 'Exec. Vice President',
    employmentType: 'Permanent',
    email: 'malcolm.barrett@acme.com'
  },
  {
    orgHierarchy: ['Erica Rogers', 'Malcolm Barrett', 'Esther Baker'],

}).then((data: any) => {
  LicenseManager.setLicenseKey(data.license);
  if (environment.production) {
    enableProdMode();
  }
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

}).then((data: any) => {
  LicenseManager.setLicenseKey(data.license);
  if (environment.production) {
    enableProdMode();
  }
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

}).then((data: any) => {
  LicenseManager.setLicenseKey(data.license);
  if (environment.production) {
    enableProdMode();
  }
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

}).then((data: any) => {
  LicenseManager.setLicenseKey(data.license);
  if (environment.production) {
    enableProdMode();
  }
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

import { PaginationProps } from 'antd/lib/pagination';
import globalConfig from 'global.config';
import lodash from 'lodash';
import { BindAll, Debounce } from 'lodash-decorators';
import { toJS } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { fromEvent, Subscription } from 'rxjs';
import Store from 'store/dataSource';
import localeText from './localeText ';
import "./style.less";
import { columnsRenderImg } from './table';
import RequestFiles from 'utils/RequestFiles';
import Regular from 'utils/Regular';
import { debounceTime } from 'rxjs/operators';
LicenseManager.setLicenseKey('SHI_UK_on_behalf_of_Lenovo_Sweden_MultiApp_1Devs6_November_2019__MTU3Mjk5ODQwMDAwMA==e27a8fba6b8b1b40e95ee08e9e0db2cb');
interface ITableProps extends AgGridReactProps {
    /** 状态 */
    Store: Store;
    /**
     * 行 操作
     */
    rowAction?: any;
    /**
     * 行 操作列配置
     */
    rowActionCol?: ColDef;
    /**
     * 容器样式
     */
    style?: React.CSSProperties;
    /**

import lodash from "lodash";
import { AgGridVue } from "ag-grid-vue/lib/AgGridVue";
import { LicenseManager } from "ag-grid-enterprise";
import { Component, Prop, Vue } from "vue-property-decorator";
import {
  GridOptions,
  GridReadyEvent,
  ColDef,
  ColGroupDef
} from "ag-grid-community";
import { Subscription, fromEvent } from "rxjs";
import { Debounce } from "lodash-decorators";
import localeText from "./localeText";
import frameworkComponents from "./frameworkComponents";
import { filter, debounceTime } from "rxjs/operators";
LicenseManager.setLicenseKey(
  "ag-Grid_Evaluation_License_Not_for_Production_100Devs30_August_2037__MjU4ODczMzg3NzkyMg==9e93ed5f03b0620b142770f2594a23a2"
);
@Component({
  components: {
    AgGridVue
  }
})
export default class AgGrid extends Vue {
  @Prop() GridOptions: GridOptions;
  @Prop({ default: [] }) rowData!: any;
  @Prop({ default: [] }) columnDefs!: any;
  get columnDefsProp(): (ColDef | ColGroupDef)[] {
    const colDef = {
      rowDrag: false,
      dndSource: false,
      lockPosition: true,

import globalConfig from 'global.config';
import lodash from 'lodash';
import { BindAll, Debounce } from 'lodash-decorators';
import { toJS } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { fromEvent, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import Store from 'store/dataSource';
import Regular from 'utils/Regular';
import RequestFiles from 'utils/RequestFiles';
import { ToImg } from '../help/toImg';
import localeText from './localeText ';
import { IntlProvider } from 'react-intl';
import { getLocalesValue, getLocales } from 'locale';
LicenseManager.setLicenseKey('ag-Grid_Evaluation_License_Not_for_Production_100Devs30_August_2037__MjU4ODczMzg3NzkyMg==9e93ed5f03b0620b142770f2594a23a2');
declare namespace AgGridReactProps {
    interface ColDef {
        headerName?: Object;
    }
}

interface ITableProps extends AgGridReactProps {
    /** 状态 */
    Store: Store;
    /**
     * 行 操作
     */
    rowAction?: any;
    /**
     * 行 操作列配置
     */