@iress-oss/ids-mcp-server 0.0.1-dev.4 → 0.0.1-dev.5

package/generated/docs/components-table-ag-grid-docs.md

@@ -54,7 +54,104 @@ Page Size:
 
 Page 1 of 1
 
-Show code
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+import { useState } from 'react';
+import {
+  IressButton,
+  IressModal,
+  IressText,
+  IressToasterProvider,
+  useToaster,
+} from '@iress-oss/ids-components';
+import { AG\_THEME\_IRESS\_ICONS, IressAgGridContainer } from '@iress/ids-themes';
+import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
+import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions, type ColDef, type ICellRendererParams } from 'ag-grid-community';
+import styles from '@iress-storybook/styles.module.scss';
+ModuleRegistry.registerModules(\[AllCommunityModule\]);
+provideGlobalGridOptions({ theme: 'legacy' });
+const OrderCar \= ({ data }: ICellRendererParams) \=> {
+  const \[show, setShow\] \= useState(false);
+  const { success } \= useToaster();
+  return (
+    <\>
+      <IressButton onClick\={() \=> setShow(true)}\>Order</IressButton\>
+      <IressModal show\={show} onShowChange\={setShow}\>
+        <IressText\>
+          <h2\>Order a car</h2\>
+          <p\>
+            Car: {data.make} {data.model}
+          </p\>
+          <p\>
+            <IressButton
+              onClick\={() \=> {
+                success({
+                  children: 'Order submitted',
+                });
+                setShow(false);
+              }}
+            \>
+              Submit            </IressButton\>
+          </p\>
+        </IressText\>
+      </IressModal\>
+    </\>
+  );
+};
+export const AgGridSimple \= (args: AgGridReactProps) \=> {
+  // Row Data: The data to be displayed.
+  const \[rowData\] \= useState(\[
+    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
+    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
+    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
+  \]);
+  // Column Definitions: Defines the columns to be displayed.
+  const \[colDefs\] \= useState<ColDef\[\]\>(\[
+    {
+      field: 'make',
+      filter: true,
+      floatingFilter: true,
+      flex: 2,
+      checkboxSelection: true,
+    },
+    { field: 'model', flex: 1, autoHeight: true },
+    {
+      field: 'price',
+      flex: 1,
+      autoHeight: true,
+      valueFormatter: (price) \=> \`$${price.value.toLocaleString()}\`,
+    },
+    { field: 'electric', flex: 1, editable: true, autoHeight: true },
+    { field: 'order', flex: 1, cellRenderer: OrderCar },
+  \]);
+  return (
+    <IressToasterProvider\>
+      <IressAgGridContainer
+        alignMiddle
+        style\={{ height: '300px' }}
+      \>
+        <AgGridReact
+          {...args}
+          rowData\={rowData}
+          rowClassRules\={{
+            \[styles.highlightDanger\]: (params) \=> params.data.make \=== 'Toyota',
+          }}
+          rowSelection\="multiple"
+          columnDefs\={colDefs}
+          icons\={AG\_THEME\_IRESS\_ICONS}
+          pagination
+          paginationPageSize\={500}
+          paginationPageSizeSelector\={\[200, 500, 1000\]}
+        />
+      </IressAgGridContainer\>
+    </IressToasterProvider\>
+  );
+};
+export default AgGridSimple;
+
+Copy
 
 [](#props-api)Props (API)
 -------------------------
@@ -157,7 +254,104 @@ Page Size:
 
 Page 1 of 1
 
-Show code
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+import { useState } from 'react';
+import {
+  IressButton,
+  IressModal,
+  IressText,
+  IressToasterProvider,
+  useToaster,
+} from '@iress-oss/ids-components';
+import { AG\_THEME\_IRESS\_ICONS, IressAgGridContainer } from '@iress/ids-themes';
+import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
+import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions, type ColDef, type ICellRendererParams } from 'ag-grid-community';
+import styles from '@iress-storybook/styles.module.scss';
+ModuleRegistry.registerModules(\[AllCommunityModule\]);
+provideGlobalGridOptions({ theme: 'legacy' });
+const OrderCar \= ({ data }: ICellRendererParams) \=> {
+  const \[show, setShow\] \= useState(false);
+  const { success } \= useToaster();
+  return (
+    <\>
+      <IressButton onClick\={() \=> setShow(true)}\>Order</IressButton\>
+      <IressModal show\={show} onShowChange\={setShow}\>
+        <IressText\>
+          <h2\>Order a car</h2\>
+          <p\>
+            Car: {data.make} {data.model}
+          </p\>
+          <p\>
+            <IressButton
+              onClick\={() \=> {
+                success({
+                  children: 'Order submitted',
+                });
+                setShow(false);
+              }}
+            \>
+              Submit            </IressButton\>
+          </p\>
+        </IressText\>
+      </IressModal\>
+    </\>
+  );
+};
+export const AgGridSimple \= (args: AgGridReactProps) \=> {
+  // Row Data: The data to be displayed.
+  const \[rowData\] \= useState(\[
+    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
+    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
+    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
+  \]);
+  // Column Definitions: Defines the columns to be displayed.
+  const \[colDefs\] \= useState<ColDef\[\]\>(\[
+    {
+      field: 'make',
+      filter: true,
+      floatingFilter: true,
+      flex: 2,
+      checkboxSelection: true,
+    },
+    { field: 'model', flex: 1, autoHeight: true },
+    {
+      field: 'price',
+      flex: 1,
+      autoHeight: true,
+      valueFormatter: (price) \=> \`$${price.value.toLocaleString()}\`,
+    },
+    { field: 'electric', flex: 1, editable: true, autoHeight: true },
+    { field: 'order', flex: 1, cellRenderer: OrderCar },
+  \]);
+  return (
+    <IressToasterProvider\>
+      <IressAgGridContainer
+        alignMiddle
+        style\={{ height: '300px' }}
+      \>
+        <AgGridReact
+          {...args}
+          rowData\={rowData}
+          rowClassRules\={{
+            \[styles.highlightDanger\]: (params) \=> params.data.make \=== 'Toyota',
+          }}
+          rowSelection\="multiple"
+          columnDefs\={colDefs}
+          icons\={AG\_THEME\_IRESS\_ICONS}
+          pagination
+          paginationPageSize\={500}
+          paginationPageSizeSelector\={\[200, 500, 1000\]}
+        />
+      </IressAgGridContainer\>
+    </IressToasterProvider\>
+  );
+};
+export default AgGridSimple;
+
+Copy
 
 ### [](#complex)Complex
 
@@ -191,9 +385,9 @@ Country
 
 Shellie
 
-55,893
+96,065
 
-\-£500.66
+£81.12
 
 aliquet@purus.com
 
@@ -203,9 +397,9 @@ French Polynesia
 
 Jade
 
-70,139
+25,086
 
-£433.86
+\-£791.62
 
 mi.pede.nonummy@senectus.org
 
@@ -215,9 +409,9 @@ Tonga
 
 Wyoming
 
-21,497
+2,260
 
-£353.82
+\-£653.73
 
 Nulla.tempor.augue@aliquamiaculis.org
 
@@ -227,9 +421,9 @@ Rwanda
 
 Christine
 
-97,687
+4,719
 
-£119.40
+\-£828.84
 
 neque.sed.dictum@ultricesVivamus.ca
 
@@ -239,9 +433,9 @@ Bahamas
 
 Jameson
 
-87,554
+38,866
 
-\-£634.67
+£18.79
 
 sem.semper@liberoProin.com
 
@@ -251,9 +445,9 @@ Nauru
 
 Driscoll
 
-45,610
+44,298
 
-£338.76
+\-£969.27
 
 libero.dui@estacfacilisis.edu
 
@@ -263,9 +457,9 @@ Tajikistan
 
 Morgan
 
-14,480
+74,232
 
-£477.15
+\-£937.09
 
 mauris.eu@ipsum.ca
 
@@ -275,9 +469,9 @@ Colombia
 
 Kylee
 
-91,901
+5,346
 
-£470.74
+\-£691.99
 
 libero.Proin@malesuadafamesac.com
 
@@ -287,9 +481,9 @@ Papua New Guinea
 
 Cathleen
 
-76,234
+28,106
 
-\-£705.99
+\-£752.17
 
 risus.Donec@augue.edu
 
@@ -299,9 +493,9 @@ Guinea-Bissau
 
 Sierra
 
-70,719
+4,247
 
-£117.34
+£215.01
 
 dictum.eleifend.nunc@tellus.net
 
@@ -311,9 +505,9 @@ Isle of Man
 
 Levi
 
-7,491
+43,126
 
-\-£945.21
+\-£668.20
 
 Nulla.tempor.augue@nibhdolor.ca
 
@@ -323,9 +517,9 @@ Tuvalu
 
 Kyle
 
-79,958
+49,251
 
-\-£890.17
+\-£912.75
 
 lacinia@senectus.org
 
@@ -335,9 +529,9 @@ Qatar
 
 Emery
 
-90,476
+60,799
 
-£166.33
+£381.26
 
 Nulla.facilisis@nonummyultriciesornare.co.uk
 
@@ -347,9 +541,9 @@ Belize
 
 Nadine
 
-50,708
+66,894
 
-£212.92
+\-£732.58
 
 Duis@Sed.ca
 
@@ -359,9 +553,9 @@ Uruguay
 
 Dalton
 
-86,981
+93,058
 
-\-£748.63
+\-£595.55
 
 nibh.dolor.nonummy@laoreetlibero.org
 
@@ -371,9 +565,9 @@ Cayman Islands
 
 Zeph
 
-57,495
+86,011
 
-\-£619.75
+\-£750.64
 
 non.dui@felisorci.com
 
@@ -383,9 +577,9 @@ Niger
 
 Shannon
 
-59,268
+31,391
 
-\-£566.59
+\-£958.60
 
 leo@lobortis.co.uk
 
@@ -395,9 +589,9 @@ Somalia
 
 Erich
 
-24,529
+26,014
 
-\-£977.18
+£173.30
 
 cursus.non.egestas@aliquet.org
 
@@ -407,9 +601,9 @@ Sao Tome and Principe
 
 Rhiannon
 
-92,499
+58,474
 
-\-£932.96
+£281.93
 
 arcu.Morbi.sit@cursus.edu
 
@@ -419,9 +613,9 @@ Croatia
 
 Elijah
 
-20,589
+22,601
 
-£276.69
+£399.68
 
 ipsum.Donec.sollicitudin@leo.co.uk
 
@@ -431,9 +625,9 @@ San Marino
 
 Grady
 
-59,496
+39,659
 
-0.00
+\-£713.98
 
 mollis.nec.cursus@malesuadamalesuadaInteger.edu
 
@@ -443,9 +637,9 @@ Cuba
 
 Quentin
 
-74,931
+91,881
 
-\-£910.76
+£265.23
 
 erat.vel@auctor.net
 
@@ -455,9 +649,9 @@ Mayotte
 
 Samuel
 
-55,034
+86,032
 
-\-£645.15
+£319.85
 
 tellus@magnaSed.edu
 
@@ -467,9 +661,9 @@ Lebanon
 
 Merritt
 
-31,896
+22,614
 
-\-£808.31
+£447.38
 
 interdum.Nunc.sollicitudin@elitpellentesque.edu
 
@@ -569,7 +763,703 @@ to of
 
 Page of
 
-Show code
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AG\_GRID\_LICENSE\_KEY } from '@iress/ag-grid-license-key';
+import type {
+  GridApi,
+  GridReadyEvent,
+  ValueFormatterParams,
+} from 'ag-grid-community';
+import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
+import { AllEnterpriseModule, LicenseManager, ModuleRegistry, provideGlobalGridOptions } from 'ag-grid-enterprise';
+import { AG\_THEME\_IRESS\_ICONS, IressAgGridContainer } from '@iress/ids-themes';
+import styles from '@iress-storybook/styles.module.scss';
+LicenseManager.setLicenseKey(AG\_GRID\_LICENSE\_KEY);
+ModuleRegistry.registerModules(\[AllEnterpriseModule\]);
+provideGlobalGridOptions({ theme: 'legacy' });
+const formatter2dp \= new Intl.NumberFormat('en-UK', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+const formatterCurrency \= new Intl.NumberFormat('en-UK', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+  currencySign: 'standard',
+  currency: 'GBP',
+  style: 'currency',
+});
+const getSales \= (number: number) \=> {
+  const no \= number \* 100000;
+  return Math.ceil(no);
+};
+const getProfit \= (number: number) \=> {
+  const no \= number \> 0.5 ? number \* \-1000 : number \* 1000;
+  return formatter2dp.format(no);
+};
+const getRating \= () \=> (Math.random() \> 0.5 ? 'red' : 'green');
+const BIG\_DATA \= \[
+  {
+    firstName: 'Shellie',
+    lastName: 'Cantu',
+    email: 'aliquet@purus.com',
+    phoneNo: '0828 746 6831',
+    street: '639-9644 Eget Street',
+    city: 'Weißenfels',
+    postcode: '37962',
+    country: 'French Polynesia',
+    personalID: '16011210 9582',
+  },
+  {
+    firstName: 'Jade',
+    lastName: 'Sellers',
+    email: 'mi.pede.nonummy@senectus.org',
+    phoneNo: '0800 360062',
+    street: 'P.O. Box 511, 3099 In Rd.',
+    city: 'Cochrane',
+    postcode: 'K8I 3RB',
+    country: 'Tonga',
+    personalID: '16870328 2056',
+  },
+  {
+    firstName: 'Wyoming',
+    lastName: 'Fox',
+    email: 'Nulla.tempor.augue@aliquamiaculis.org',
+    phoneNo: '0800 377 7753',
+    street: '7354 Ac Ave',
+    city: 'East Kilbride',
+    postcode: '233010',
+    country: 'Rwanda',
+    personalID: '16070816 5048',
+  },
+  {
+    firstName: 'Christine',
+    lastName: 'Holcomb',
+    email: 'neque.sed.dictum@ultricesVivamus.ca',
+    phoneNo: '07578 190673',
+    street: 'Ap #121-4421 Iaculis Av.',
+    city: 'Etroubles',
+    postcode: '6742',
+    country: 'Bahamas',
+    personalID: '16401211 0773',
+  },
+  {
+    firstName: 'Jameson',
+    lastName: 'Sutton',
+    email: 'sem.semper@liberoProin.com',
+    phoneNo: '07489 442639',
+    street: 'Ap #700-1481 Porttitor Ave',
+    city: 'Nice',
+    postcode: '14655',
+    country: 'Nauru',
+    personalID: '16301129 4323',
+  },
+  {
+    firstName: 'Driscoll',
+    lastName: 'Jenkins',
+    email: 'libero.dui@estacfacilisis.edu',
+    phoneNo: '0843 298 8205',
+    street: 'Ap #775-8090 Sed Avenue',
+    city: 'Natales',
+    postcode: '622109',
+    country: 'Tajikistan',
+    personalID: '16430908 1950',
+  },
+  {
+    firstName: 'Morgan',
+    lastName: 'Hutchinson',
+    email: 'mauris.eu@ipsum.ca',
+    phoneNo: '070 6292 4498',
+    street: '3135 Curabitur Rd.',
+    city: 'Darmstadt',
+    postcode: '010900',
+    country: 'Colombia',
+    personalID: '16890811 2991',
+  },
+  {
+    firstName: 'Kylee',
+    lastName: 'Riddle',
+    email: 'libero.Proin@malesuadafamesac.com',
+    phoneNo: '(017177) 84788',
+    street: '7336 Ipsum St.',
+    city: 'Semarang',
+    postcode: '9828',
+    country: 'Papua New Guinea',
+    personalID: '16260701 0093',
+  },
+  {
+    firstName: 'Cathleen',
+    lastName: 'Dale',
+    email: 'risus.Donec@augue.edu',
+    phoneNo: '(0115) 224 4142',
+    street: 'Ap #568-2948 Fringilla Rd.',
+    city: 'Brandenburg',
+    postcode: 'CH2L 4EH',
+    country: 'Guinea-Bissau',
+    personalID: '16161203 4817',
+  },
+  {
+    firstName: 'Sierra',
+    lastName: 'Robbins',
+    email: 'dictum.eleifend.nunc@tellus.net',
+    phoneNo: '(01266) 957950',
+    street: '481-6201 Mattis. Rd.',
+    city: 'Upper Hutt',
+    postcode: '23945',
+    country: 'Isle of Man',
+    personalID: '16691217 6010',
+  },
+  {
+    firstName: 'Levi',
+    lastName: 'Simpson',
+    email: 'Nulla.tempor.augue@nibhdolor.ca',
+    phoneNo: '0855 608 0347',
+    street: '555-4187 Integer Av.',
+    city: 'Curacaví',
+    postcode: '439311',
+    country: 'Tuvalu',
+    personalID: '16000330 9499',
+  },
+  {
+    firstName: 'Kyle',
+    lastName: 'Mendez',
+    email: 'lacinia@senectus.org',
+    phoneNo: '0845 46 40',
+    street: '814-4647 Nec, St.',
+    city: 'Akron',
+    postcode: '199413',
+    country: 'Qatar',
+    personalID: '16471029 5397',
+  },
+  {
+    firstName: 'Emery',
+    lastName: 'Hurley',
+    email: 'Nulla.facilisis@nonummyultriciesornare.co.uk',
+    phoneNo: '(01553) 502913',
+    street: '4540 Luctus Ave',
+    city: 'Meux',
+    postcode: '36612',
+    country: 'Belize',
+    personalID: '16440228 3842',
+  },
+  {
+    firstName: 'Nadine',
+    lastName: 'Buchanan',
+    email: 'Duis@Sed.ca',
+    phoneNo: '055 2785 0228',
+    street: '694 Mi, Av.',
+    city: 'Middelburg',
+    postcode: '62232-88887',
+    country: 'Uruguay',
+    personalID: '16721129 5857',
+  },
+  {
+    firstName: 'Dalton',
+    lastName: 'Nieves',
+    email: 'nibh.dolor.nonummy@laoreetlibero.org',
+    phoneNo: '0395 486 9374',
+    street: '797-8170 Enim, Street',
+    city: 'Burhanpur',
+    postcode: '29633-93750',
+    country: 'Cayman Islands',
+    personalID: '16600205 0067',
+  },
+  {
+    firstName: 'Zeph',
+    lastName: 'Ruiz',
+    email: 'non.dui@felisorci.com',
+    phoneNo: '0845 46 41',
+    street: 'Ap #282-8369 Malesuada Ave',
+    city: 'Cavallino',
+    postcode: 'EW2V 1ZE',
+    country: 'Niger',
+    personalID: '16580706 9124',
+  },
+  {
+    firstName: 'Shannon',
+    lastName: 'Decker',
+    email: 'leo@lobortis.co.uk',
+    phoneNo: '0800 135593',
+    street: 'P.O. Box 587, 6871 Eleifend. Ave',
+    city: 'Rocca San Felice',
+    postcode: '42271-38735',
+    country: 'Somalia',
+    personalID: '16090810 4763',
+  },
+  {
+    firstName: 'Erich',
+    lastName: 'Daniels',
+    email: 'cursus.non.egestas@aliquet.org',
+    phoneNo: '0845 46 44',
+    street: '689-4565 Velit. Avenue',
+    city: 'Edmundston',
+    postcode: 'JR32 7QA',
+    country: 'Sao Tome and Principe',
+    personalID: '16720401 5049',
+  },
+  {
+    firstName: 'Rhiannon',
+    lastName: 'Malone',
+    email: 'arcu.Morbi.sit@cursus.edu',
+    phoneNo: '0361 311 4051',
+    street: 'Ap #971-1781 Vehicula Road',
+    city: 'Wood Buffalo',
+    postcode: '71682',
+    country: 'Croatia',
+    personalID: '16931028 3388',
+  },
+  {
+    firstName: 'Elijah',
+    lastName: 'Sosa',
+    email: 'ipsum.Donec.sollicitudin@leo.co.uk',
+    phoneNo: '0800 365 8250',
+    street: 'P.O. Box 169, 2562 Commodo Ave',
+    city: 'Montoggio',
+    postcode: '42092',
+    country: 'San Marino',
+    personalID: '16251107 2403',
+  },
+  {
+    firstName: 'Grady',
+    lastName: 'Crosby',
+    email: 'mollis.nec.cursus@malesuadamalesuadaInteger.edu',
+    phoneNo: '070 2824 3427',
+    street: '821-5145 Id, Ave',
+    city: 'Rosoux-Crenwick',
+    postcode: '56176',
+    country: 'Cuba',
+    personalID: '16520115 9133',
+  },
+  {
+    firstName: 'Quentin',
+    lastName: 'Armstrong',
+    email: 'erat.vel@auctor.net',
+    phoneNo: '(029) 5052 0365',
+    street: '157-253 Hendrerit Av.',
+    city: 'Aubervilliers',
+    postcode: '2151',
+    country: 'Mayotte',
+    personalID: '16730607 0553',
+  },
+  {
+    firstName: 'Samuel',
+    lastName: 'Harrell',
+    email: 'tellus@magnaSed.edu',
+    phoneNo: '07064 102166',
+    street: 'P.O. Box 713, 4115 Ut Rd.',
+    city: 'Kingston',
+    postcode: '23315',
+    country: 'Lebanon',
+    personalID: '16361016 5551',
+  },
+  {
+    firstName: 'Merritt',
+    lastName: 'Holland',
+    email: 'interdum.Nunc.sollicitudin@elitpellentesque.edu',
+    phoneNo: '0800 825458',
+    street: 'P.O. Box 261, 3590 Nascetur Road',
+    city: 'Drancy',
+    postcode: '760017',
+    country: 'French Southern Territories',
+    personalID: '16040311 2121',
+  },
+  {
+    firstName: 'Harlan',
+    lastName: 'Brennan',
+    email: 'nascetur.ridiculus@feugiatmetussit.net',
+    phoneNo: '(012812) 59410',
+    street: '8210 Torquent Av.',
+    city: 'Grantham',
+    postcode: '01537',
+    country: 'Saint Pierre and Miquelon',
+    personalID: '16431216 0239',
+  },
+  {
+    firstName: 'Stuart',
+    lastName: 'Deleon',
+    email: 'sed.pede.nec@maurisMorbinon.com',
+    phoneNo: '0807 013 3815',
+    street: 'P.O. Box 143, 4909 At Street',
+    city: 'Terrance',
+    postcode: '27218',
+    country: 'Jersey',
+    personalID: '16330207 5852',
+  },
+  {
+    firstName: 'Clarke',
+    lastName: 'Middleton',
+    email: 'in@estacfacilisis.org',
+    phoneNo: '(028) 5013 9648',
+    street: '9856 Eget, Avenue',
+    city: 'Solihull',
+    postcode: '72893',
+    country: 'Seychelles',
+    personalID: '16340804 3325',
+  },
+  {
+    firstName: 'Roanna',
+    lastName: 'Gentry',
+    email: 'dui@nascetur.net',
+    phoneNo: '(024) 3023 2962',
+    street: '3566 Ornare. Rd.',
+    city: 'Freiberg',
+    postcode: '3899',
+    country: 'Lesotho',
+    personalID: '16680618 3791',
+  },
+  {
+    firstName: 'Delilah',
+    lastName: 'Bird',
+    email: 'laoreet.lectus.quis@utaliquam.edu',
+    phoneNo: '07160 224163',
+    street: 'P.O. Box 332, 8565 Molestie Avenue',
+    city: 'Washuk',
+    postcode: '607065',
+    country: 'Indonesia',
+    personalID: '16891112 9461',
+  },
+  {
+    firstName: 'Georgia',
+    lastName: 'Cash',
+    email: 'dui@enimnisl.net',
+    phoneNo: '(0113) 542 3955',
+    street: '900-3252 Fusce Avenue',
+    city: 'Sint-Michiels',
+    postcode: 'Z8203',
+    country: 'Niue',
+    personalID: '16340718 4716',
+  },
+  {
+    firstName: 'Aiko',
+    lastName: 'Mclean',
+    email: 'cubilia.Curae.Phasellus@augueid.com',
+    phoneNo: '055 9506 2116',
+    street: 'P.O. Box 786, 1756 Fringilla St.',
+    city: 'Malonne',
+    postcode: 'Y8E 7M2',
+    country: 'Belize',
+    personalID: '16680622 4207',
+  },
+  {
+    firstName: 'Winter',
+    lastName: 'Jacobs',
+    email: 'aliquet@Duisac.ca',
+    phoneNo: '0800 693847',
+    street: '774-9011 Arcu Road',
+    city: 'Bilbo',
+    postcode: '05558',
+    country: 'Equatorial Guinea',
+    personalID: '16611201 4144',
+  },
+  {
+    firstName: 'Jolene',
+    lastName: 'Rios',
+    email: 'odio.Aliquam.vulputate@ac.ca',
+    phoneNo: '(023) 4876 2215',
+    street: 'Ap #325-8225 Amet Road',
+    city: 'Limena',
+    postcode: 'K56 0YJ',
+    country: 'Morocco',
+    personalID: '16170215 3485',
+  },
+  {
+    firstName: 'Kaden',
+    lastName: 'Morrow',
+    email: 'rutrum@eleifendnec.ca',
+    phoneNo: '07305 685548',
+    street: '8870 Aliquam Road',
+    city: 'Sète',
+    postcode: '04908',
+    country: 'Peru',
+    personalID: '16820820 6675',
+  },
+  {
+    firstName: 'Kaseem',
+    lastName: 'Norris',
+    email: 'mauris.erat.eget@nequeMorbi.com',
+    phoneNo: '07275 403152',
+    street: 'P.O. Box 776, 7115 Integer Avenue',
+    city: 'Jönköping',
+    postcode: '42236-83471',
+    country: 'Sudan',
+    personalID: '16440829 7895',
+  },
+  {
+    firstName: 'Vladimir',
+    lastName: 'Mcguire',
+    email: 'id@nonarcuVivamus.edu',
+    phoneNo: '0500 950469',
+    street: '2067 Est Ave',
+    city: 'Ziano di Fiemme',
+    postcode: '774056',
+    country: 'Mexico',
+    personalID: '16771016 3796',
+  },
+  {
+    firstName: 'Jocelyn',
+    lastName: 'Schroeder',
+    email: 'dolor@nec.ca',
+    phoneNo: '07302 403156',
+    street: 'Ap #155-3999 Vivamus St.',
+    city: 'Malloa',
+    postcode: '4059',
+    country: 'Canada',
+    personalID: '16530314 9388',
+  },
+  {
+    firstName: 'Howard',
+    lastName: 'Villarreal',
+    email: 'Donec.felis@insodales.com',
+    phoneNo: '07624 830239',
+    street: '540-7057 Cras Rd.',
+    city: 'Siverek',
+    postcode: '8701',
+    country: 'Seychelles',
+    personalID: '16640823 8530',
+  },
+  {
+    firstName: 'Adam',
+    lastName: 'Miranda',
+    email: 'amet.dapibus@faucibus.edu',
+    phoneNo: '0845 46 49',
+    street: 'Ap #931-6286 Diam. Avenue',
+    city: 'Warburg',
+    postcode: '01972',
+    country: 'Jordan',
+    personalID: '16370414 7911',
+  },
+  {
+    firstName: 'Aiko',
+    lastName: 'Elliott',
+    email: 'sodales@mauris.edu',
+    phoneNo: '0800 1111',
+    street: 'P.O. Box 583, 6119 Ut St.',
+    city: 'Villavicencio',
+    postcode: '4864 XQ',
+    country: 'Faroe Islands',
+    personalID: '16940907 6115',
+  },
+\].map((person) \=> ({
+  ...person,
+  sales: getSales(Math.random()),
+  profit: getProfit(Math.random()),
+  redOrGreen: getRating(),
+  date: new Date(Math.floor(Math.random() \* \-10000000000)).toDateString(),
+}));
+const createClassNameMutationObserver \= (
+  element: HTMLElement,
+  callback: (className: string) \=> void,
+): MutationObserver \=> {
+  const observer \= new MutationObserver(() \=> {
+    callback(element.className);
+  });
+  observer.observe(element, {
+    attributes: true,
+    attributeFilter: \['class'\],
+    childList: false,
+    characterData: false,
+  });
+  return observer;
+};
+const useClassNameMutationObserver \= (
+  element: HTMLElement,
+  callback: () \=> void,
+): void \=> {
+  useEffect(() \=> {
+    const observer \= createClassNameMutationObserver(element, callback);
+    // Cleanup listener
+    return (): void \=> {
+      observer.disconnect();
+    };
+  });
+};
+const RedOrGreenFormatter \= (params: ValueFormatterParams) \=> {
+  const dotStyle \= styles\[\`dot--${params.value}\`\];
+  return <span className\={\`${styles.dot} ${dotStyle}\`} />;
+};
+const CommaFormatter \= (params: ValueFormatterParams): string \=> {
+  return params.value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');
+};
+const CurrencyFormatter \= (params: ValueFormatterParams): string \=> {
+  if (params.value \=== '0.00') {
+    return formatter2dp.format(params.value);
+  }
+  return formatterCurrency.format(params.value);
+};
+export const AgGridComplex \= (args: AgGridReactProps) \=> {
+  const \[rowData, setRowData\] \= useState(BIG\_DATA);
+  const api \= useRef<GridApi\>();
+  // pick one row at random to show data updating in the grid
+  useEffect(() \=> {
+    const updateTick \= setInterval(() \=> {
+      const randomNo \= Math.random();
+      const index \= Math.floor(Math.random() \* rowData.length);
+      const itemToUpdate \= rowData\[index\];
+      if (randomNo < 0.5) {
+        itemToUpdate.sales \= getSales(Math.random());
+      } else if (randomNo \> 0.9) {
+        itemToUpdate.profit \= getProfit(0);
+      } else {
+        itemToUpdate.profit \= getProfit(Math.random());
+      }
+      setRowData(rowData);
+      api.current?.refreshCells();
+    }, 500);
+    return () \=> {
+      clearInterval(updateTick);
+    };
+  }, \[rowData\]);
+  const onGridReady \= useCallback((event: GridReadyEvent): void \=> {
+    api.current \= event.api;
+    api.current.resetRowHeights();
+  }, \[\]);
+  useClassNameMutationObserver(document.documentElement, () \=> {
+    if (api.current) {
+      api.current.resetRowHeights();
+    }
+  });
+  return (
+    <IressAgGridContainer
+      alignMiddle
+      style\={{ height: '100vh', width: '100%' }}
+    \>
+      <AgGridReact        {...args}
+        onGridReady={onGridReady}
+        rowDragManaged        animateRows        enableRangeSelection={true}
+        enableCharts={true}
+        sideBar={true}
+        rowData={rowData}
+        rowSelection="multiple"        rowMultiSelectWithClick        components={{
+          redGreenDots: RedOrGreenFormatter,
+        }}
+        defaultColDef={{
+          enableCellChangeFlash: true,
+          resizable: true,
+          sortable: true,
+          unSortIcon: true,
+          filter: true,
+          floatingFilter: true,
+          enablePivot: false,
+          filterParams: {
+            buttons: \['reset', 'apply'\],
+          },
+          autoHeight: true,
+          wrapText: true,
+        }}
+        icons={AG\_THEME\_IRESS\_ICONS}
+        columnDefs={\[
+          {
+            headerName: 'Employee',
+            children: \[
+              {
+                field: 'firstName',
+                editable: true,
+                filter: 'agTextColumnFilter',
+                headerTooltip: 'First name',
+                rowDrag: true,
+                lockVisible: true,
+                tooltipField: 'firstName',
+              },
+              {
+                field: 'lastName',
+                editable: true,
+                filter: 'agTextColumnFilter',
+                headerTooltip: 'Surname',
+                lockVisible: true,
+                cellClass: 'iress-cell--divider',
+                headerClass: 'iress-cell--divider',
+                columnGroupShow: 'open',
+              },
+              {
+                field: 'personalID',
+                filter: 'agTextColumnFilter',
+                headerTooltip: 'Personal ID',
+                columnGroupShow: 'open',
+              },
+              {
+                field: 'date',
+                filter: 'agDateColumnFilter',
+                headerTooltip: 'Date',
+                columnGroupShow: 'open',
+              },
+            \],
+          },
+          {
+            headerName: 'Sales performance',
+            children: \[
+              {
+                field: 'redOrGreen',
+                headerName: 'Rating',
+                cellRenderer: 'redGreenDots',
+                filter: false,
+              },
+              {
+                field: 'sales',
+                filter: 'agNumberColumnFilter',
+                valueFormatter: CommaFormatter,
+              },
+              {
+                field: 'profit',
+                valueFormatter: CurrencyFormatter,
+                cellClassRules: {
+                  'iress--positive': (params) \=> parseInt(params.value, 10) \> 0,
+                  'iress--negative': (params) \=> parseInt(params.value, 10) < 0,
+                  'iress--zero': (params) \=> params.value \=== '0.00',
+                },
+              },
+            \],
+          },
+          {
+            headerName: 'Contact details',
+            children: \[
+              {
+                field: 'email',
+                width: 350,
+                filter: 'agTextColumnFilter',
+                headerTooltip: 'Email address',
+                cellClass: 'iress-cell--ellipsis',
+              },
+              {
+                field: 'phoneNo',
+                enableValue: true,
+                filter: 'agTextColumnFilter',
+                headerTooltip: 'Phone number',
+              },
+            \],
+          },
+          {
+            headerName: 'Address',
+            children: \[
+              {
+                field: 'street',
+                width: 350,
+                filter: 'agTextColumnFilter',
+                cellClass: 'iress-cell--ellipsis',
+                columnGroupShow: 'open',
+              },
+              {
+                field: 'city',
+                filter: 'agTextColumnFilter',
+                columnGroupShow: 'open',
+              },
+              {
+                field: 'postcode',
+                filter: 'agTextColumnFilter',
+                columnGroupShow: 'open',
+              },
+              { field: 'country', filter: 'agTextColumnFilter' },
+            \],
+          },
+        \]}
+      />    </IressAgGridContainer\>
+  );
+};
+export default AgGridComplex;
+
+Copy
 
 ### [](#compact)Compact
 
@@ -603,9 +1493,9 @@ Country
 
 Shellie
 
-17,972
+31,402
 
-\-£688.02
+\-£697.34
 
 aliquet@purus.com
 
@@ -615,9 +1505,9 @@ French Polynesia
 
 Jade
 
-65,080
+77,405
 
-£152.28
+£210.43
 
 mi.pede.nonummy@senectus.org
 
@@ -627,9 +1517,9 @@ Tonga
 
 Wyoming
 
-8,750
+71,423
 
-£10.93
+\-£763.27
 
 Nulla.tempor.augue@aliquamiaculis.org
 
@@ -639,9 +1529,9 @@ Rwanda
 
 Christine
 
-16,278
+53,913
 
-\-£795.88
+0.00
 
 neque.sed.dictum@ultricesVivamus.ca
 
@@ -651,9 +1541,9 @@ Bahamas
 
 Jameson
 
-42,804
+22,036
 
-\-£972.10
+£195.10
 
 sem.semper@liberoProin.com
 
@@ -663,9 +1553,9 @@ Nauru
 
 Driscoll
 
-11,266
+40,956
 
-\-£610.75
+\-£775.97
 
 libero.dui@estacfacilisis.edu
 
@@ -675,9 +1565,9 @@ Tajikistan
 
 Morgan
 
-84,926
+90,802
 
-\-£653.18
+\-£944.95
 
 mauris.eu@ipsum.ca
 
@@ -687,9 +1577,9 @@ Colombia
 
 Kylee
 
-5,227
+89,571
 
-0.00
+£135.63
 
 libero.Proin@malesuadafamesac.com
 
@@ -699,9 +1589,9 @@ Papua New Guinea
 
 Cathleen
 
-11,127
+11,990
 
-\-£931.98
+£359.81
 
 risus.Donec@augue.edu
 
@@ -711,9 +1601,9 @@ Guinea-Bissau
 
 Sierra
 
-68,369
+90,143
 
-\-£686.59
+£104.59
 
 dictum.eleifend.nunc@tellus.net
 
@@ -723,9 +1613,9 @@ Isle of Man
 
 Levi
 
-56,491
+54,014
 
-\-£897.31
+\-£689.82
 
 Nulla.tempor.augue@nibhdolor.ca
 
@@ -735,9 +1625,9 @@ Tuvalu
 
 Kyle
 
-4,929
+68,546
 
-\-£537.12
+0.00
 
 lacinia@senectus.org
 
@@ -747,9 +1637,9 @@ Qatar
 
 Emery
 
-25,854
+33,689
 
-£87.24
+\-£566.56
 
 Nulla.facilisis@nonummyultriciesornare.co.uk
 
@@ -759,9 +1649,9 @@ Belize
 
 Nadine
 
-9,152
+8,157
 
-\-£973.34
+£478.86
 
 Duis@Sed.ca
 
@@ -771,9 +1661,9 @@ Uruguay
 
 Dalton
 
-52,780
+15,504
 
-£353.64
+\-£697.81
 
 nibh.dolor.nonummy@laoreetlibero.org
 
@@ -783,9 +1673,9 @@ Cayman Islands
 
 Zeph
 
-44,588
+85,532
 
-\-£709.00
+£176.54
 
 non.dui@felisorci.com
 
@@ -795,9 +1685,9 @@ Niger
 
 Shannon
 
-54,700
+51,971
 
-£151.31
+\-£560.58
 
 leo@lobortis.co.uk
 
@@ -807,9 +1697,9 @@ Somalia
 
 Erich
 
-31,612
+50,825
 
-\-£557.04
+£468.14
 
 cursus.non.egestas@aliquet.org
 
@@ -819,9 +1709,9 @@ Sao Tome and Principe
 
 Rhiannon
 
-69,501
+88,614
 
-£116.64
+£374.60
 
 arcu.Morbi.sit@cursus.edu
 
@@ -831,9 +1721,9 @@ Croatia
 
 Elijah
 
-32,390
+97,084
 
-£115.44
+\-£515.56
 
 ipsum.Donec.sollicitudin@leo.co.uk
 
@@ -843,9 +1733,9 @@ San Marino
 
 Grady
 
-53,408
+1,352
 
-£82.94
+\-£754.41
 
 mollis.nec.cursus@malesuadamalesuadaInteger.edu
 
@@ -855,9 +1745,9 @@ Cuba
 
 Quentin
 
-62,717
+9,164
 
-\-£830.80
+0.00
 
 erat.vel@auctor.net
 
@@ -867,9 +1757,9 @@ Mayotte
 
 Samuel
 
-65,380
+8,709
 
-\-£799.63
+£422.41
 
 tellus@magnaSed.edu
 
@@ -879,9 +1769,9 @@ Lebanon
 
 Merritt
 
-10,433
+3,443
 
-\-£505.97
+\-£968.07
 
 interdum.Nunc.sollicitudin@elitpellentesque.edu
 
@@ -891,9 +1781,9 @@ French Southern Territories
 
 Harlan
 
-50,760
+22,747
 
-£295.19
+\-£893.54
 
 nascetur.ridiculus@feugiatmetussit.net
 
@@ -903,9 +1793,9 @@ Saint Pierre and Miquelon
 
 Stuart
 
-60,138
+94,877
 
-\-£863.95
+£327.49
 
 sed.pede.nec@maurisMorbinon.com
 
@@ -1009,7 +1899,709 @@ to of
 
 Page of
 
-Show code
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AG\_GRID\_LICENSE\_KEY } from '@iress/ag-grid-license-key';
+import type {
+  GridApi,
+  GridReadyEvent,
+  ValueFormatterParams,
+} from 'ag-grid-community';
+import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
+import {
+  AllEnterpriseModule,
+  LicenseManager,
+  ModuleRegistry,
+  provideGlobalGridOptions,
+} from 'ag-grid-enterprise';
+import { AG\_THEME\_IRESS\_ICONS, IressAgGridContainer } from '@iress/ids-themes';
+import styles from '@iress-storybook/styles.module.scss';
+LicenseManager.setLicenseKey(AG\_GRID\_LICENSE\_KEY);
+ModuleRegistry.registerModules(\[AllEnterpriseModule\]);
+provideGlobalGridOptions({ theme: 'legacy' });
+const formatter2dp \= new Intl.NumberFormat('en-UK', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+const formatterCurrency \= new Intl.NumberFormat('en-UK', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+  currencySign: 'standard',
+  currency: 'GBP',
+  style: 'currency',
+});
+const getSales \= (number: number) \=> {
+  const no \= number \* 100000;
+  return Math.ceil(no);
+};
+const getProfit \= (number: number) \=> {
+  const no \= number \> 0.5 ? number \* \-1000 : number \* 1000;
+  return formatter2dp.format(no);
+};
+const getRating \= () \=> (Math.random() \> 0.5 ? 'red' : 'green');
+const BIG\_DATA \= \[
+  {
+    firstName: 'Shellie',
+    lastName: 'Cantu',
+    email: 'aliquet@purus.com',
+    phoneNo: '0828 746 6831',
+    street: '639-9644 Eget Street',
+    city: 'Weißenfels',
+    postcode: '37962',
+    country: 'French Polynesia',
+    personalID: '16011210 9582',
+  },
+  {
+    firstName: 'Jade',
+    lastName: 'Sellers',
+    email: 'mi.pede.nonummy@senectus.org',
+    phoneNo: '0800 360062',
+    street: 'P.O. Box 511, 3099 In Rd.',
+    city: 'Cochrane',
+    postcode: 'K8I 3RB',
+    country: 'Tonga',
+    personalID: '16870328 2056',
+  },
+  {
+    firstName: 'Wyoming',
+    lastName: 'Fox',
+    email: 'Nulla.tempor.augue@aliquamiaculis.org',
+    phoneNo: '0800 377 7753',
+    street: '7354 Ac Ave',
+    city: 'East Kilbride',
+    postcode: '233010',
+    country: 'Rwanda',
+    personalID: '16070816 5048',
+  },
+  {
+    firstName: 'Christine',
+    lastName: 'Holcomb',
+    email: 'neque.sed.dictum@ultricesVivamus.ca',
+    phoneNo: '07578 190673',
+    street: 'Ap #121-4421 Iaculis Av.',
+    city: 'Etroubles',
+    postcode: '6742',
+    country: 'Bahamas',
+    personalID: '16401211 0773',
+  },
+  {
+    firstName: 'Jameson',
+    lastName: 'Sutton',
+    email: 'sem.semper@liberoProin.com',
+    phoneNo: '07489 442639',
+    street: 'Ap #700-1481 Porttitor Ave',
+    city: 'Nice',
+    postcode: '14655',
+    country: 'Nauru',
+    personalID: '16301129 4323',
+  },
+  {
+    firstName: 'Driscoll',
+    lastName: 'Jenkins',
+    email: 'libero.dui@estacfacilisis.edu',
+    phoneNo: '0843 298 8205',
+    street: 'Ap #775-8090 Sed Avenue',
+    city: 'Natales',
+    postcode: '622109',
+    country: 'Tajikistan',
+    personalID: '16430908 1950',
+  },
+  {
+    firstName: 'Morgan',
+    lastName: 'Hutchinson',
+    email: 'mauris.eu@ipsum.ca',
+    phoneNo: '070 6292 4498',
+    street: '3135 Curabitur Rd.',
+    city: 'Darmstadt',
+    postcode: '010900',
+    country: 'Colombia',
+    personalID: '16890811 2991',
+  },
+  {
+    firstName: 'Kylee',
+    lastName: 'Riddle',
+    email: 'libero.Proin@malesuadafamesac.com',
+    phoneNo: '(017177) 84788',
+    street: '7336 Ipsum St.',
+    city: 'Semarang',
+    postcode: '9828',
+    country: 'Papua New Guinea',
+    personalID: '16260701 0093',
+  },
+  {
+    firstName: 'Cathleen',
+    lastName: 'Dale',
+    email: 'risus.Donec@augue.edu',
+    phoneNo: '(0115) 224 4142',
+    street: 'Ap #568-2948 Fringilla Rd.',
+    city: 'Brandenburg',
+    postcode: 'CH2L 4EH',
+    country: 'Guinea-Bissau',
+    personalID: '16161203 4817',
+  },
+  {
+    firstName: 'Sierra',
+    lastName: 'Robbins',
+    email: 'dictum.eleifend.nunc@tellus.net',
+    phoneNo: '(01266) 957950',
+    street: '481-6201 Mattis. Rd.',
+    city: 'Upper Hutt',
+    postcode: '23945',
+    country: 'Isle of Man',
+    personalID: '16691217 6010',
+  },
+  {
+    firstName: 'Levi',
+    lastName: 'Simpson',
+    email: 'Nulla.tempor.augue@nibhdolor.ca',
+    phoneNo: '0855 608 0347',
+    street: '555-4187 Integer Av.',
+    city: 'Curacaví',
+    postcode: '439311',
+    country: 'Tuvalu',
+    personalID: '16000330 9499',
+  },
+  {
+    firstName: 'Kyle',
+    lastName: 'Mendez',
+    email: 'lacinia@senectus.org',
+    phoneNo: '0845 46 40',
+    street: '814-4647 Nec, St.',
+    city: 'Akron',
+    postcode: '199413',
+    country: 'Qatar',
+    personalID: '16471029 5397',
+  },
+  {
+    firstName: 'Emery',
+    lastName: 'Hurley',
+    email: 'Nulla.facilisis@nonummyultriciesornare.co.uk',
+    phoneNo: '(01553) 502913',
+    street: '4540 Luctus Ave',
+    city: 'Meux',
+    postcode: '36612',
+    country: 'Belize',
+    personalID: '16440228 3842',
+  },
+  {
+    firstName: 'Nadine',
+    lastName: 'Buchanan',
+    email: 'Duis@Sed.ca',
+    phoneNo: '055 2785 0228',
+    street: '694 Mi, Av.',
+    city: 'Middelburg',
+    postcode: '62232-88887',
+    country: 'Uruguay',
+    personalID: '16721129 5857',
+  },
+  {
+    firstName: 'Dalton',
+    lastName: 'Nieves',
+    email: 'nibh.dolor.nonummy@laoreetlibero.org',
+    phoneNo: '0395 486 9374',
+    street: '797-8170 Enim, Street',
+    city: 'Burhanpur',
+    postcode: '29633-93750',
+    country: 'Cayman Islands',
+    personalID: '16600205 0067',
+  },
+  {
+    firstName: 'Zeph',
+    lastName: 'Ruiz',
+    email: 'non.dui@felisorci.com',
+    phoneNo: '0845 46 41',
+    street: 'Ap #282-8369 Malesuada Ave',
+    city: 'Cavallino',
+    postcode: 'EW2V 1ZE',
+    country: 'Niger',
+    personalID: '16580706 9124',
+  },
+  {
+    firstName: 'Shannon',
+    lastName: 'Decker',
+    email: 'leo@lobortis.co.uk',
+    phoneNo: '0800 135593',
+    street: 'P.O. Box 587, 6871 Eleifend. Ave',
+    city: 'Rocca San Felice',
+    postcode: '42271-38735',
+    country: 'Somalia',
+    personalID: '16090810 4763',
+  },
+  {
+    firstName: 'Erich',
+    lastName: 'Daniels',
+    email: 'cursus.non.egestas@aliquet.org',
+    phoneNo: '0845 46 44',
+    street: '689-4565 Velit. Avenue',
+    city: 'Edmundston',
+    postcode: 'JR32 7QA',
+    country: 'Sao Tome and Principe',
+    personalID: '16720401 5049',
+  },
+  {
+    firstName: 'Rhiannon',
+    lastName: 'Malone',
+    email: 'arcu.Morbi.sit@cursus.edu',
+    phoneNo: '0361 311 4051',
+    street: 'Ap #971-1781 Vehicula Road',
+    city: 'Wood Buffalo',
+    postcode: '71682',
+    country: 'Croatia',
+    personalID: '16931028 3388',
+  },
+  {
+    firstName: 'Elijah',
+    lastName: 'Sosa',
+    email: 'ipsum.Donec.sollicitudin@leo.co.uk',
+    phoneNo: '0800 365 8250',
+    street: 'P.O. Box 169, 2562 Commodo Ave',
+    city: 'Montoggio',
+    postcode: '42092',
+    country: 'San Marino',
+    personalID: '16251107 2403',
+  },
+  {
+    firstName: 'Grady',
+    lastName: 'Crosby',
+    email: 'mollis.nec.cursus@malesuadamalesuadaInteger.edu',
+    phoneNo: '070 2824 3427',
+    street: '821-5145 Id, Ave',
+    city: 'Rosoux-Crenwick',
+    postcode: '56176',
+    country: 'Cuba',
+    personalID: '16520115 9133',
+  },
+  {
+    firstName: 'Quentin',
+    lastName: 'Armstrong',
+    email: 'erat.vel@auctor.net',
+    phoneNo: '(029) 5052 0365',
+    street: '157-253 Hendrerit Av.',
+    city: 'Aubervilliers',
+    postcode: '2151',
+    country: 'Mayotte',
+    personalID: '16730607 0553',
+  },
+  {
+    firstName: 'Samuel',
+    lastName: 'Harrell',
+    email: 'tellus@magnaSed.edu',
+    phoneNo: '07064 102166',
+    street: 'P.O. Box 713, 4115 Ut Rd.',
+    city: 'Kingston',
+    postcode: '23315',
+    country: 'Lebanon',
+    personalID: '16361016 5551',
+  },
+  {
+    firstName: 'Merritt',
+    lastName: 'Holland',
+    email: 'interdum.Nunc.sollicitudin@elitpellentesque.edu',
+    phoneNo: '0800 825458',
+    street: 'P.O. Box 261, 3590 Nascetur Road',
+    city: 'Drancy',
+    postcode: '760017',
+    country: 'French Southern Territories',
+    personalID: '16040311 2121',
+  },
+  {
+    firstName: 'Harlan',
+    lastName: 'Brennan',
+    email: 'nascetur.ridiculus@feugiatmetussit.net',
+    phoneNo: '(012812) 59410',
+    street: '8210 Torquent Av.',
+    city: 'Grantham',
+    postcode: '01537',
+    country: 'Saint Pierre and Miquelon',
+    personalID: '16431216 0239',
+  },
+  {
+    firstName: 'Stuart',
+    lastName: 'Deleon',
+    email: 'sed.pede.nec@maurisMorbinon.com',
+    phoneNo: '0807 013 3815',
+    street: 'P.O. Box 143, 4909 At Street',
+    city: 'Terrance',
+    postcode: '27218',
+    country: 'Jersey',
+    personalID: '16330207 5852',
+  },
+  {
+    firstName: 'Clarke',
+    lastName: 'Middleton',
+    email: 'in@estacfacilisis.org',
+    phoneNo: '(028) 5013 9648',
+    street: '9856 Eget, Avenue',
+    city: 'Solihull',
+    postcode: '72893',
+    country: 'Seychelles',
+    personalID: '16340804 3325',
+  },
+  {
+    firstName: 'Roanna',
+    lastName: 'Gentry',
+    email: 'dui@nascetur.net',
+    phoneNo: '(024) 3023 2962',
+    street: '3566 Ornare. Rd.',
+    city: 'Freiberg',
+    postcode: '3899',
+    country: 'Lesotho',
+    personalID: '16680618 3791',
+  },
+  {
+    firstName: 'Delilah',
+    lastName: 'Bird',
+    email: 'laoreet.lectus.quis@utaliquam.edu',
+    phoneNo: '07160 224163',
+    street: 'P.O. Box 332, 8565 Molestie Avenue',
+    city: 'Washuk',
+    postcode: '607065',
+    country: 'Indonesia',
+    personalID: '16891112 9461',
+  },
+  {
+    firstName: 'Georgia',
+    lastName: 'Cash',
+    email: 'dui@enimnisl.net',
+    phoneNo: '(0113) 542 3955',
+    street: '900-3252 Fusce Avenue',
+    city: 'Sint-Michiels',
+    postcode: 'Z8203',
+    country: 'Niue',
+    personalID: '16340718 4716',
+  },
+  {
+    firstName: 'Aiko',
+    lastName: 'Mclean',
+    email: 'cubilia.Curae.Phasellus@augueid.com',
+    phoneNo: '055 9506 2116',
+    street: 'P.O. Box 786, 1756 Fringilla St.',
+    city: 'Malonne',
+    postcode: 'Y8E 7M2',
+    country: 'Belize',
+    personalID: '16680622 4207',
+  },
+  {
+    firstName: 'Winter',
+    lastName: 'Jacobs',
+    email: 'aliquet@Duisac.ca',
+    phoneNo: '0800 693847',
+    street: '774-9011 Arcu Road',
+    city: 'Bilbo',
+    postcode: '05558',
+    country: 'Equatorial Guinea',
+    personalID: '16611201 4144',
+  },
+  {
+    firstName: 'Jolene',
+    lastName: 'Rios',
+    email: 'odio.Aliquam.vulputate@ac.ca',
+    phoneNo: '(023) 4876 2215',
+    street: 'Ap #325-8225 Amet Road',
+    city: 'Limena',
+    postcode: 'K56 0YJ',
+    country: 'Morocco',
+    personalID: '16170215 3485',
+  },
+  {
+    firstName: 'Kaden',
+    lastName: 'Morrow',
+    email: 'rutrum@eleifendnec.ca',
+    phoneNo: '07305 685548',
+    street: '8870 Aliquam Road',
+    city: 'Sète',
+    postcode: '04908',
+    country: 'Peru',
+    personalID: '16820820 6675',
+  },
+  {
+    firstName: 'Kaseem',
+    lastName: 'Norris',
+    email: 'mauris.erat.eget@nequeMorbi.com',
+    phoneNo: '07275 403152',
+    street: 'P.O. Box 776, 7115 Integer Avenue',
+    city: 'Jönköping',
+    postcode: '42236-83471',
+    country: 'Sudan',
+    personalID: '16440829 7895',
+  },
+  {
+    firstName: 'Vladimir',
+    lastName: 'Mcguire',
+    email: 'id@nonarcuVivamus.edu',
+    phoneNo: '0500 950469',
+    street: '2067 Est Ave',
+    city: 'Ziano di Fiemme',
+    postcode: '774056',
+    country: 'Mexico',
+    personalID: '16771016 3796',
+  },
+  {
+    firstName: 'Jocelyn',
+    lastName: 'Schroeder',
+    email: 'dolor@nec.ca',
+    phoneNo: '07302 403156',
+    street: 'Ap #155-3999 Vivamus St.',
+    city: 'Malloa',
+    postcode: '4059',
+    country: 'Canada',
+    personalID: '16530314 9388',
+  },
+  {
+    firstName: 'Howard',
+    lastName: 'Villarreal',
+    email: 'Donec.felis@insodales.com',
+    phoneNo: '07624 830239',
+    street: '540-7057 Cras Rd.',
+    city: 'Siverek',
+    postcode: '8701',
+    country: 'Seychelles',
+    personalID: '16640823 8530',
+  },
+  {
+    firstName: 'Adam',
+    lastName: 'Miranda',
+    email: 'amet.dapibus@faucibus.edu',
+    phoneNo: '0845 46 49',
+    street: 'Ap #931-6286 Diam. Avenue',
+    city: 'Warburg',
+    postcode: '01972',
+    country: 'Jordan',
+    personalID: '16370414 7911',
+  },
+  {
+    firstName: 'Aiko',
+    lastName: 'Elliott',
+    email: 'sodales@mauris.edu',
+    phoneNo: '0800 1111',
+    street: 'P.O. Box 583, 6119 Ut St.',
+    city: 'Villavicencio',
+    postcode: '4864 XQ',
+    country: 'Faroe Islands',
+    personalID: '16940907 6115',
+  },
+\].map((person) \=> ({
+  ...person,
+  sales: getSales(Math.random()),
+  profit: getProfit(Math.random()),
+  redOrGreen: getRating(),
+  date: new Date(Math.floor(Math.random() \* \-10000000000)).toDateString(),
+}));
+const createClassNameMutationObserver \= (
+  element: HTMLElement,
+  callback: (className: string) \=> void,
+): MutationObserver \=> {
+  const observer \= new MutationObserver(() \=> {
+    callback(element.className);
+  });
+  observer.observe(element, {
+    attributes: true,
+    attributeFilter: \['class'\],
+    childList: false,
+    characterData: false,
+  });
+  return observer;
+};
+const useClassNameMutationObserver \= (
+  element: HTMLElement,
+  callback: () \=> void,
+): void \=> {
+  useEffect(() \=> {
+    const observer \= createClassNameMutationObserver(element, callback);
+    // Cleanup listener
+    return (): void \=> {
+      observer.disconnect();
+    };
+  });
+};
+const RedOrGreenFormatter \= (params: ValueFormatterParams) \=> {
+  const dotStyle \= styles\[\`dot--${params.value}\`\];
+  return <span className\={\`${styles.dot} ${dotStyle}\`} />;
+};
+const CommaFormatter \= (params: ValueFormatterParams): string \=> {
+  return params.value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');
+};
+const CurrencyFormatter \= (params: ValueFormatterParams): string \=> {
+  if (params.value \=== '0.00') {
+    return formatter2dp.format(params.value);
+  }
+  return formatterCurrency.format(params.value);
+};
+export const AgGridCompact \= (args: AgGridReactProps) \=> {
+  const \[rowData, setRowData\] \= useState(BIG\_DATA);
+  const api \= useRef<GridApi\>();
+  // pick one row at random to show data updating in the grid
+  useEffect(() \=> {
+    const updateTick \= setInterval(() \=> {
+      const randomNo \= Math.random();
+      const index \= Math.floor(Math.random() \* rowData.length);
+      const itemToUpdate \= rowData\[index\];
+      if (randomNo < 0.5) {
+        itemToUpdate.sales \= getSales(Math.random());
+      } else if (randomNo \> 0.9) {
+        itemToUpdate.profit \= getProfit(0);
+      } else {
+        itemToUpdate.profit \= getProfit(Math.random());
+      }
+      setRowData(rowData);
+      api.current?.refreshCells();
+    }, 500);
+    return () \=> {
+      clearInterval(updateTick);
+    };
+  }, \[rowData\]);
+  const onGridReady \= useCallback((event: GridReadyEvent): void \=> {
+    api.current \= event.api;
+    api.current.resetRowHeights();
+  }, \[\]);
+  useClassNameMutationObserver(document.documentElement, () \=> {
+    if (api.current) {
+      api.current.resetRowHeights();
+    }
+  });
+  return (
+    <IressAgGridContainer
+      alignMiddle
+      compact
+      style\={{ height: '100vh', width: '100%' }}
+    \>
+      <AgGridReact        {...args}
+        onGridReady={onGridReady}
+        rowDragManaged        animateRows        enableRangeSelection={true}
+        enableCharts={true}
+        sideBar={true}
+        rowData={rowData}
+        rowSelection="multiple"        rowMultiSelectWithClick        components={{
+          redGreenDots: RedOrGreenFormatter,
+        }}
+        defaultColDef={{
+          enableCellChangeFlash: true,
+          resizable: true,
+          sortable: true,
+          unSortIcon: true,
+          filter: true,
+          floatingFilter: true,
+          enablePivot: false,
+          filterParams: {
+            buttons: \['reset', 'apply'\],
+          },
+          autoHeight: true,
+          wrapText: true,
+        }}
+        icons={AG\_THEME\_IRESS\_ICONS}
+        columnDefs={\[
+          {
+            headerName: 'Employee',
+            children: \[
+              {
+                field: 'firstName',
+                editable: true,
+                filter: 'agTextColumnFilter',
+                headerTooltip: 'First name',
+                rowDrag: true,
+                lockVisible: true,
+                tooltipField: 'firstName',
+              },
+              {
+                field: 'lastName',
+                editable: true,
+                filter: 'agTextColumnFilter',
+                headerTooltip: 'Surname',
+                lockVisible: true,
+                cellClass: 'iress-cell--divider',
+                headerClass: 'iress-cell--divider',
+                columnGroupShow: 'open',
+              },
+              {
+                field: 'personalID',
+                filter: 'agTextColumnFilter',
+                headerTooltip: 'Personal ID',
+                columnGroupShow: 'open',
+              },
+              {
+                field: 'date',
+                filter: 'agDateColumnFilter',
+                headerTooltip: 'Date',
+                columnGroupShow: 'open',
+              },
+            \],
+          },
+          {
+            headerName: 'Sales performance',
+            children: \[
+              {
+                field: 'redOrGreen',
+                headerName: 'Rating',
+                cellRenderer: 'redGreenDots',
+                filter: false,
+              },
+              {
+                field: 'sales',
+                filter: 'agNumberColumnFilter',
+                valueFormatter: CommaFormatter,
+              },
+              {
+                field: 'profit',
+                valueFormatter: CurrencyFormatter,
+                cellClassRules: {
+                  'iress--positive': (params) \=> parseInt(params.value, 10) \> 0,
+                  'iress--negative': (params) \=> parseInt(params.value, 10) < 0,
+                  'iress--zero': (params) \=> params.value \=== '0.00',
+                },
+              },
+            \],
+          },
+          {
+            headerName: 'Contact details',
+            children: \[
+              {
+                field: 'email',
+                width: 350,
+                filter: 'agTextColumnFilter',
+                headerTooltip: 'Email address',
+                cellClass: 'iress-cell--ellipsis',
+              },
+              {
+                field: 'phoneNo',
+                enableValue: true,
+                filter: 'agTextColumnFilter',
+                headerTooltip: 'Phone number',
+              },
+            \],
+          },
+          {
+            headerName: 'Address',
+            children: \[
+              {
+                field: 'street',
+                width: 350,
+                filter: 'agTextColumnFilter',
+                cellClass: 'iress-cell--ellipsis',
+                columnGroupShow: 'open',
+              },
+              {
+                field: 'city',
+                filter: 'agTextColumnFilter',
+                columnGroupShow: 'open',
+              },
+              {
+                field: 'postcode',
+                filter: 'agTextColumnFilter',
+                columnGroupShow: 'open',
+              },
+              { field: 'country', filter: 'agTextColumnFilter' },
+            \],
+          },
+        \]}
+      />    </IressAgGridContainer\>
+  );
+};
+export default AgGridCompact;
+
+Copy
 
 [](#utility-classes)Utility classes
 -----------------------------------