@iress-oss/ids-mcp-server 0.0.1-dev.0

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

@@ -0,0 +1,2666 @@
+[](#ag-grid)AG Grid
+===================
+
+Overview
+--------
+
+AG Grid is the preferred solution for complex tables.
+
+1 to 3 of 3. Page 1 of 1
+
+Drag here to set row groups
+
+Drag here to set column labels
+
+Make
+
+Model
+
+Price
+
+Electric
+
+Order
+
+Tesla
+
+Model Y
+
+$64,950
+
+Order
+
+Ford
+
+F-Series
+
+$33,850
+
+Order
+
+Toyota
+
+Corolla
+
+$29,600
+
+Order
+
+Page Size:
+
+500
+
+1 to 3 of 3
+
+Page 1 of 1
+
+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)
+-------------------------
+
+AG Grid is a third-party library and has its own API. To use AG Grid, you will need to refer to the [AG Grid documentation](https://www.ag-grid.com/react-data-grid).
+
+[](#usage)Usage
+---------------
+
+The `@iress/ids-themes` package provides an Iress theme for AG Grid. This theme is intended to be used on top of the Alpine theme. It works by mapping the AG grid CSS variables to the IDS design tokens, hence it should work with all IDS/Styler themes.
+
+### [](#installation)Installation
+
+1.  Ensure you have [AG grid installed](https://www.ag-grid.com/react-data-grid/getting-started/) in your project.
+2.  Add the `@iress/ids-themes` package to your project with `yarn add @iress/ids-themes`.
+3.  Import the `IressAgGridContainer` component from the package and wrap your AG Grid component with it.
+
+\[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 { IressAgGridContainer } from '@iress/ids-themes';
+<IressAgGridContainer\>
+  <AgGridReact />
+</IressAgGridContainer\>;
+
+Copy
+
+**Note:** It is important that you ensure the ag-theme-iress-lite CSS class is imported _after_ ag-theme-alpine. If you do not copy the order correctly, you will see some styling issues.
+
+### [](#version)Version
+
+The version of AG Grid that the theme is supporting is: `ag-grid-react@^33.0.0`
+
+[](#examples)Examples
+---------------------
+
+### [](#simple)Simple
+
+This is a simple example, based on the [Quick Start](https://www.ag-grid.com/react-data-grid/getting-started/) example from the AG Grid documentation.
+
+1 to 3 of 3. Page 1 of 1
+
+Drag here to set row groups
+
+Drag here to set column labels
+
+Make
+
+Model
+
+Price
+
+Electric
+
+Order
+
+Tesla
+
+Model Y
+
+$64,950
+
+Order
+
+Ford
+
+F-Series
+
+$33,850
+
+Order
+
+Toyota
+
+Corolla
+
+$29,600
+
+Order
+
+Page Size:
+
+500
+
+1 to 3 of 3
+
+Page 1 of 1
+
+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
+
+This is a complex example showcasing some of the more advanced features of AG Grid.
+
+Drag here to set row groups
+
+Drag here to set column labels
+
+Employee
+
+Sales performance
+
+Contact details
+
+Address
+
+First Name
+
+Rating
+
+Sales
+
+Profit
+
+Email
+
+Phone No
+
+Country
+
+Shellie
+
+49,446
+
+\-£627.30
+
+aliquet@purus.com
+
+0828 746 6831
+
+French Polynesia
+
+Jade
+
+78,893
+
+\-£906.36
+
+mi.pede.nonummy@senectus.org
+
+0800 360062
+
+Tonga
+
+Wyoming
+
+8,882
+
+£55.76
+
+Nulla.tempor.augue@aliquamiaculis.org
+
+0800 377 7753
+
+Rwanda
+
+Christine
+
+69,518
+
+£125.04
+
+neque.sed.dictum@ultricesVivamus.ca
+
+07578 190673
+
+Bahamas
+
+Jameson
+
+4,238
+
+£170.98
+
+sem.semper@liberoProin.com
+
+07489 442639
+
+Nauru
+
+Driscoll
+
+21,692
+
+\-£594.06
+
+libero.dui@estacfacilisis.edu
+
+0843 298 8205
+
+Tajikistan
+
+Morgan
+
+79,436
+
+£115.01
+
+mauris.eu@ipsum.ca
+
+070 6292 4498
+
+Colombia
+
+Kylee
+
+62,388
+
+£437.11
+
+libero.Proin@malesuadafamesac.com
+
+(017177) 84788
+
+Papua New Guinea
+
+Cathleen
+
+29,723
+
+\-£540.19
+
+risus.Donec@augue.edu
+
+(0115) 224 4142
+
+Guinea-Bissau
+
+Sierra
+
+95,017
+
+\-£742.40
+
+dictum.eleifend.nunc@tellus.net
+
+(01266) 957950
+
+Isle of Man
+
+Levi
+
+66,937
+
+£87.91
+
+Nulla.tempor.augue@nibhdolor.ca
+
+0855 608 0347
+
+Tuvalu
+
+Kyle
+
+2,510
+
+£454.30
+
+lacinia@senectus.org
+
+0845 46 40
+
+Qatar
+
+Emery
+
+42,677
+
+\-£869.12
+
+Nulla.facilisis@nonummyultriciesornare.co.uk
+
+(01553) 502913
+
+Belize
+
+Nadine
+
+84,276
+
+\-£724.56
+
+Duis@Sed.ca
+
+055 2785 0228
+
+Uruguay
+
+Dalton
+
+66,926
+
+\-£779.42
+
+nibh.dolor.nonummy@laoreetlibero.org
+
+0395 486 9374
+
+Cayman Islands
+
+Zeph
+
+51,688
+
+\-£639.95
+
+non.dui@felisorci.com
+
+0845 46 41
+
+Niger
+
+Shannon
+
+12,040
+
+\-£778.18
+
+leo@lobortis.co.uk
+
+0800 135593
+
+Somalia
+
+Erich
+
+69,877
+
+\-£610.68
+
+cursus.non.egestas@aliquet.org
+
+0845 46 44
+
+Sao Tome and Principe
+
+Rhiannon
+
+8,184
+
+£459.01
+
+arcu.Morbi.sit@cursus.edu
+
+0361 311 4051
+
+Croatia
+
+Elijah
+
+80,582
+
+\-£845.80
+
+ipsum.Donec.sollicitudin@leo.co.uk
+
+0800 365 8250
+
+San Marino
+
+Grady
+
+20,501
+
+£488.20
+
+mollis.nec.cursus@malesuadamalesuadaInteger.edu
+
+070 2824 3427
+
+Cuba
+
+Quentin
+
+33,800
+
+\-£948.93
+
+erat.vel@auctor.net
+
+(029) 5052 0365
+
+Mayotte
+
+Samuel
+
+64,503
+
+£142.21
+
+tellus@magnaSed.edu
+
+07064 102166
+
+Lebanon
+
+Merritt
+
+8,725
+
+\-£572.96
+
+interdum.Nunc.sollicitudin@elitpellentesque.edu
+
+0800 825458
+
+French Southern Territories
+
+Columns
+
+Filters
+
+Pivot Mode
+
+Employee
+
+First Name
+
+Last Name
+
+Personal ID
+
+Date
+
+Sales performance
+
+Rating
+
+Sales
+
+Profit
+
+Contact details
+
+Email
+
+Phone No
+
+Address
+
+Street
+
+City
+
+Row Groups
+
+Drag here to set row groups
+
+Values
+
+Drag here to aggregate
+
+Column Labels
+
+Drag here to set column labels
+
+Employee
+
+Enabled
+
+First Name
+
+Last Name
+
+Personal ID
+
+Date
+
+Sales performance
+
+Enabled
+
+Sales
+
+Profit
+
+Contact details
+
+Enabled
+
+Email
+
+Phone No
+
+Address
+
+Enabled
+
+Street
+
+City
+
+Postcode
+
+Country
+
+to of
+
+Page of
+
+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
+
+This is a complex example showcasing some of the more advanced features of AG Grid using the `compact` variant.
+
+Drag here to set row groups
+
+Drag here to set column labels
+
+Employee
+
+Sales performance
+
+Contact details
+
+Address
+
+First Name
+
+Rating
+
+Sales
+
+Profit
+
+Email
+
+Phone No
+
+Country
+
+Shellie
+
+3,489
+
+£21.68
+
+aliquet@purus.com
+
+0828 746 6831
+
+French Polynesia
+
+Jade
+
+12,963
+
+£306.21
+
+mi.pede.nonummy@senectus.org
+
+0800 360062
+
+Tonga
+
+Wyoming
+
+23,715
+
+\-£745.77
+
+Nulla.tempor.augue@aliquamiaculis.org
+
+0800 377 7753
+
+Rwanda
+
+Christine
+
+61,370
+
+\-£662.81
+
+neque.sed.dictum@ultricesVivamus.ca
+
+07578 190673
+
+Bahamas
+
+Jameson
+
+95,958
+
+\-£953.31
+
+sem.semper@liberoProin.com
+
+07489 442639
+
+Nauru
+
+Driscoll
+
+7,579
+
+£268.43
+
+libero.dui@estacfacilisis.edu
+
+0843 298 8205
+
+Tajikistan
+
+Morgan
+
+41,229
+
+£204.74
+
+mauris.eu@ipsum.ca
+
+070 6292 4498
+
+Colombia
+
+Kylee
+
+80,559
+
+\-£698.67
+
+libero.Proin@malesuadafamesac.com
+
+(017177) 84788
+
+Papua New Guinea
+
+Cathleen
+
+85,185
+
+\-£927.22
+
+risus.Donec@augue.edu
+
+(0115) 224 4142
+
+Guinea-Bissau
+
+Sierra
+
+43,903
+
+£287.01
+
+dictum.eleifend.nunc@tellus.net
+
+(01266) 957950
+
+Isle of Man
+
+Levi
+
+27,410
+
+\-£598.32
+
+Nulla.tempor.augue@nibhdolor.ca
+
+0855 608 0347
+
+Tuvalu
+
+Kyle
+
+59,394
+
+£19.79
+
+lacinia@senectus.org
+
+0845 46 40
+
+Qatar
+
+Emery
+
+69,852
+
+\-£784.52
+
+Nulla.facilisis@nonummyultriciesornare.co.uk
+
+(01553) 502913
+
+Belize
+
+Nadine
+
+9,884
+
+£97.94
+
+Duis@Sed.ca
+
+055 2785 0228
+
+Uruguay
+
+Dalton
+
+60,037
+
+£429.75
+
+nibh.dolor.nonummy@laoreetlibero.org
+
+0395 486 9374
+
+Cayman Islands
+
+Zeph
+
+61,632
+
+£256.51
+
+non.dui@felisorci.com
+
+0845 46 41
+
+Niger
+
+Shannon
+
+6,613
+
+£57.82
+
+leo@lobortis.co.uk
+
+0800 135593
+
+Somalia
+
+Erich
+
+34,643
+
+0.00
+
+cursus.non.egestas@aliquet.org
+
+0845 46 44
+
+Sao Tome and Principe
+
+Rhiannon
+
+57,478
+
+£125.61
+
+arcu.Morbi.sit@cursus.edu
+
+0361 311 4051
+
+Croatia
+
+Elijah
+
+8,032
+
+\-£936.24
+
+ipsum.Donec.sollicitudin@leo.co.uk
+
+0800 365 8250
+
+San Marino
+
+Grady
+
+27,873
+
+£474.66
+
+mollis.nec.cursus@malesuadamalesuadaInteger.edu
+
+070 2824 3427
+
+Cuba
+
+Quentin
+
+56,391
+
+\-£879.89
+
+erat.vel@auctor.net
+
+(029) 5052 0365
+
+Mayotte
+
+Samuel
+
+76,919
+
+£431.98
+
+tellus@magnaSed.edu
+
+07064 102166
+
+Lebanon
+
+Merritt
+
+53,310
+
+£103.21
+
+interdum.Nunc.sollicitudin@elitpellentesque.edu
+
+0800 825458
+
+French Southern Territories
+
+Harlan
+
+88,270
+
+£365.29
+
+nascetur.ridiculus@feugiatmetussit.net
+
+(012812) 59410
+
+Saint Pierre and Miquelon
+
+Stuart
+
+83,845
+
+£465.92
+
+sed.pede.nec@maurisMorbinon.com
+
+0807 013 3815
+
+Jersey
+
+Columns
+
+Filters
+
+Pivot Mode
+
+Employee
+
+First Name
+
+Last Name
+
+Personal ID
+
+Date
+
+Sales performance
+
+Rating
+
+Sales
+
+Profit
+
+Contact details
+
+Email
+
+Phone No
+
+Address
+
+Street
+
+City
+
+Postcode
+
+Country
+
+Row Groups
+
+Drag here to set row groups
+
+Values
+
+Drag here to aggregate
+
+Column Labels
+
+Drag here to set column labels
+
+Employee
+
+Enabled
+
+First Name
+
+Last Name
+
+Personal ID
+
+Date
+
+Sales performance
+
+Enabled
+
+Sales
+
+Profit
+
+Contact details
+
+Enabled
+
+Email
+
+Phone No
+
+Address
+
+Enabled
+
+Street
+
+City
+
+Postcode
+
+Country
+
+to of
+
+Page of
+
+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
+-----------------------------------
+
+Because AG Grid is a third-party piece of software, we have to rely on utility classes to enforce styling of cell content. You can use the following utility classes.
+
+| Class | Applied to | Effect |
+| --- | --- | --- |
+| iress--positive | Cell content | Adds buy / positive styling to match the IressText buy variant |
+| iress--negative | Cell content | Adds sell / negative styling to match the IressText sell variant |
+| iress--zero | Cell content | Reduces the visual weight of cells that have a value of zero |
+| iress-cell--divider | Column (via cellClass and headerCellClass) | Creates a vertical divide between this column and the next column |
+| iress-cell--ellipsis | Column (via cellClass) | Shows an ellipsis instead of wrapping text content |
+
+[](#common-issues)Common issues
+-------------------------------
+
+### [](#wrong-row-heights)Wrong row heights
+
+If you are seeing grid rows not automatically adjusting to their content, you may have to set `autoHeight=true` on the column definition that will define the height (usually the one with the most content, or the first column).
+
+\[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;
+}
+
+<AgGridReact columnDefs\={\[{ field: 'name', autoHeight: true }\]} />
+
+Copy
+
+Performance concerns
+--------------------
+
+As `autoHeight` adds additional render calculations to the AG grid, you may notice reduced performance, particularly in larger tables. If this happens, you should set the `getRowHeight` property on AG Grid to a fixed row height.
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Props (API)](#props-api)
+*   [Usage](#usage)
+    *   [Installation](#installation)
+    *   [Version](#version)
+*   [Examples](#examples)
+    *   [Simple](#simple)
+    *   [Complex](#complex)
+    *   [Compact](#compact)
+*   [Utility classes](#utility-classes)
+*   [Common issues](#common-issues)
+    *   [Wrong row heights](#wrong-row-heights)