@object-ui/plugin-aggrid 0.4.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/index'
+export {}

package/dist/index.js

@@ -0,0 +1,8 @@
+import { A as p, a as t } from "./index-B6NPAFZx.js";
+import "react";
+import "@object-ui/core";
+import "@object-ui/components";
+export {
+  p as AgGridRenderer,
+  t as aggridComponents
+};

package/dist/index.umd.cjs

@@ -0,0 +1,6 @@
+(function(d,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react"),require("@object-ui/core"),require("@object-ui/components"),require("ag-grid-react")):typeof define=="function"&&define.amd?define(["exports","react","@object-ui/core","@object-ui/components","ag-grid-react"],l):(d=typeof globalThis<"u"?globalThis:d||self,l(d.ObjectUIPluginAgGrid={},d.React,d.ObjectUICore,d.ObjectUIComponents,d.AgGridReact))})(this,(function(d,l,ae,re,ne){"use strict";var F={exports:{}},P={};var $;function le(){if($)return P;$=1;var t=Symbol.for("react.transitional.element"),v=Symbol.for("react.fragment");function E(C,u,c){var R=null;if(c!==void 0&&(R=""+c),u.key!==void 0&&(R=""+u.key),"key"in u){c={};for(var y in u)y!=="key"&&(c[y]=u[y])}else c=u;return u=c.ref,{$$typeof:t,type:C,key:R,ref:u!==void 0?u:null,props:c}}return P.Fragment=v,P.jsx=E,P.jsxs=E,P}var O={};var ee;function oe(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===L?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case _:return"Fragment";case m:return"Profiler";case s:return"StrictMode";case f:return"Suspense";case N:return"SuspenseList";case Y:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case p:return"Portal";case I:return e.displayName||"Context";case D:return(e._context.displayName||"Context")+".Consumer";case b:var a=e.render;return e=e.displayName,e||(e=a.displayName||a.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case V:return a=e.displayName||null,a!==null?a:t(e.type)||"Memo";case A:a=e._payload,e=e._init;try{return t(e(a))}catch{}}return null}function v(e){return""+e}function E(e){try{v(e);var a=!1}catch{a=!0}if(a){a=console;var r=a.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),v(e)}}function C(e){if(e===_)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===A)return"<...>";try{var a=t(e);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function u(){var e=T.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function R(e){if(z.call(e,"key")){var a=Object.getOwnPropertyDescriptor(e,"key").get;if(a&&a.isReactWarning)return!1}return e.key!==void 0}function y(e,a){function r(){U||(U=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",a))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function q(){var e=t(this.type);return W[e]||(W[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function k(e,a,r,o,B,Z){var i=r.ref;return e={$$typeof:j,type:e,key:a,props:r,_owner:o},(i!==void 0?i:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:q}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:B}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function G(e,a,r,o,B,Z){var i=a.children;if(i!==void 0)if(o)if(J(i)){for(o=0;o<i.length;o++)S(i[o]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else S(i);if(z.call(a,"key")){i=t(e);var x=Object.keys(a).filter(function(fe){return fe!=="key"});o=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",n[i+o]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,i,x,i),n[i+o]=!0)}if(i=null,r!==void 0&&(E(r),i=""+r),R(a)&&(E(a.key),i=""+a.key),"key"in a){r={};for(var K in a)K!=="key"&&(r[K]=a[K])}else r=a;return i&&y(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,i,r,u(),B,Z)}function S(e){w(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===A&&(e._payload.status==="fulfilled"?w(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function w(e){return typeof e=="object"&&e!==null&&e.$$typeof===j}var h=l,j=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),s=Symbol.for("react.strict_mode"),m=Symbol.for("react.profiler"),D=Symbol.for("react.consumer"),I=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),N=Symbol.for("react.suspense_list"),V=Symbol.for("react.memo"),A=Symbol.for("react.lazy"),Y=Symbol.for("react.activity"),L=Symbol.for("react.client.reference"),T=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,J=Array.isArray,M=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var U,W={},Q=h.react_stack_bottom_frame.bind(h,c)(),H=M(C(c)),n={};O.Fragment=_,O.jsx=function(e,a,r){var o=1e4>T.recentlyCreatedOwnerStacks++;return G(e,a,r,!1,o?Error("react-stack-top-frame"):Q,o?M(C(e)):H)},O.jsxs=function(e,a,r){var o=1e4>T.recentlyCreatedOwnerStacks++;return G(e,a,r,!0,o?Error("react-stack-top-frame"):Q,o?M(C(e)):H)}})()),O}var te;function ie(){return te||(te=1,process.env.NODE_ENV==="production"?F.exports=le():F.exports=oe()),F.exports}var g=ie();const se=l.lazy(()=>Promise.resolve().then(()=>de)),X=({schema:t})=>g.jsx(l.Suspense,{fallback:g.jsx(re.Skeleton,{className:"w-full h-[500px]"}),children:g.jsx(se,{rowData:t.rowData,columnDefs:t.columnDefs,gridOptions:t.gridOptions,pagination:t.pagination,paginationPageSize:t.paginationPageSize,domLayout:t.domLayout,animateRows:t.animateRows,rowSelection:t.rowSelection,theme:t.theme,height:t.height,className:t.className,editable:t.editable,editType:t.editType,singleClickEdit:t.singleClickEdit,stopEditingWhenCellsLoseFocus:t.stopEditingWhenCellsLoseFocus,exportConfig:t.exportConfig,statusBar:t.statusBar,callbacks:t.callbacks,columnConfig:t.columnConfig,enableRangeSelection:t.enableRangeSelection,enableCharts:t.enableCharts,contextMenu:t.contextMenu})});ae.ComponentRegistry.register("aggrid",X,{label:"AG Grid",icon:"Table",category:"plugin",inputs:[{name:"rowData",type:"array",label:"Row Data",description:"Array of objects to display in the grid",required:!0},{name:"columnDefs",type:"array",label:"Column Definitions",description:"Array of column definitions",required:!0},{name:"pagination",type:"boolean",label:"Enable Pagination",defaultValue:!1},{name:"paginationPageSize",type:"number",label:"Page Size",defaultValue:10,description:"Number of rows per page when pagination is enabled"},{name:"theme",type:"enum",label:"Theme",enum:[{label:"Quartz",value:"quartz"},{label:"Alpine",value:"alpine"},{label:"Balham",value:"balham"},{label:"Material",value:"material"}],defaultValue:"quartz"},{name:"rowSelection",type:"enum",label:"Row Selection",enum:[{label:"None",value:void 0},{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}],defaultValue:void 0,advanced:!0},{name:"domLayout",type:"enum",label:"DOM Layout",enum:[{label:"Normal",value:"normal"},{label:"Auto Height",value:"autoHeight"},{label:"Print",value:"print"}],defaultValue:"normal",advanced:!0},{name:"animateRows",type:"boolean",label:"Animate Rows",defaultValue:!0,advanced:!0},{name:"height",type:"number",label:"Height (px)",defaultValue:500},{name:"editable",type:"boolean",label:"Enable Editing",defaultValue:!1,description:"Allow cells to be edited inline",advanced:!0},{name:"singleClickEdit",type:"boolean",label:"Single Click Edit",defaultValue:!1,description:"Start editing on single click instead of double click",advanced:!0},{name:"exportConfig",type:"code",label:"Export Config (JSON)",description:'Configure CSV export: { enabled: true, fileName: "data.csv" }',advanced:!0},{name:"statusBar",type:"code",label:"Status Bar Config (JSON)",description:'Configure status bar: { enabled: true, aggregations: ["count", "sum", "avg"] }',advanced:!0},{name:"callbacks",type:"code",label:"Event Callbacks (JSON)",description:"Event handlers for cell clicks, selection changes, etc.",advanced:!0},{name:"columnConfig",type:"code",label:"Column Config (JSON)",description:"Global column settings: { resizable: true, sortable: true, filterable: true }",advanced:!0},{name:"enableRangeSelection",type:"boolean",label:"Enable Range Selection",defaultValue:!1,description:"Allow selecting ranges of cells (like Excel)",advanced:!0},{name:"enableCharts",type:"boolean",label:"Enable Charts",defaultValue:!1,description:"Enable integrated charting (requires AG Grid Enterprise)",advanced:!0},{name:"contextMenu",type:"code",label:"Context Menu Config (JSON)",description:'Configure right-click menu: { enabled: true, items: ["copy", "export"] }',advanced:!0},{name:"gridOptions",type:"code",label:"Grid Options (JSON)",description:"Advanced AG Grid options",advanced:!0},{name:"className",type:"string",label:"CSS Class"}],defaultProps:{rowData:[{make:"Tesla",model:"Model Y",price:64950,electric:!0},{make:"Ford",model:"F-Series",price:33850,electric:!1},{make:"Toyota",model:"Corolla",price:29600,electric:!1},{make:"Mercedes",model:"EQA",price:48890,electric:!0},{make:"Fiat",model:"500",price:15774,electric:!1},{make:"Nissan",model:"Juke",price:20675,electric:!1},{make:"Vauxhall",model:"Corsa",price:18460,electric:!1},{make:"Volvo",model:"XC90",price:72835,electric:!1},{make:"Mercedes",model:"GLA",price:47825,electric:!1},{make:"Ford",model:"Puma",price:27420,electric:!1},{make:"Volkswagen",model:"Golf",price:28850,electric:!1},{make:"Kia",model:"Sportage",price:31095,electric:!1}],columnDefs:[{field:"make",headerName:"Make",sortable:!0,filter:!0},{field:"model",headerName:"Model",sortable:!0,filter:!0},{field:"price",headerName:"Price",sortable:!0,filter:"number",valueFormatter:t=>t.value!=null?"$"+t.value.toLocaleString():""},{field:"electric",headerName:"Electric",sortable:!0,filter:!0,cellRenderer:t=>t.value===!0?"⚡ Yes":"No"}],pagination:!0,paginationPageSize:10,theme:"quartz",height:500,animateRows:!0,domLayout:"normal"}});const ue={aggrid:X};function ce({rowData:t=[],columnDefs:v=[],gridOptions:E={},pagination:C=!1,paginationPageSize:u=10,domLayout:c="normal",animateRows:R=!0,rowSelection:y,theme:q="quartz",height:k=500,className:G="",editable:S=!1,editType:w,singleClickEdit:h=!1,stopEditingWhenCellsLoseFocus:j=!0,exportConfig:p,statusBar:_,callbacks:s,columnConfig:m,enableRangeSelection:D=!1,enableCharts:I=!1,contextMenu:b}){const f=l.useRef(null),N=l.useMemo(()=>{if(!_?.enabled)return;const n=_.aggregations||["count","sum","avg"],e=[];return n.includes("count")&&e.push({statusPanel:"agAggregationComponent",statusPanelParams:{aggFuncs:["count"]}}),n.includes("sum")&&e.push({statusPanel:"agAggregationComponent",statusPanelParams:{aggFuncs:["sum"]}}),n.includes("avg")&&e.push({statusPanel:"agAggregationComponent",statusPanelParams:{aggFuncs:["avg"]}}),n.includes("min")&&e.push({statusPanel:"agAggregationComponent",statusPanelParams:{aggFuncs:["min"]}}),n.includes("max")&&e.push({statusPanel:"agAggregationComponent",statusPanelParams:{aggFuncs:["max"]}}),e},[_]),V=l.useCallback(()=>{if(!f.current?.api)return;const n={fileName:p?.fileName||"export.csv",skipColumnHeaders:p?.skipColumnHeaders||!1,allColumns:p?.allColumns||!1,onlySelected:p?.onlySelected||!1};if(f.current.api.exportDataAsCsv(n),s?.onExport){const e=p?.onlySelected?f.current.api.getSelectedRows():t;s.onExport(e||[],"csv")}},[p,s,t]),A=l.useCallback(n=>{if(!b?.enabled)return[];const e=[];return(b.items||["copy","copyWithHeaders","separator","export"]).forEach(r=>{r==="export"?e.push({name:"Export CSV",icon:"<span>📥</span>",action:()=>V()}):r==="autoSizeAll"?e.push({name:"Auto-size All Columns",action:()=>{f.current?.api&&f.current.api.autoSizeAllColumns()}}):r==="resetColumns"?e.push({name:"Reset Columns",action:()=>{f.current?.api&&f.current.api.resetColumnState()}}):e.push(r)}),b.customItems&&(e.length>0&&e.push("separator"),b.customItems.forEach(r=>{e.push({name:r.name,disabled:r.disabled,action:()=>{s?.onContextMenuAction&&s.onContextMenuAction(r.action,n.node?.data)}})})),e},[b,V,s]),Y=l.useCallback(n=>{s?.onCellClicked?.(n)},[s]),L=l.useCallback(n=>{s?.onRowClicked?.(n)},[s]),T=l.useCallback(n=>{s?.onSelectionChanged?.(n)},[s]),z=l.useCallback(n=>{s?.onCellValueChanged?.(n)},[s]),J=l.useCallback(n=>{f.current=n},[]),M=l.useMemo(()=>v?v.map(n=>{const e={...n};return S&&n.editable!==!1&&(e.editable=!0),m&&(m.resizable!==void 0&&n.resizable===void 0&&(e.resizable=m.resizable),m.sortable!==void 0&&n.sortable===void 0&&(e.sortable=m.sortable),m.filterable!==void 0&&n.filter===void 0&&(e.filter=m.filterable)),e}):[],[v,S,m]),U=l.useMemo(()=>({...E,pagination:C,paginationPageSize:u,domLayout:c,animateRows:R,rowSelection:y,editType:w,singleClickEdit:h,stopEditingWhenCellsLoseFocus:j,statusBar:N?{statusPanels:N}:void 0,enableRangeSelection:D,enableCharts:I,getContextMenuItems:b?.enabled?A:void 0,suppressCellFocus:!S,enableCellTextSelection:!0,ensureDomOrder:!0,onCellClicked:Y,onRowClicked:L,onSelectionChanged:T,onCellValueChanged:z,onGridReady:J}),[E,C,u,c,R,y,w,h,j,N,D,I,b,A,S,Y,L,T,z,J]),W=l.useMemo(()=>({height:typeof k=="number"?`${k}px`:k,width:"100%"}),[k]),H=[`ag-theme-${q}`,"rounded-xl","border","border-border","overflow-hidden","shadow-lg",G].filter(Boolean).join(" ");return g.jsxs("div",{className:"ag-grid-container",children:[p?.enabled&&g.jsx("div",{className:"mb-2 flex gap-2",children:g.jsx("button",{onClick:V,className:"px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors",children:"Export CSV"})}),g.jsx("div",{className:H,style:W,children:g.jsx(ne.AgGridReact,{ref:f,rowData:t,columnDefs:M,gridOptions:U})})]})}const de=Object.freeze(Object.defineProperty({__proto__:null,default:ce},Symbol.toStringTag,{value:"Module"}));d.AgGridRenderer=X,d.aggridComponents=ue,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));

package/dist/src/AgGridImpl.d.ts

@@ -0,0 +1,31 @@
+import { ColDef, GridOptions } from 'ag-grid-community';
+import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+export interface AgGridImplProps {
+    rowData?: any[];
+    columnDefs?: ColDef[];
+    gridOptions?: GridOptions;
+    pagination?: boolean;
+    paginationPageSize?: number;
+    domLayout?: 'normal' | 'autoHeight' | 'print';
+    animateRows?: boolean;
+    rowSelection?: 'single' | 'multiple';
+    theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+    height?: number | string;
+    className?: string;
+    editable?: boolean;
+    editType?: 'fullRow';
+    singleClickEdit?: boolean;
+    stopEditingWhenCellsLoseFocus?: boolean;
+    exportConfig?: ExportConfig;
+    statusBar?: StatusBarConfig;
+    callbacks?: AgGridCallbacks;
+    columnConfig?: ColumnConfig;
+    enableRangeSelection?: boolean;
+    enableCharts?: boolean;
+    contextMenu?: ContextMenuConfig;
+}
+/**
+ * AgGridImpl - The heavy implementation that imports AG Grid
+ * This component is lazy-loaded to avoid including AG Grid in the initial bundle
+ */
+export default function AgGridImpl({ rowData, columnDefs, gridOptions, pagination, paginationPageSize, domLayout, animateRows, rowSelection, theme, height, className, editable, editType, singleClickEdit, stopEditingWhenCellsLoseFocus, exportConfig, statusBar, callbacks, columnConfig, enableRangeSelection, enableCharts, contextMenu, }: AgGridImplProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/index.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+export type { AgGridSchema, SimpleColumnDef, AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+export interface AgGridRendererProps {
+    schema: {
+        type: string;
+        id?: string;
+        className?: string;
+        rowData?: any[];
+        columnDefs?: any[];
+        gridOptions?: any;
+        pagination?: boolean;
+        paginationPageSize?: number;
+        domLayout?: 'normal' | 'autoHeight' | 'print';
+        animateRows?: boolean;
+        rowSelection?: 'single' | 'multiple';
+        theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+        height?: number | string;
+        editable?: boolean;
+        editType?: 'fullRow';
+        singleClickEdit?: boolean;
+        stopEditingWhenCellsLoseFocus?: boolean;
+        exportConfig?: ExportConfig;
+        statusBar?: StatusBarConfig;
+        callbacks?: AgGridCallbacks;
+        columnConfig?: ColumnConfig;
+        enableRangeSelection?: boolean;
+        enableCharts?: boolean;
+        contextMenu?: ContextMenuConfig;
+    };
+}
+/**
+ * AgGridRenderer - The public API for the AG Grid component
+ * This wrapper handles lazy loading internally using React.Suspense
+ */
+export declare const AgGridRenderer: React.FC<AgGridRendererProps>;
+export declare const aggridComponents: {
+    aggrid: React.FC<AgGridRendererProps>;
+};

package/dist/src/types.d.ts

@@ -0,0 +1,91 @@
+import { ColDef, GridOptions, CellClickedEvent, RowClickedEvent, SelectionChangedEvent, CellValueChangedEvent } from 'ag-grid-community';
+/**
+ * Event callback types
+ */
+export interface AgGridCallbacks {
+    onCellClicked?: (event: CellClickedEvent) => void;
+    onRowClicked?: (event: RowClickedEvent) => void;
+    onSelectionChanged?: (event: SelectionChangedEvent) => void;
+    onCellValueChanged?: (event: CellValueChangedEvent) => void;
+    onExport?: (data: any[], format: 'csv') => void;
+    onContextMenuAction?: (action: string, rowData: any) => void;
+}
+/**
+ * Export configuration
+ */
+export interface ExportConfig {
+    enabled?: boolean;
+    fileName?: string;
+    skipColumnHeaders?: boolean;
+    allColumns?: boolean;
+    onlySelected?: boolean;
+}
+/**
+ * Status bar configuration
+ */
+export interface StatusBarConfig {
+    enabled?: boolean;
+    aggregations?: ('sum' | 'avg' | 'count' | 'min' | 'max')[];
+}
+/**
+ * Column configuration enhancements
+ */
+export interface ColumnConfig {
+    resizable?: boolean;
+    sortable?: boolean;
+    filterable?: boolean;
+}
+/**
+ * Context menu configuration
+ */
+export interface ContextMenuConfig {
+    enabled?: boolean;
+    items?: ('copy' | 'copyWithHeaders' | 'paste' | 'separator' | 'export' | 'autoSizeAll' | 'resetColumns' | string)[];
+    customItems?: Array<{
+        name: string;
+        action: string;
+        disabled?: boolean;
+    }>;
+}
+/**
+ * AG Grid schema for ObjectUI
+ */
+export interface AgGridSchema {
+    type: 'aggrid';
+    id?: string;
+    className?: string;
+    rowData?: any[];
+    columnDefs?: ColDef[];
+    gridOptions?: GridOptions;
+    pagination?: boolean;
+    paginationPageSize?: number;
+    domLayout?: 'normal' | 'autoHeight' | 'print';
+    animateRows?: boolean;
+    rowSelection?: 'single' | 'multiple';
+    editable?: boolean;
+    editType?: 'fullRow';
+    singleClickEdit?: boolean;
+    stopEditingWhenCellsLoseFocus?: boolean;
+    exportConfig?: ExportConfig;
+    statusBar?: StatusBarConfig;
+    columnConfig?: ColumnConfig;
+    enableRangeSelection?: boolean;
+    enableCharts?: boolean;
+    contextMenu?: ContextMenuConfig;
+    callbacks?: AgGridCallbacks;
+    theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+    height?: number | string;
+}
+/**
+ * Column definition with simplified schema
+ */
+export interface SimpleColumnDef {
+    field: string;
+    headerName?: string;
+    width?: number;
+    sortable?: boolean;
+    filter?: boolean | 'text' | 'number' | 'date';
+    editable?: boolean;
+    cellRenderer?: string;
+    valueFormatter?: (params: any) => string;
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@object-ui/plugin-aggrid",
+  "version": "0.4.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "AG Grid data grid plugin for Object UI, powered by AG Grid Community",
+  "homepage": "https://www.objectui.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/plugin-aggrid"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "dependencies": {
+    "@object-ui/components": "0.3.0",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/react": "0.3.0",
+    "@object-ui/types": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "ag-grid-community": "^32.0.0",
+    "ag-grid-react": "^32.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.2.1",
+    "ag-grid-community": "^35.0.1",
+    "ag-grid-react": "^32.3.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
+  }
+}

package/src/AgGridImpl.tsx

@@ -0,0 +1,316 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useMemo, useRef, useCallback } from 'react';
+import { AgGridReact } from 'ag-grid-react';
+import type { ColDef, GridOptions, GridReadyEvent, CellClickedEvent, RowClickedEvent, SelectionChangedEvent, CellValueChangedEvent, StatusPanelDef, GetContextMenuItemsParams, MenuItemDef } from 'ag-grid-community';
+import type { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+
+export interface AgGridImplProps {
+  rowData?: any[];
+  columnDefs?: ColDef[];
+  gridOptions?: GridOptions;
+  pagination?: boolean;
+  paginationPageSize?: number;
+  domLayout?: 'normal' | 'autoHeight' | 'print';
+  animateRows?: boolean;
+  rowSelection?: 'single' | 'multiple';
+  theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+  height?: number | string;
+  className?: string;
+  editable?: boolean;
+  editType?: 'fullRow';
+  singleClickEdit?: boolean;
+  stopEditingWhenCellsLoseFocus?: boolean;
+  exportConfig?: ExportConfig;
+  statusBar?: StatusBarConfig;
+  callbacks?: AgGridCallbacks;
+  columnConfig?: ColumnConfig;
+  enableRangeSelection?: boolean;
+  enableCharts?: boolean;
+  contextMenu?: ContextMenuConfig;
+}
+
+/**
+ * AgGridImpl - The heavy implementation that imports AG Grid
+ * This component is lazy-loaded to avoid including AG Grid in the initial bundle
+ */
+export default function AgGridImpl({
+  rowData = [],
+  columnDefs = [],
+  gridOptions = {},
+  pagination = false,
+  paginationPageSize = 10,
+  domLayout = 'normal',
+  animateRows = true,
+  rowSelection,
+  theme = 'quartz',
+  height = 500,
+  className = '',
+  editable = false,
+  editType,
+  singleClickEdit = false,
+  stopEditingWhenCellsLoseFocus = true,
+  exportConfig,
+  statusBar,
+  callbacks,
+  columnConfig,
+  enableRangeSelection = false,
+  enableCharts = false,
+  contextMenu,
+}: AgGridImplProps) {
+  const gridRef = useRef<any>(null);
+
+  // Build status bar panels
+  const statusPanels = useMemo((): StatusPanelDef[] | undefined => {
+    if (!statusBar?.enabled) return undefined;
+    
+    const aggregations = statusBar.aggregations || ['count', 'sum', 'avg'];
+    const panels: StatusPanelDef[] = [];
+    
+    if (aggregations.includes('count')) {
+      panels.push({ statusPanel: 'agAggregationComponent', statusPanelParams: { aggFuncs: ['count'] } });
+    }
+    if (aggregations.includes('sum')) {
+      panels.push({ statusPanel: 'agAggregationComponent', statusPanelParams: { aggFuncs: ['sum'] } });
+    }
+    if (aggregations.includes('avg')) {
+      panels.push({ statusPanel: 'agAggregationComponent', statusPanelParams: { aggFuncs: ['avg'] } });
+    }
+    if (aggregations.includes('min')) {
+      panels.push({ statusPanel: 'agAggregationComponent', statusPanelParams: { aggFuncs: ['min'] } });
+    }
+    if (aggregations.includes('max')) {
+      panels.push({ statusPanel: 'agAggregationComponent', statusPanelParams: { aggFuncs: ['max'] } });
+    }
+    
+    return panels;
+  }, [statusBar]);
+
+  // CSV Export handler
+  const handleExportCSV = useCallback(() => {
+    if (!gridRef.current?.api) return;
+    
+    const params = {
+      fileName: exportConfig?.fileName || 'export.csv',
+      skipColumnHeaders: exportConfig?.skipColumnHeaders || false,
+      allColumns: exportConfig?.allColumns || false,
+      onlySelected: exportConfig?.onlySelected || false,
+    };
+    
+    gridRef.current.api.exportDataAsCsv(params);
+    
+    if (callbacks?.onExport) {
+      const data = exportConfig?.onlySelected 
+        ? gridRef.current.api.getSelectedRows()
+        : rowData;
+      callbacks.onExport(data || [], 'csv');
+    }
+  }, [exportConfig, callbacks, rowData]);
+
+  // Context Menu handler
+  const getContextMenuItems = useCallback((params: GetContextMenuItemsParams): (string | MenuItemDef)[] => {
+    if (!contextMenu?.enabled) return [];
+    
+    const items: (string | MenuItemDef)[] = [];
+    const defaultItems = contextMenu.items || ['copy', 'copyWithHeaders', 'separator', 'export'];
+    
+    defaultItems.forEach(item => {
+      if (item === 'export') {
+        items.push({
+          name: 'Export CSV',
+          icon: '<span>📥</span>',
+          action: () => handleExportCSV(),
+        });
+      } else if (item === 'autoSizeAll') {
+        items.push({
+          name: 'Auto-size All Columns',
+          action: () => {
+            if (gridRef.current?.api) {
+              gridRef.current.api.autoSizeAllColumns();
+            }
+          },
+        });
+      } else if (item === 'resetColumns') {
+        items.push({
+          name: 'Reset Columns',
+          action: () => {
+            if (gridRef.current?.api) {
+              gridRef.current.api.resetColumnState();
+            }
+          },
+        });
+      } else {
+        items.push(item);
+      }
+    });
+    
+    // Add custom items
+    if (contextMenu.customItems) {
+      if (items.length > 0) {
+        items.push('separator');
+      }
+      contextMenu.customItems.forEach(customItem => {
+        items.push({
+          name: customItem.name,
+          disabled: customItem.disabled,
+          action: () => {
+            // Trigger dedicated context menu action callback
+            if (callbacks?.onContextMenuAction) {
+              callbacks.onContextMenuAction(customItem.action, params.node?.data);
+            }
+          },
+        });
+      });
+    }
+    
+    return items;
+  }, [contextMenu, handleExportCSV, callbacks]);
+
+  // Event handlers
+  const handleCellClicked = useCallback((event: CellClickedEvent) => {
+    callbacks?.onCellClicked?.(event);
+  }, [callbacks]);
+
+  const handleRowClicked = useCallback((event: RowClickedEvent) => {
+    callbacks?.onRowClicked?.(event);
+  }, [callbacks]);
+
+  const handleSelectionChanged = useCallback((event: SelectionChangedEvent) => {
+    callbacks?.onSelectionChanged?.(event);
+  }, [callbacks]);
+
+  const handleCellValueChanged = useCallback((event: CellValueChangedEvent) => {
+    callbacks?.onCellValueChanged?.(event);
+  }, [callbacks]);
+
+  const onGridReady = useCallback((params: GridReadyEvent) => {
+    gridRef.current = params;
+  }, []);
+
+  // Make columns editable if global editable flag is set
+  const processedColumnDefs = useMemo(() => {
+    if (!columnDefs) return [];
+    
+    return columnDefs.map(col => {
+      const processed: ColDef = { ...col };
+      
+      // Apply editable setting
+      if (editable && col.editable !== false) {
+        processed.editable = true;
+      }
+      
+      // Apply column config defaults
+      if (columnConfig) {
+        if (columnConfig.resizable !== undefined && col.resizable === undefined) {
+          processed.resizable = columnConfig.resizable;
+        }
+        if (columnConfig.sortable !== undefined && col.sortable === undefined) {
+          processed.sortable = columnConfig.sortable;
+        }
+        if (columnConfig.filterable !== undefined && col.filter === undefined) {
+          processed.filter = columnConfig.filterable;
+        }
+      }
+      
+      return processed;
+    });
+  }, [columnDefs, editable, columnConfig]);
+
+  // Merge grid options with props
+  const mergedGridOptions: GridOptions = useMemo(() => ({
+    ...gridOptions,
+    pagination,
+    paginationPageSize,
+    domLayout,
+    animateRows,
+    rowSelection,
+    editType,
+    singleClickEdit,
+    stopEditingWhenCellsLoseFocus,
+    statusBar: statusPanels ? { statusPanels } : undefined,
+    enableRangeSelection,
+    enableCharts,
+    getContextMenuItems: contextMenu?.enabled ? getContextMenuItems : undefined,
+    // Default options for better UX
+    suppressCellFocus: !editable,
+    enableCellTextSelection: true,
+    ensureDomOrder: true,
+    // Event handlers
+    onCellClicked: handleCellClicked,
+    onRowClicked: handleRowClicked,
+    onSelectionChanged: handleSelectionChanged,
+    onCellValueChanged: handleCellValueChanged,
+    onGridReady,
+  }), [
+    gridOptions, 
+    pagination, 
+    paginationPageSize, 
+    domLayout, 
+    animateRows, 
+    rowSelection,
+    editType,
+    singleClickEdit,
+    stopEditingWhenCellsLoseFocus,
+    statusPanels,
+    enableRangeSelection,
+    enableCharts,
+    contextMenu,
+    getContextMenuItems,
+    editable,
+    handleCellClicked,
+    handleRowClicked,
+    handleSelectionChanged,
+    handleCellValueChanged,
+    onGridReady,
+  ]);
+
+  // Compute container style
+  const containerStyle = useMemo(() => ({
+    height: typeof height === 'number' ? `${height}px` : height,
+    width: '100%',
+  }), [height]);
+
+  // Determine theme class and build complete class list
+  const themeClass = `ag-theme-${theme}`;
+  const classList = [
+    themeClass,
+    'rounded-xl',
+    'border',
+    'border-border',
+    'overflow-hidden',
+    'shadow-lg',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className="ag-grid-container">
+      {exportConfig?.enabled && (
+        <div className="mb-2 flex gap-2">
+          <button
+            onClick={handleExportCSV}
+            className="px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
+          >
+            Export CSV
+          </button>
+        </div>
+      )}
+      <div 
+        className={classList}
+        style={containerStyle}
+      >
+        <AgGridReact
+          ref={gridRef}
+          rowData={rowData}
+          columnDefs={processedColumnDefs}
+          gridOptions={mergedGridOptions}
+        />
+      </div>
+    </div>
+  );
+}