Inglorious WebAG Grid (No Adapter)
If your team prefers zero abstraction, you can mount AG Grid directly from an Inglorious Web type.
When this is enough
- You only have one or two grid screens.
- You want full direct access to AG Grid API and options.
- You do not need a reusable adapter layer.
Minimal direct integration
js
import { html, ref } from "@inglorious/web"
import {
AllCommunityModule,
createGrid,
ModuleRegistry,
} from "ag-grid-community"
ModuleRegistry.registerModules([AllCommunityModule])
const gridInstances = new Map()
export const gridType = {
create(entity) {
entity.themeClass ??= "ag-theme-quartz"
entity.height ??= 520
entity.rowData ??= []
entity.columnDefs ??= []
},
render(entity) {
const height =
typeof entity.height === "number" ? `${entity.height}px` : entity.height
return html`
<div
class="${entity.themeClass}"
style="width: 100%; height: ${height};"
${ref((el) => {
if (!el) return
const current = gridInstances.get(entity.id)
if (!current) {
const api = createGrid(el, {
rowData: entity.rowData,
columnDefs: entity.columnDefs,
})
gridInstances.set(entity.id, { api, el })
return
}
if (current.el !== el) {
current.api.destroy()
const api = createGrid(el, {
rowData: entity.rowData,
columnDefs: entity.columnDefs,
})
gridInstances.set(entity.id, { api, el })
return
}
current.api.updateGridOptions({
rowData: entity.rowData,
columnDefs: entity.columnDefs,
})
})}
></div>
`
},
destroy(entity) {
const current = gridInstances.get(entity.id)
if (!current) return
current.api.destroy()
gridInstances.delete(entity.id)
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
CSS imports
js
import "ag-grid-community/styles/ag-grid.css"
import "ag-grid-community/styles/ag-theme-quartz.css"
1
2
2
Trade-off vs adapter package
- Direct recipe: less code upfront, maximum control.
- Adapter package: reusable lifecycle patterns and consistent event surface across apps.