@deephaven/js-plugin-ag-grid 0.3.0 → 0.5.0

package/README.md

@@ -4,10 +4,73 @@ This package can be used to display Deephaven tables using [AG Grid](https://www
 
 ## Usage
 
-Import the DeephavenViewportDatasource and use it with your AG Grid view. For example, in React:
+The easiest way to use this plugin is to import and use the provided `AgGridView` component directly. You must wrap it with an `ApiContext.Provider` to provide the Deephaven API instance:
 
 ```tsx
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
+import type { dh as DhType } from '@deephaven/jsapi-types';
+// Only if using Core+ features
+import type { dh as CorePlusDhType } from '@deephaven-enterprise/jsapi-coreplus-types';
+import { AgGridView } from '@deephaven/js-plugin-ag-grid';
+import { ApiContext } from '@deephaven/jsapi-bootstrap';
+
+function DeephavenAgGridComponent({
+  api,
+  table,
+}: {
+  api: typeof DhType;
+  table: DhType.Table | DhType.TreeTable | CorePlusDhType.PivotTable;
+}) {
+  return (
+    <ApiContext.Provider value={api}>
+      <AgGridView table={table} />
+    </ApiContext.Provider>
+  );
+}
+```
+
+### Formatting
+
+You can pass in custom `Settings` to the `AgGridView` component to configure the grid's formatting. For example, to apply the Singapore time zone, display time down to the nanosecond, and show decimals to 4 places by default:
+
+```tsx
+import React, { useMemo } from 'react';
+import type { dh as DhType } from '@deephaven/jsapi-types';
+import { AgGridView } from '@deephaven/js-plugin-ag-grid';
+import { ApiContext } from '@deephaven/jsapi-bootstrap';
+
+function FormattedAgGridComponent({
+  api,
+  table,
+}: {
+  api: typeof DhType;
+  table: DhType.Table | DhType.TreeTable;
+}) {
+  const settings = useMemo(
+    () => ({
+      timeZone: 'Singapore',
+      defaultDateTimeFormat: 'yyyy-MM-dd HH:mm:ss.SSSSSSSSS',
+      defaultDecimalFormatOptions: {
+        defaultFormatString: '###,##0.0000',
+      },
+    }),
+    []
+  );
+
+  return (
+    <ApiContext.Provider value={api}>
+      <AgGridView table={table} settings={settings} />
+    </ApiContext.Provider>
+  );
+}
+```
+
+## Advanced Usage
+
+You can import the datasource directly if you want to manipulate the `AgGridReact` component directly. Import the DeephavenViewportDatasource and use it with your AG Grid view:
+
+```tsx
+import React, { useMemo } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 import type { dh as DhType } from '@deephaven/jsapi-types';
 import { DeephavenViewportDatasource } from '@deephaven/js-plugin-ag-grid';
@@ -31,7 +94,7 @@ function DeephavenAgGridComponent({
       }}
       rowModelType="viewport"
       viewportDatasource={datasource}
-      // other AG Grid properties
+      // ...other AG Grid properties
     />
   );
 }
@@ -46,3 +109,5 @@ The [`DeephavenViewportDatasource` listens to the grid's events](./src/datasourc
 - [AgGridFilterUtils](./src/utils/AgGridFilterUtils.ts): Utility functions for mapping AG Grid filter models to Deephaven table operations.
 - [AgGridSortUtils](./src/utils/AgGridSortUtils.ts): Utility functions for mapping AG Grid sort models to Deephaven table operations.
 - [AgGridAggUtils](./src/utils/AgGridAggUtils.ts): Utility functions for mapping AG Grid aggregation and grouping models to Deephaven table operations.
+- [AgGridPivotUtils](./src/utils/AgGridPivotUtils.ts): Utility functions for handling pivot tables in AG Grid with Deephaven.
+- [AgGridFormatter](./src/utils/AgGridFormatter.ts): AG Grid formatter that takes Deephaven workspace settings to format columns.

package/dist/AgGridPlugin.js

@@ -1,8 +1,8 @@
 var _a, _b;
 import { PluginType } from '@deephaven/plugin';
 import { vsTable } from '@deephaven/icons';
-import { LicenseManager } from '@ag-grid-enterprise/core';
-import { AgGridWidget } from './AgGridWidget';
+import { LicenseManager } from 'ag-grid-enterprise';
+import { AgGridWidget } from './components';
 const key = (_b = (_a = import.meta.env) === null || _a === void 0 ? void 0 : _a.VITE_AG_GRID_LICENSE_KEY) !== null && _b !== void 0 ? _b : '';
 if (key != null && key !== '') {
     LicenseManager.setLicenseKey(key);
@@ -10,7 +10,7 @@ if (key != null && key !== '') {
 export const AgGridPlugin = {
     name: '@deephaven/js-plugin-ag-grid',
     type: PluginType.WIDGET_PLUGIN,
-    supportedTypes: ['deephaven.ag_grid.AgGrid', 'PivotTable'],
+    supportedTypes: ['deephaven.ag_grid.AgGrid'],
     component: AgGridWidget,
     icon: vsTable,
     title: 'AG Grid',

package/dist/AgGridPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgGridPlugin.js","sourceRoot":"","sources":["../src/AgGridPlugin.ts"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,GAAG,GAAG,MAAA,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,0CAAE,wBAAwB,mCAAI,EAAE,CAAC;AAC5D,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,KAAK,EAAE,EAAE;IAC7B,cAAc,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CACnC;AAED,MAAM,CAAC,MAAM,YAAY,GAA4B;IACnD,IAAI,EAAE,8BAA8B;IACpC,IAAI,EAAE,UAAU,CAAC,aAAa;IAC9B,cAAc,EAAE,CAAC,0BAA0B,EAAE,YAAY,CAAC;IAC1D,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AgGridPlugin.js","sourceRoot":"","sources":["../src/AgGridPlugin.ts"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,MAAM,GAAG,GAAG,MAAA,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,0CAAE,wBAAwB,mCAAI,EAAE,CAAC;AAC5D,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,KAAK,EAAE,EAAE,CAAC;IAC9B,cAAc,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAA4B;IACnD,IAAI,EAAE,8BAA8B;IACpC,IAAI,EAAE,UAAU,CAAC,aAAa;IAC9B,cAAc,EAAE,CAAC,0BAA0B,CAAC;IAC5C,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,eAAe,YAAY,CAAC"}