@deephaven/js-plugin-ag-grid 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# Deephaven JS Plugin for AG Grid
|
|
2
|
+
|
|
3
|
+
This package can be used to display Deephaven tables using [AG Grid](https://www.ag-grid.com/). It is currently in a beta state.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
Import the DeephavenViewportDatasource and use it with your AG Grid view. For example, in React:
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import React, { useEffect, useRef } from 'react';
|
|
11
|
+
import { AgGridReact } from 'ag-grid-react';
|
|
12
|
+
import type { dh as DhType } from '@deephaven/jsapi-types';
|
|
13
|
+
import { DeephavenViewportDatasource } from '@deephaven/js-plugin-ag-grid';
|
|
14
|
+
|
|
15
|
+
function DeephavenAgGridComponent({
|
|
16
|
+
dh,
|
|
17
|
+
table,
|
|
18
|
+
}: {
|
|
19
|
+
dh: typeof DhType;
|
|
20
|
+
table: DhType.Table;
|
|
21
|
+
}) {
|
|
22
|
+
const datasource = useMemo(
|
|
23
|
+
() => new DeephavenViewportDatasource(dh, table),
|
|
24
|
+
[dh, table]
|
|
25
|
+
);
|
|
26
|
+
return (
|
|
27
|
+
<AgGridReact
|
|
28
|
+
onGridReady={({ api }) => {
|
|
29
|
+
// Set the API in the Grid when the grid is ready
|
|
30
|
+
datasource.setGridApi(api);
|
|
31
|
+
}}
|
|
32
|
+
rowModelType="viewport"
|
|
33
|
+
viewportDatasource={datasource}
|
|
34
|
+
// other AG Grid properties
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Details
|
|
41
|
+
|
|
42
|
+
The `DeephavenViewportDatasource` class is designed to work with AG Grid's viewport row model. It fetches data from a Deephaven table and provides it to the grid as needed. The datasource handles the logic for fetching rows based on the current viewport, which is defined by the first and last row indices.
|
|
43
|
+
|
|
44
|
+
The [`DeephavenViewportDatasource` listens to the grid's events](./src/datasources/DeephavenViewportDatasource.ts#115) to determine when to update the filters, sorts, aggregations, and groupings in the Deephaven table. Functions in the [utils](./src/utils/) map the Grid's state to operations that can be applied to the Deephaven Table object, which then applies the operation on the server side.
|
|
45
|
+
|
|
46
|
+
- [AgGridFilterUtils](./src/utils/AgGridFilterUtils.ts): Utility functions for mapping AG Grid filter models to Deephaven table operations.
|
|
47
|
+
- [AgGridSortUtils](./src/utils/AgGridSortUtils.ts): Utility functions for mapping AG Grid sort models to Deephaven table operations.
|
|
48
|
+
- [AgGridAggUtils](./src/utils/AgGridAggUtils.ts): Utility functions for mapping AG Grid aggregation and grouping models to Deephaven table operations.
|
package/dist/bundle/index.js
CHANGED
|
@@ -60452,7 +60452,6 @@ function TreeCellRenderer(props) {
|
|
|
60452
60452
|
{
|
|
60453
60453
|
icon: isExpanded ? icons.vsTriangleDown : icons.vsTriangleRight,
|
|
60454
60454
|
kind: "ghost",
|
|
60455
|
-
tooltip: isExpanded ? "Collapse" : "Expand",
|
|
60456
60455
|
onClick: handleClick,
|
|
60457
60456
|
style: {
|
|
60458
60457
|
width: "calc(100% - 5px)",
|
|
@@ -60698,6 +60697,7 @@ exports.AgGridCellColors = AgGridCellColors;
|
|
|
60698
60697
|
exports.AgGridThemeColors = AgGridThemeColors;
|
|
60699
60698
|
exports.DeephavenViewportDatasource = DeephavenViewportDatasource;
|
|
60700
60699
|
exports.TREE_NODE_KEY = TREE_NODE_KEY;
|
|
60700
|
+
exports.TreeCellRenderer = TreeCellRenderer;
|
|
60701
60701
|
exports.convertColumnToColDef = convertColumnToColDef;
|
|
60702
60702
|
exports.default = AgGridPlugin;
|
|
60703
60703
|
exports.extractViewportRow = extractViewportRow;
|
|
@@ -4,5 +4,6 @@ import DeephavenViewportDatasource from '../datasources/DeephavenViewportDatasou
|
|
|
4
4
|
export type TreeCellRendererProps = CustomCellRendererProps & {
|
|
5
5
|
datasource: DeephavenViewportDatasource;
|
|
6
6
|
};
|
|
7
|
-
export
|
|
7
|
+
export declare function TreeCellRenderer(props: TreeCellRendererProps): JSX.Element;
|
|
8
|
+
export default TreeCellRenderer;
|
|
8
9
|
//# sourceMappingURL=TreeCellRenderer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeCellRenderer.d.ts","sourceRoot":"","sources":["../../src/renderers/TreeCellRenderer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAInE,OAAO,2BAA2B,MAAM,4CAA4C,CAAC;AAErF,MAAM,MAAM,qBAAqB,GAAG,uBAAuB,GAAG;IAC5D,UAAU,EAAE,2BAA2B,CAAC;CACzC,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"TreeCellRenderer.d.ts","sourceRoot":"","sources":["../../src/renderers/TreeCellRenderer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAInE,OAAO,2BAA2B,MAAM,4CAA4C,CAAC;AAErF,MAAM,MAAM,qBAAqB,GAAG,uBAAuB,GAAG;IAC5D,UAAU,EAAE,2BAA2B,CAAC;CACzC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CA4C1E;AAED,eAAe,gBAAgB,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { Button } from '@deephaven/components';
|
|
|
4
4
|
import { vsTriangleDown, vsTriangleRight } from '@deephaven/icons';
|
|
5
5
|
import { TREE_NODE_KEY } from '../utils/AgGridTableUtils';
|
|
6
6
|
import DeephavenViewportDatasource from '../datasources/DeephavenViewportDatasource';
|
|
7
|
-
export
|
|
7
|
+
export function TreeCellRenderer(props) {
|
|
8
8
|
const { node, datasource, api } = props;
|
|
9
9
|
const { data } = node;
|
|
10
10
|
const treeNode = data === null || data === void 0 ? void 0 : data[TREE_NODE_KEY];
|
|
@@ -19,7 +19,7 @@ export default function TreeCellRenderer(props) {
|
|
|
19
19
|
const colDef = rowGroupColumns[hasChildren ? depth - 2 : rowGroupColumns.length - 1];
|
|
20
20
|
const colId = colDef === null || colDef === void 0 ? void 0 : colDef.getId();
|
|
21
21
|
const groupName = data === null || data === void 0 ? void 0 : data[colId];
|
|
22
|
-
return (_jsxs(_Fragment, { children: [hasChildren && (_jsx(Button, Object.assign({ icon: isExpanded ? vsTriangleDown : vsTriangleRight, kind: "ghost",
|
|
22
|
+
return (_jsxs(_Fragment, { children: [hasChildren && (_jsx(Button, Object.assign({ icon: isExpanded ? vsTriangleDown : vsTriangleRight, kind: "ghost", onClick: handleClick, style: {
|
|
23
23
|
width: 'calc(100% - 5px)',
|
|
24
24
|
height: '100%',
|
|
25
25
|
margin: 0,
|
|
@@ -31,4 +31,5 @@ export default function TreeCellRenderer(props) {
|
|
|
31
31
|
justifyContent: 'left',
|
|
32
32
|
} }, { children: groupName }))), !hasChildren && groupName] }));
|
|
33
33
|
}
|
|
34
|
+
export default TreeCellRenderer;
|
|
34
35
|
//# sourceMappingURL=TreeCellRenderer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeCellRenderer.js","sourceRoot":"","sources":["../../src/renderers/TreeCellRenderer.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAY,MAAM,2BAA2B,CAAC;AACpE,OAAO,2BAA2B,MAAM,4CAA4C,CAAC;AAMrF,MAAM,
|
|
1
|
+
{"version":3,"file":"TreeCellRenderer.js","sourceRoot":"","sources":["../../src/renderers/TreeCellRenderer.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAY,MAAM,2BAA2B,CAAC;AACpE,OAAO,2BAA2B,MAAM,4CAA4C,CAAC;AAMrF,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACtB,MAAM,QAAQ,GAAyB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,aAAa,CAAC,CAAC;IAC7D,MAAM,EAAE,WAAW,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC;IAE9E,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,QAAQ,IAAI,IAAI,IAAI,UAAU,YAAY,2BAA2B,EAAE;YACzE,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;SAC9D;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,MAAM,eAAe,GAAG,GAAG,CAAC,kBAAkB,EAAE,CAAC;IACjD,uGAAuG;IACvG,MAAM,MAAM,GACV,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,CAAC;IAC9B,MAAM,SAAS,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,KAAK,CAAC,CAAC;IAEhC,OAAO,CACL,8BACG,WAAW,IAAI,CACd,KAAC,MAAM,kBACL,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,EACnD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE;oBACL,KAAK,EAAE,kBAAkB;oBACzB,MAAM,EAAE,MAAM;oBACd,MAAM,EAAE,CAAC;oBACT,UAAU,EAAE,CAAC;oBACb,aAAa,EAAE,CAAC;oBAChB,YAAY,EAAE,CAAC;oBACf,WAAW,EAAE,KAAK,GAAG,EAAE;oBACvB,SAAS,EAAE,MAAM;oBACjB,cAAc,EAAE,MAAM;iBACvB,gBAEA,SAAS,IACH,CACV,EACA,CAAC,WAAW,IAAI,SAAS,IACzB,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,gBAAgB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deephaven/js-plugin-ag-grid",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Deephaven AG Grid plugin",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Deephaven",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"typescript": "^4.5.4"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"react": "^17.0.2 || ^18.0.0",
|
|
48
|
-
"react-dom": "^17.0.2 || ^18.0.0"
|
|
47
|
+
"react": "^17.0.2 || ^18.0.0 || ^19.0.0",
|
|
48
|
+
"react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@ag-grid-community/core": "32.3.4",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"files": [
|
|
74
74
|
"dist"
|
|
75
75
|
],
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "ade5bd43155e860f1f3e58cd0d61d25f4ca57db2"
|
|
77
77
|
}
|