@object-ui/plugin-grid 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,269 @@
+# @object-ui/plugin-grid
+
+Grid plugin for Object UI - Advanced data grid with sorting, filtering, and pagination.
+
+## Features
+
+- **Data Grid** - Enterprise-grade data grid component
+- **Sorting** - Multi-column sorting support
+- **Filtering** - Column-level filtering
+- **Pagination** - Built-in pagination controls
+- **Row Selection** - Single and multi-row selection
+- **Customizable** - Tailwind CSS styling support
+
+## Installation
+
+```bash
+pnpm add @object-ui/plugin-grid
+```
+
+## Usage
+
+### Automatic Registration (Side-Effect Import)
+
+```typescript
+// In your app entry point (e.g., App.tsx or main.tsx)
+import '@object-ui/plugin-grid';
+
+// Now you can use grid types in your schemas
+const schema = {
+  type: 'grid',
+  columns: [
+    { header: 'Name', accessorKey: 'name' },
+    { header: 'Email', accessorKey: 'email' }
+  ],
+  data: []
+};
+```
+
+### Manual Registration
+
+```typescript
+import { gridComponents } from '@object-ui/plugin-grid';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Register grid components
+Object.entries(gridComponents).forEach(([type, component]) => {
+  ComponentRegistry.register(type, component);
+});
+```
+
+## Schema API
+
+### Grid
+
+Data grid with advanced features:
+
+```typescript
+{
+  type: 'grid',
+  columns: GridColumn[],
+  data?: any[],
+  sortable?: boolean,
+  filterable?: boolean,
+  pagination?: boolean | PaginationConfig,
+  selectable?: boolean,
+  onRowClick?: (row) => void,
+  className?: string
+}
+```
+
+### Column Definition
+
+```typescript
+interface GridColumn {
+  header: string;
+  accessorKey: string;
+  sortable?: boolean;
+  filterable?: boolean;
+  width?: number | string;
+  align?: 'left' | 'center' | 'right';
+  cell?: (value, row) => ReactNode;
+}
+```
+
+## Examples
+
+### Basic Grid
+
+```typescript
+const schema = {
+  type: 'grid',
+  columns: [
+    { header: 'ID', accessorKey: 'id', width: 80 },
+    { header: 'Name', accessorKey: 'name' },
+    { header: 'Email', accessorKey: 'email' },
+    { header: 'Role', accessorKey: 'role' },
+    { header: 'Status', accessorKey: 'status' }
+  ],
+  data: [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' }
+  ],
+  sortable: true,
+  filterable: true,
+  pagination: true
+};
+```
+
+### Grid with Custom Cells
+
+```typescript
+const schema = {
+  type: 'grid',
+  columns: [
+    { header: 'Name', accessorKey: 'name' },
+    { 
+      header: 'Status', 
+      accessorKey: 'status',
+      cell: (value) => ({
+        type: 'badge',
+        label: value,
+        variant: value === 'Active' ? 'success' : 'default'
+      })
+    },
+    {
+      header: 'Actions',
+      accessorKey: 'id',
+      cell: (value, row) => ({
+        type: 'button-group',
+        buttons: [
+          { label: 'Edit', onClick: () => console.log('Edit', row) },
+          { label: 'Delete', variant: 'destructive', onClick: () => console.log('Delete', row) }
+        ]
+      })
+    }
+  ],
+  data: [/* data */]
+};
+```
+
+### Selectable Grid
+
+```typescript
+const schema = {
+  type: 'grid',
+  columns: [/* columns */],
+  data: [/* data */],
+  selectable: true,
+  onRowClick: (row) => {
+    console.log('Row clicked:', row);
+  },
+  onSelectionChange: (selectedRows) => {
+    console.log('Selection changed:', selectedRows);
+  }
+};
+```
+
+### Grid with Pagination
+
+```typescript
+const schema = {
+  type: 'grid',
+  columns: [/* columns */],
+  data: [/* data */],
+  pagination: {
+    pageSize: 10,
+    showSizeChanger: true,
+    pageSizeOptions: [10, 20, 50, 100]
+  }
+};
+```
+
+## Integration with Data Sources
+
+Connect grid to backend APIs:
+
+```typescript
+import { createObjectStackAdapter } from '@object-ui/data-objectstack';
+
+const dataSource = createObjectStackAdapter({
+  baseUrl: 'https://api.example.com',
+  token: 'your-auth-token'
+});
+
+const schema = {
+  type: 'object-grid',
+  dataSource,
+  object: 'users',
+  columns: [
+    { header: 'Name', accessorKey: 'name' },
+    { header: 'Email', accessorKey: 'email' },
+    { header: 'Created', accessorKey: 'created_at' }
+  ],
+  pagination: true,
+  sortable: true,
+  filterable: true
+};
+```
+
+## Features
+
+### Sorting
+
+Enable sorting on columns:
+
+```typescript
+const schema = {
+  type: 'grid',
+  sortable: true,  // Enable sorting on all columns
+  columns: [
+    { header: 'Name', accessorKey: 'name', sortable: true },
+    { header: 'Email', accessorKey: 'email', sortable: false }  // Disable for specific column
+  ]
+};
+```
+
+### Filtering
+
+Enable column filtering:
+
+```typescript
+const schema = {
+  type: 'grid',
+  filterable: true,
+  columns: [
+    { header: 'Status', accessorKey: 'status', filterable: true }
+  ]
+};
+```
+
+### Row Actions
+
+Add actions to rows:
+
+```typescript
+const schema = {
+  type: 'grid',
+  columns: [/* columns */],
+  rowActions: [
+    { label: 'View', onClick: (row) => console.log('View', row) },
+    { label: 'Edit', onClick: (row) => console.log('Edit', row) },
+    { label: 'Delete', onClick: (row) => console.log('Delete', row) }
+  ]
+};
+```
+
+## TypeScript Support
+
+```typescript
+import type { GridSchema, GridColumn } from '@object-ui/plugin-grid';
+
+const nameColumn: GridColumn = {
+  header: 'Name',
+  accessorKey: 'name',
+  sortable: true
+};
+
+const grid: GridSchema = {
+  type: 'grid',
+  columns: [nameColumn],
+  data: [],
+  sortable: true,
+  pagination: true
+};
+```
+
+## License
+
+MIT

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,425 @@
+import le, { useState as z, useEffect as J, useCallback as Z } from "react";
+import { ComponentRegistry as oe } from "@object-ui/core";
+import { SchemaRenderer as se } from "@object-ui/react";
+import { getCellRenderer as ue } from "@object-ui/fields";
+import { DropdownMenu as ce, DropdownMenuTrigger as fe, Button as de, DropdownMenuContent as pe, DropdownMenuItem as Q } from "@object-ui/components";
+import { MoreVertical as be, Edit as ge, Trash2 as ve } from "lucide-react";
+var I = { exports: {} }, h = {};
+var ee;
+function me() {
+  if (ee) return h;
+  ee = 1;
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), g = /* @__PURE__ */ Symbol.for("react.fragment");
+  function j(_, p, b) {
+    var y = null;
+    if (b !== void 0 && (y = "" + b), p.key !== void 0 && (y = "" + p.key), "key" in p) {
+      b = {};
+      for (var T in p)
+        T !== "key" && (b[T] = p[T]);
+    } else b = p;
+    return p = b.ref, {
+      $$typeof: r,
+      type: _,
+      key: y,
+      ref: p !== void 0 ? p : null,
+      props: b
+    };
+  }
+  return h.Fragment = g, h.jsx = j, h.jsxs = j, h;
+}
+var C = {};
+var re;
+function Ee() {
+  return re || (re = 1, process.env.NODE_ENV !== "production" && (function() {
+    function r(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === v ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case w:
+          return "Fragment";
+        case R:
+          return "Profiler";
+        case $:
+          return "StrictMode";
+        case U:
+          return "Suspense";
+        case W:
+          return "SuspenseList";
+        case c:
+          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 M:
+            return "Portal";
+          case L:
+            return e.displayName || "Context";
+          case D:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case O:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case q:
+            return t = e.displayName || null, t !== null ? t : r(e.type) || "Memo";
+          case N:
+            t = e._payload, e = e._init;
+            try {
+              return r(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function g(e) {
+      return "" + e;
+    }
+    function j(e) {
+      try {
+        g(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var o = t.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          a
+        ), g(e);
+      }
+    }
+    function _(e) {
+      if (e === w) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === N)
+        return "<...>";
+      try {
+        var t = r(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function p() {
+      var e = f.A;
+      return e === null ? null : e.getOwner();
+    }
+    function b() {
+      return Error("react-stack-top-frame");
+    }
+    function y(e) {
+      if (n.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function T(e, t) {
+      function o() {
+        F || (F = !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)",
+          t
+        ));
+      }
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
+        configurable: !0
+      });
+    }
+    function S() {
+      var e = r(this.type);
+      return X[e] || (X[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 P(e, t, o, a, Y, V) {
+      var i = o.ref;
+      return e = {
+        $$typeof: d,
+        type: e,
+        key: t,
+        props: o,
+        _owner: a
+      }, (i !== void 0 ? i : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: S
+      }) : 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: Y
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: V
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function A(e, t, o, a, Y, V) {
+      var i = t.children;
+      if (i !== void 0)
+        if (a)
+          if (u(i)) {
+            for (a = 0; a < i.length; a++)
+              m(i[a]);
+            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 m(i);
+      if (n.call(t, "key")) {
+        i = r(e);
+        var x = Object.keys(t).filter(function(ie) {
+          return ie !== "key";
+        });
+        a = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", H[i + a] || (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} />`,
+          a,
+          i,
+          x,
+          i
+        ), H[i + a] = !0);
+      }
+      if (i = null, o !== void 0 && (j(o), i = "" + o), y(t) && (j(t.key), i = "" + t.key), "key" in t) {
+        o = {};
+        for (var G in t)
+          G !== "key" && (o[G] = t[G]);
+      } else o = t;
+      return i && T(
+        o,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), P(
+        e,
+        i,
+        o,
+        p(),
+        Y,
+        V
+      );
+    }
+    function m(e) {
+      k(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === N && (e._payload.status === "fulfilled" ? k(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function k(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === d;
+    }
+    var s = le, d = /* @__PURE__ */ Symbol.for("react.transitional.element"), M = /* @__PURE__ */ Symbol.for("react.portal"), w = /* @__PURE__ */ Symbol.for("react.fragment"), $ = /* @__PURE__ */ Symbol.for("react.strict_mode"), R = /* @__PURE__ */ Symbol.for("react.profiler"), D = /* @__PURE__ */ Symbol.for("react.consumer"), L = /* @__PURE__ */ Symbol.for("react.context"), O = /* @__PURE__ */ Symbol.for("react.forward_ref"), U = /* @__PURE__ */ Symbol.for("react.suspense"), W = /* @__PURE__ */ Symbol.for("react.suspense_list"), q = /* @__PURE__ */ Symbol.for("react.memo"), N = /* @__PURE__ */ Symbol.for("react.lazy"), c = /* @__PURE__ */ Symbol.for("react.activity"), v = /* @__PURE__ */ Symbol.for("react.client.reference"), f = s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, n = Object.prototype.hasOwnProperty, u = Array.isArray, E = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    s = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var F, X = {}, B = s.react_stack_bottom_frame.bind(
+      s,
+      b
+    )(), K = E(_(b)), H = {};
+    C.Fragment = w, C.jsx = function(e, t, o) {
+      var a = 1e4 > f.recentlyCreatedOwnerStacks++;
+      return A(
+        e,
+        t,
+        o,
+        !1,
+        a ? Error("react-stack-top-frame") : B,
+        a ? E(_(e)) : K
+      );
+    }, C.jsxs = function(e, t, o) {
+      var a = 1e4 > f.recentlyCreatedOwnerStacks++;
+      return A(
+        e,
+        t,
+        o,
+        !0,
+        a ? Error("react-stack-top-frame") : B,
+        a ? E(_(e)) : K
+      );
+    };
+  })()), C;
+}
+var te;
+function je() {
+  return te || (te = 1, process.env.NODE_ENV === "production" ? I.exports = me() : I.exports = Ee()), I.exports;
+}
+var l = je();
+function _e(r) {
+  return r.data ? r.data : r.staticData ? {
+    provider: "value",
+    items: r.staticData
+  } : r.objectName ? {
+    provider: "object",
+    object: r.objectName
+  } : null;
+}
+function ne(r) {
+  if (!(!r || r.length === 0))
+    return typeof r[0] == "object" && r[0] !== null, r;
+}
+const ye = ({
+  schema: r,
+  dataSource: g,
+  onEdit: j,
+  onDelete: _,
+  onRowSelect: p
+}) => {
+  const [b, y] = z([]), [T, S] = z(!0), [P, A] = z(null), [m, k] = z(null), s = _e(r), d = s?.provider === "value";
+  J(() => {
+    d && s?.provider === "value" && (y(s.items), S(!1));
+  }, [d, s]), J(() => {
+    const c = async () => {
+      try {
+        if (!g)
+          throw new Error("DataSource required");
+        const f = s?.provider === "object" ? s.object : r.objectName;
+        if (!f)
+          throw new Error("Object name required for object provider");
+        const n = await g.getObjectSchema(f);
+        k(n);
+      } catch (f) {
+        A(f);
+      }
+    }, v = ne(r.columns) || r.fields;
+    d && v ? k({ name: r.objectName, fields: {} }) : r.objectName && !d && g && c();
+  }, [r.objectName, r.columns, r.fields, g, d, s]);
+  const M = Z(() => {
+    const c = ne(r.columns);
+    if (c)
+      return c.length > 0 && typeof c[0] == "object" && c[0] !== null ? c.filter((n) => n?.field && typeof n.field == "string").map((n) => ({
+        header: n.label || n.field.charAt(0).toUpperCase() + n.field.slice(1).replace(/_/g, " "),
+        accessorKey: n.field,
+        ...n.width && { width: n.width },
+        ...n.align && { align: n.align },
+        sortable: n.sortable !== !1
+      })) : c.filter((n) => typeof n == "string" && n.trim().length > 0).map((n) => ({
+        header: n.charAt(0).toUpperCase() + n.slice(1).replace(/_/g, " "),
+        accessorKey: n
+      }));
+    if (d) {
+      const n = s?.provider === "value" ? s.items : [];
+      if (n.length > 0)
+        return (r.fields || Object.keys(n[0])).map((E) => ({
+          header: E.charAt(0).toUpperCase() + E.slice(1).replace(/_/g, " "),
+          accessorKey: E
+        }));
+    }
+    if (!m) return [];
+    const v = [];
+    return (r.fields || Object.keys(m.fields || {})).forEach((n) => {
+      const u = m.fields?.[n];
+      if (!u || u.permissions && u.permissions.read === !1) return;
+      const E = ue(u.type);
+      v.push({
+        header: u.label || n,
+        accessorKey: n,
+        cell: (F) => /* @__PURE__ */ l.jsx(E, { value: F, field: u }),
+        sortable: u.sortable !== !1
+      });
+    }), v;
+  }, [m, r.fields, r.columns, s, d]), w = Z(async () => {
+    if (!(d || !g)) {
+      S(!0);
+      try {
+        const c = s?.provider === "object" ? s.object : r.objectName;
+        if (!c)
+          throw new Error("Object name required for data fetching");
+        const f = {
+          $select: (() => {
+            if (r.fields) return r.fields;
+            if (r.columns && Array.isArray(r.columns))
+              return r.columns.map((u) => typeof u == "string" ? u : u.field);
+          })(),
+          $top: r.pagination?.pageSize || r.pageSize || 50
+        };
+        r.filter && Array.isArray(r.filter) ? f.$filter = r.filter : "defaultFilters" in r && r.defaultFilters && (f.$filter = r.defaultFilters), r.sort ? typeof r.sort == "string" ? f.$orderby = r.sort : Array.isArray(r.sort) && (f.$orderby = r.sort.map((u) => `${u.field} ${u.order}`).join(", ")) : "defaultSort" in r && r.defaultSort && (f.$orderby = `${r.defaultSort.field} ${r.defaultSort.order}`);
+        const n = await g.find(c, f);
+        y(n.data || []);
+      } catch (c) {
+        A(c);
+      } finally {
+        S(!1);
+      }
+    }
+  }, [r, g, d, s]);
+  if (J(() => {
+    (m || d) && w();
+  }, [m, d, w]), P)
+    return /* @__PURE__ */ l.jsxs("div", { className: "p-4 border border-red-300 bg-red-50 rounded-md", children: [
+      /* @__PURE__ */ l.jsx("h3", { className: "text-red-800 font-semibold", children: "Error loading grid" }),
+      /* @__PURE__ */ l.jsx("p", { className: "text-red-600 text-sm mt-1", children: P.message })
+    ] });
+  if (T && b.length === 0)
+    return /* @__PURE__ */ l.jsxs("div", { className: "p-8 text-center", children: [
+      /* @__PURE__ */ l.jsx("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" }),
+      /* @__PURE__ */ l.jsx("p", { className: "mt-2 text-sm text-gray-600", children: "Loading grid..." })
+    ] });
+  const $ = M(), R = "operations" in r ? r.operations : void 0, D = R && (R.update || R.delete), L = D ? [
+    ...$,
+    {
+      header: "Actions",
+      accessorKey: "_actions",
+      cell: (c, v) => /* @__PURE__ */ l.jsxs(ce, { children: [
+        /* @__PURE__ */ l.jsx(fe, { asChild: !0, children: /* @__PURE__ */ l.jsxs(de, { variant: "ghost", size: "icon", className: "h-8 w-8", children: [
+          /* @__PURE__ */ l.jsx(be, { className: "h-4 w-4" }),
+          /* @__PURE__ */ l.jsx("span", { className: "sr-only", children: "Open menu" })
+        ] }) }),
+        /* @__PURE__ */ l.jsxs(pe, { align: "end", children: [
+          R?.update && j && /* @__PURE__ */ l.jsxs(Q, { onClick: () => j(v), children: [
+            /* @__PURE__ */ l.jsx(ge, { className: "mr-2 h-4 w-4" }),
+            "Edit"
+          ] }),
+          R?.delete && _ && /* @__PURE__ */ l.jsxs(Q, { variant: "destructive", onClick: () => _(v), children: [
+            /* @__PURE__ */ l.jsx(ve, { className: "mr-2 h-4 w-4" }),
+            "Delete"
+          ] })
+        ] })
+      ] }),
+      sortable: !1
+    }
+  ] : $;
+  let O = !1;
+  r.selection?.type ? O = r.selection.type === "none" ? !1 : r.selection.type : r.selectable !== void 0 && (O = r.selectable);
+  const U = r.pagination !== void 0 ? !0 : r.showPagination !== void 0 ? r.showPagination : !0, W = r.pagination?.pageSize || r.pageSize || 10, q = r.searchableFields !== void 0 ? r.searchableFields.length > 0 : r.showSearch !== void 0 ? r.showSearch : !0, N = {
+    type: "data-table",
+    caption: r.label || r.title,
+    columns: L,
+    data: b,
+    pagination: U,
+    pageSize: W,
+    searchable: q,
+    selectable: O,
+    sortable: !0,
+    exportable: R?.export,
+    rowActions: D,
+    resizableColumns: r.resizable ?? r.resizableColumns ?? !0,
+    className: r.className,
+    onSelectionChange: p
+  };
+  return /* @__PURE__ */ l.jsx(se, { schema: N });
+}, ae = ({ schema: r }) => /* @__PURE__ */ l.jsx(ye, { schema: r, dataSource: null });
+oe.register("object-grid", ae);
+oe.register("grid", ae);
+export {
+  ye as ObjectGrid
+};

package/dist/index.umd.cjs

@@ -0,0 +1,6 @@
+(function(v,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react"),require("@object-ui/core"),require("@object-ui/react"),require("@object-ui/fields"),require("@object-ui/components"),require("lucide-react")):typeof define=="function"&&define.amd?define(["exports","react","@object-ui/core","@object-ui/react","@object-ui/fields","@object-ui/components","lucide-react"],d):(v=typeof globalThis<"u"?globalThis:v||self,d(v.ObjectUIPluginGrid={},v.React,v.core,v.react,v.fields,v.components,v.lucideReact))})(this,(function(v,d,K,se,le,x,W){"use strict";var Y={exports:{}},A={};var H;function ce(){if(H)return A;H=1;var r=Symbol.for("react.transitional.element"),g=Symbol.for("react.fragment");function y(R,p,j){var T=null;if(j!==void 0&&(T=""+j),p.key!==void 0&&(T=""+p.key),"key"in p){j={};for(var S in p)S!=="key"&&(j[S]=p[S])}else j=p;return p=j.ref,{$$typeof:r,type:R,key:T,ref:p!==void 0?p:null,props:j}}return A.Fragment=g,A.jsx=y,A.jsxs=y,A}var h={};var Z;function ue(){return Z||(Z=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===E?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case O:return"Fragment";case w:return"Profiler";case M:return"StrictMode";case J:return"Suspense";case $:return"SuspenseList";case u: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 G:return"Portal";case V:return e.displayName||"Context";case z:return(e._context.displayName||"Context")+".Consumer";case D:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case q:return t=e.displayName||null,t!==null?t:r(e.type)||"Memo";case F:t=e._payload,e=e._init;try{return r(e(t))}catch{}}return null}function g(e){return""+e}function y(e){try{g(e);var t=!1}catch{t=!0}if(t){t=console;var o=t.error,i=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",i),g(e)}}function R(e){if(e===O)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===F)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function p(){var e=f.A;return e===null?null:e.getOwner()}function j(){return Error("react-stack-top-frame")}function T(e){if(n.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function S(e,t){function o(){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)",t))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function C(){var e=r(this.type);return ne[e]||(ne[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 I(e,t,o,i,L,X){var s=o.ref;return e={$$typeof:b,type:e,key:t,props:o,_owner:i},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:C}):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:L}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,t,o,i,L,X){var s=t.children;if(s!==void 0)if(i)if(c(s)){for(i=0;i<s.length;i++)_(s[i]);Object.freeze&&Object.freeze(s)}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);if(n.call(t,"key")){s=r(e);var k=Object.keys(t).filter(function(be){return be!=="key"});i=0<k.length?"{key: someKey, "+k.join(": ..., ")+": ...}":"{key: someKey}",ie[s+i]||(k=0<k.length?"{"+k.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} />`,i,s,k,s),ie[s+i]=!0)}if(s=null,o!==void 0&&(y(o),s=""+o),T(t)&&(y(t.key),s=""+t.key),"key"in t){o={};for(var B in t)B!=="key"&&(o[B]=t[B])}else o=t;return s&&S(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),I(e,s,o,p(),L,X)}function _(e){P(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===F&&(e._payload.status==="fulfilled"?P(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function P(e){return typeof e=="object"&&e!==null&&e.$$typeof===b}var l=d,b=Symbol.for("react.transitional.element"),G=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),M=Symbol.for("react.strict_mode"),w=Symbol.for("react.profiler"),z=Symbol.for("react.consumer"),V=Symbol.for("react.context"),D=Symbol.for("react.forward_ref"),J=Symbol.for("react.suspense"),$=Symbol.for("react.suspense_list"),q=Symbol.for("react.memo"),F=Symbol.for("react.lazy"),u=Symbol.for("react.activity"),E=Symbol.for("react.client.reference"),f=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,n=Object.prototype.hasOwnProperty,c=Array.isArray,m=console.createTask?console.createTask:function(){return null};l={react_stack_bottom_frame:function(e){return e()}};var U,ne={},oe=l.react_stack_bottom_frame.bind(l,j)(),ae=m(R(j)),ie={};h.Fragment=O,h.jsx=function(e,t,o){var i=1e4>f.recentlyCreatedOwnerStacks++;return N(e,t,o,!1,i?Error("react-stack-top-frame"):oe,i?m(R(e)):ae)},h.jsxs=function(e,t,o){var i=1e4>f.recentlyCreatedOwnerStacks++;return N(e,t,o,!0,i?Error("react-stack-top-frame"):oe,i?m(R(e)):ae)}})()),h}var Q;function fe(){return Q||(Q=1,process.env.NODE_ENV==="production"?Y.exports=ce():Y.exports=ue()),Y.exports}var a=fe();function de(r){return r.data?r.data:r.staticData?{provider:"value",items:r.staticData}:r.objectName?{provider:"object",object:r.objectName}:null}function ee(r){if(!(!r||r.length===0))return typeof r[0]=="object"&&r[0]!==null,r}const re=({schema:r,dataSource:g,onEdit:y,onDelete:R,onRowSelect:p})=>{const[j,T]=d.useState([]),[S,C]=d.useState(!0),[I,N]=d.useState(null),[_,P]=d.useState(null),l=de(r),b=l?.provider==="value";d.useEffect(()=>{b&&l?.provider==="value"&&(T(l.items),C(!1))},[b,l]),d.useEffect(()=>{const u=async()=>{try{if(!g)throw new Error("DataSource required");const f=l?.provider==="object"?l.object:r.objectName;if(!f)throw new Error("Object name required for object provider");const n=await g.getObjectSchema(f);P(n)}catch(f){N(f)}},E=ee(r.columns)||r.fields;b&&E?P({name:r.objectName,fields:{}}):r.objectName&&!b&&g&&u()},[r.objectName,r.columns,r.fields,g,b,l]);const G=d.useCallback(()=>{const u=ee(r.columns);if(u)return u.length>0&&typeof u[0]=="object"&&u[0]!==null?u.filter(n=>n?.field&&typeof n.field=="string").map(n=>({header:n.label||n.field.charAt(0).toUpperCase()+n.field.slice(1).replace(/_/g," "),accessorKey:n.field,...n.width&&{width:n.width},...n.align&&{align:n.align},sortable:n.sortable!==!1})):u.filter(n=>typeof n=="string"&&n.trim().length>0).map(n=>({header:n.charAt(0).toUpperCase()+n.slice(1).replace(/_/g," "),accessorKey:n}));if(b){const n=l?.provider==="value"?l.items:[];if(n.length>0)return(r.fields||Object.keys(n[0])).map(m=>({header:m.charAt(0).toUpperCase()+m.slice(1).replace(/_/g," "),accessorKey:m}))}if(!_)return[];const E=[];return(r.fields||Object.keys(_.fields||{})).forEach(n=>{const c=_.fields?.[n];if(!c||c.permissions&&c.permissions.read===!1)return;const m=le.getCellRenderer(c.type);E.push({header:c.label||n,accessorKey:n,cell:U=>a.jsx(m,{value:U,field:c}),sortable:c.sortable!==!1})}),E},[_,r.fields,r.columns,l,b]),O=d.useCallback(async()=>{if(!(b||!g)){C(!0);try{const u=l?.provider==="object"?l.object:r.objectName;if(!u)throw new Error("Object name required for data fetching");const f={$select:(()=>{if(r.fields)return r.fields;if(r.columns&&Array.isArray(r.columns))return r.columns.map(c=>typeof c=="string"?c:c.field)})(),$top:r.pagination?.pageSize||r.pageSize||50};r.filter&&Array.isArray(r.filter)?f.$filter=r.filter:"defaultFilters"in r&&r.defaultFilters&&(f.$filter=r.defaultFilters),r.sort?typeof r.sort=="string"?f.$orderby=r.sort:Array.isArray(r.sort)&&(f.$orderby=r.sort.map(c=>`${c.field} ${c.order}`).join(", ")):"defaultSort"in r&&r.defaultSort&&(f.$orderby=`${r.defaultSort.field} ${r.defaultSort.order}`);const n=await g.find(u,f);T(n.data||[])}catch(u){N(u)}finally{C(!1)}}},[r,g,b,l]);if(d.useEffect(()=>{(_||b)&&O()},[_,b,O]),I)return a.jsxs("div",{className:"p-4 border border-red-300 bg-red-50 rounded-md",children:[a.jsx("h3",{className:"text-red-800 font-semibold",children:"Error loading grid"}),a.jsx("p",{className:"text-red-600 text-sm mt-1",children:I.message})]});if(S&&j.length===0)return a.jsxs("div",{className:"p-8 text-center",children:[a.jsx("div",{className:"inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"}),a.jsx("p",{className:"mt-2 text-sm text-gray-600",children:"Loading grid..."})]});const M=G(),w="operations"in r?r.operations:void 0,z=w&&(w.update||w.delete),V=z?[...M,{header:"Actions",accessorKey:"_actions",cell:(u,E)=>a.jsxs(x.DropdownMenu,{children:[a.jsx(x.DropdownMenuTrigger,{asChild:!0,children:a.jsxs(x.Button,{variant:"ghost",size:"icon",className:"h-8 w-8",children:[a.jsx(W.MoreVertical,{className:"h-4 w-4"}),a.jsx("span",{className:"sr-only",children:"Open menu"})]})}),a.jsxs(x.DropdownMenuContent,{align:"end",children:[w?.update&&y&&a.jsxs(x.DropdownMenuItem,{onClick:()=>y(E),children:[a.jsx(W.Edit,{className:"mr-2 h-4 w-4"}),"Edit"]}),w?.delete&&R&&a.jsxs(x.DropdownMenuItem,{variant:"destructive",onClick:()=>R(E),children:[a.jsx(W.Trash2,{className:"mr-2 h-4 w-4"}),"Delete"]})]})]}),sortable:!1}]:M;let D=!1;r.selection?.type?D=r.selection.type==="none"?!1:r.selection.type:r.selectable!==void 0&&(D=r.selectable);const J=r.pagination!==void 0?!0:r.showPagination!==void 0?r.showPagination:!0,$=r.pagination?.pageSize||r.pageSize||10,q=r.searchableFields!==void 0?r.searchableFields.length>0:r.showSearch!==void 0?r.showSearch:!0,F={type:"data-table",caption:r.label||r.title,columns:V,data:j,pagination:J,pageSize:$,searchable:q,selectable:D,sortable:!0,exportable:w?.export,rowActions:z,resizableColumns:r.resizable??r.resizableColumns??!0,className:r.className,onSelectionChange:p};return a.jsx(se.SchemaRenderer,{schema:F})},te=({schema:r})=>a.jsx(re,{schema:r,dataSource:null});K.ComponentRegistry.register("object-grid",te),K.ComponentRegistry.register("grid",te),v.ObjectGrid=re,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));

package/dist/plugin-grid/src/ObjectGrid.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { ObjectGridSchema, DataSource } from '../../types/src';
+export interface ObjectGridProps {
+    schema: ObjectGridSchema;
+    dataSource?: DataSource;
+    className?: string;
+    onRowClick?: (record: any) => void;
+    onEdit?: (record: any) => void;
+    onDelete?: (record: any) => void;
+    onBulkDelete?: (records: any[]) => void;
+    onCellChange?: (rowIndex: number, columnKey: string, newValue: any) => void;
+    onRowSelect?: (selectedRows: any[]) => void;
+}
+export declare const ObjectGrid: React.FC<ObjectGridProps>;

package/dist/plugin-grid/src/index.d.ts

@@ -0,0 +1,3 @@
+import { ObjectGrid } from './ObjectGrid';
+export { ObjectGrid };
+export type { ObjectGridProps } from './ObjectGrid';

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@object-ui/plugin-grid",
+  "version": "0.3.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Grid plugin for Object UI",
+  "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"
+    }
+  },
+  "dependencies": {
+    "lucide-react": "^0.563.0",
+    "@object-ui/components": "0.3.0",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/fields": "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"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "lint": "eslint ."
+  }
+}

package/src/ObjectGrid.tsx

@@ -0,0 +1,377 @@
+/**
+ * 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.
+ */
+
+/**
+ * ObjectGrid Component
+ * 
+ * A specialized grid component built on top of data-table.
+ * Auto-generates columns from ObjectQL schema with type-aware rendering.
+ * Implements the grid view type from @objectstack/spec view.zod ListView schema.
+ * 
+ * Features:
+ * - Traditional table/grid with CRUD operations
+ * - Search, filters, pagination
+ * - Column resizing, sorting
+ * - Row selection
+ * - Inline editing support
+ */
+
+import React, { useEffect, useState, useCallback } from 'react';
+import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object-ui/types';
+import { SchemaRenderer } from '@object-ui/react';
+import { getCellRenderer } from '@object-ui/fields';
+import { Button } from '@object-ui/components';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@object-ui/components';
+import { Edit, Trash2, MoreVertical } from 'lucide-react';
+
+export interface ObjectGridProps {
+  schema: ObjectGridSchema;
+  dataSource?: DataSource;
+  className?: string;
+  onRowClick?: (record: any) => void;
+  onEdit?: (record: any) => void;
+  onDelete?: (record: any) => void;
+  onBulkDelete?: (records: any[]) => void;
+  onCellChange?: (rowIndex: number, columnKey: string, newValue: any) => void;
+  onRowSelect?: (selectedRows: any[]) => void;
+}
+
+/**
+ * Helper to get data configuration from schema
+ * Handles both new ViewData format and legacy inline data
+ */
+function getDataConfig(schema: ObjectGridSchema): ViewData | null {
+  // New format: explicit data configuration
+  if (schema.data) {
+    return schema.data;
+  }
+  
+  // Legacy format: staticData field
+  if (schema.staticData) {
+    return {
+      provider: 'value',
+      items: schema.staticData,
+    };
+  }
+  
+  // Default: use object provider with objectName
+  if (schema.objectName) {
+    return {
+      provider: 'object',
+      object: schema.objectName,
+    };
+  }
+  
+  return null;
+}
+
+/**
+ * Helper to normalize columns configuration
+ * Handles both string[] and ListColumn[] formats
+ */
+function normalizeColumns(
+  columns: string[] | ListColumn[] | undefined
+): ListColumn[] | string[] | undefined {
+  if (!columns || columns.length === 0) return undefined;
+  
+  // Already in ListColumn format - check for object type with optional chaining
+  if (typeof columns[0] === 'object' && columns[0] !== null) {
+    return columns as ListColumn[];
+  }
+  
+  // String array format
+  return columns as string[];
+}
+
+export const ObjectGrid: React.FC<ObjectGridProps> = ({
+  schema,
+  dataSource,
+  onEdit,
+  onDelete,
+  onRowSelect,
+}) => {
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [objectSchema, setObjectSchema] = useState<any>(null);
+
+  // Get data configuration (supports both new and legacy formats)
+  const dataConfig = getDataConfig(schema);
+  const hasInlineData = dataConfig?.provider === 'value';
+
+  useEffect(() => {
+    if (hasInlineData && dataConfig?.provider === 'value') {
+      setData(dataConfig.items as any[]);
+      setLoading(false);
+    }
+  }, [hasInlineData, dataConfig]);
+
+  useEffect(() => {
+    const fetchObjectSchema = async () => {
+      try {
+        if (!dataSource) {
+          throw new Error('DataSource required');
+        }
+        
+        // For object provider, get the object name
+        const objectName = dataConfig?.provider === 'object' 
+          ? dataConfig.object 
+          : schema.objectName;
+          
+        if (!objectName) {
+          throw new Error('Object name required for object provider');
+        }
+        
+        const schemaData = await dataSource.getObjectSchema(objectName);
+        setObjectSchema(schemaData);
+      } catch (err) {
+        setError(err as Error);
+      }
+    };
+
+    // Normalize columns (support both legacy 'fields' and new 'columns')
+    const cols = normalizeColumns(schema.columns) || schema.fields;
+    
+    if (hasInlineData && cols) {
+      setObjectSchema({ name: schema.objectName, fields: {} });
+    } else if (schema.objectName && !hasInlineData && dataSource) {
+      fetchObjectSchema();
+    }
+  }, [schema.objectName, schema.columns, schema.fields, dataSource, hasInlineData, dataConfig]);
+
+  const generateColumns = useCallback(() => {
+    // Use normalized columns (support both new and legacy)
+    const cols = normalizeColumns(schema.columns);
+    
+    if (cols) {
+      // If columns are already ListColumn objects, convert them to data-table format
+      if (cols.length > 0 && typeof cols[0] === 'object' && cols[0] !== null) {
+        return (cols as ListColumn[])
+          .filter((col) => col?.field && typeof col.field === 'string') // Filter out invalid column objects
+          .map((col) => ({
+            header: col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' '),
+            accessorKey: col.field,
+            ...(col.width && { width: col.width }),
+            ...(col.align && { align: col.align }),
+            sortable: col.sortable !== false,
+          }));
+      }
+      
+      // String array format - filter out invalid entries
+      return (cols as string[])
+        .filter((fieldName) => typeof fieldName === 'string' && fieldName.trim().length > 0)
+        .map((fieldName) => ({
+          header: fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
+          accessorKey: fieldName,
+        }));
+    }
+
+    // Legacy support: use 'fields' if columns not provided
+    if (hasInlineData) {
+      const inlineData = dataConfig?.provider === 'value' ? dataConfig.items as any[] : [];
+      if (inlineData.length > 0) {
+        const fieldsToShow = schema.fields || Object.keys(inlineData[0]);
+        return fieldsToShow.map((fieldName) => ({
+          header: fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
+          accessorKey: fieldName,
+        }));
+      }
+    }
+
+    if (!objectSchema) return [];
+
+    const generatedColumns: any[] = [];
+    const fieldsToShow = schema.fields || Object.keys(objectSchema.fields || {});
+    
+    fieldsToShow.forEach((fieldName) => {
+      const field = objectSchema.fields?.[fieldName];
+      if (!field) return;
+
+      if (field.permissions && field.permissions.read === false) return;
+
+      const CellRenderer = getCellRenderer(field.type);
+      generatedColumns.push({
+        header: field.label || fieldName,
+        accessorKey: fieldName,
+        cell: (value: any) => <CellRenderer value={value} field={field} />,
+        sortable: field.sortable !== false,
+      });
+    });
+
+    return generatedColumns;
+  }, [objectSchema, schema.fields, schema.columns, dataConfig, hasInlineData]);
+
+  const fetchData = useCallback(async () => {
+    if (hasInlineData || !dataSource) return;
+
+    setLoading(true);
+    try {
+      // Get object name from data config or schema
+      const objectName = dataConfig?.provider === 'object' 
+        ? dataConfig.object 
+        : schema.objectName;
+        
+      if (!objectName) {
+        throw new Error('Object name required for data fetching');
+      }
+      
+      // Helper to get select fields
+      const getSelectFields = () => {
+        if (schema.fields) return schema.fields;
+        if (schema.columns && Array.isArray(schema.columns)) {
+          return schema.columns.map(c => typeof c === 'string' ? c : c.field);
+        }
+        return undefined;
+      };
+      
+      const params: any = {
+        $select: getSelectFields(),
+        $top: schema.pagination?.pageSize || schema.pageSize || 50,
+      };
+
+      // Support new filter format
+      if (schema.filter && Array.isArray(schema.filter)) {
+        params.$filter = schema.filter;
+      } else if ('defaultFilters' in schema && schema.defaultFilters) {
+        // Legacy support
+        params.$filter = schema.defaultFilters;
+      }
+
+      // Support new sort format
+      if (schema.sort) {
+        if (typeof schema.sort === 'string') {
+          // Legacy string format
+          params.$orderby = schema.sort;
+        } else if (Array.isArray(schema.sort)) {
+          // New array format
+          params.$orderby = schema.sort
+            .map(s => `${s.field} ${s.order}`)
+            .join(', ');
+        }
+      } else if ('defaultSort' in schema && schema.defaultSort) {
+        // Legacy support
+        params.$orderby = `${schema.defaultSort.field} ${schema.defaultSort.order}`;
+      }
+
+      const result = await dataSource.find(objectName, params);
+      setData(result.data || []);
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  }, [schema, dataSource, hasInlineData, dataConfig]);
+
+  useEffect(() => {
+    if (objectSchema || hasInlineData) {
+      fetchData();
+    }
+  }, [objectSchema, hasInlineData, fetchData]);
+
+  if (error) {
+    return (
+      <div className="p-4 border border-red-300 bg-red-50 rounded-md">
+        <h3 className="text-red-800 font-semibold">Error loading grid</h3>
+        <p className="text-red-600 text-sm mt-1">{error.message}</p>
+      </div>
+    );
+  }
+
+  if (loading && data.length === 0) {
+    return (
+      <div className="p-8 text-center">
+        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+        <p className="mt-2 text-sm text-gray-600">Loading grid...</p>
+      </div>
+    );
+  }
+
+  const columns = generateColumns();
+  const operations = 'operations' in schema ? schema.operations : undefined;
+  const hasActions = operations && (operations.update || operations.delete);
+  
+  const columnsWithActions = hasActions ? [
+    ...columns,
+    {
+      header: 'Actions',
+      accessorKey: '_actions',
+      cell: (_value: any, row: any) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <MoreVertical className="h-4 w-4" />
+              <span className="sr-only">Open menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {operations?.update && onEdit && (
+              <DropdownMenuItem onClick={() => onEdit(row)}>
+                <Edit className="mr-2 h-4 w-4" />
+                Edit
+              </DropdownMenuItem>
+            )}
+            {operations?.delete && onDelete && (
+              <DropdownMenuItem variant="destructive" onClick={() => onDelete(row)}>
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+      sortable: false,
+    },
+  ] : columns;
+
+  // Determine selection mode (support both new and legacy formats)
+  let selectionMode: 'none' | 'single' | 'multiple' | boolean = false;
+  if (schema.selection?.type) {
+    selectionMode = schema.selection.type === 'none' ? false : schema.selection.type;
+  } else if (schema.selectable !== undefined) {
+    // Legacy support
+    selectionMode = schema.selectable;
+  }
+
+  // Determine pagination settings (support both new and legacy formats)
+  const paginationEnabled = schema.pagination !== undefined 
+    ? true 
+    : (schema.showPagination !== undefined ? schema.showPagination : true);
+  
+  const pageSize = schema.pagination?.pageSize 
+    || schema.pageSize 
+    || 10;
+
+  // Determine search settings
+  const searchEnabled = schema.searchableFields !== undefined
+    ? schema.searchableFields.length > 0
+    : (schema.showSearch !== undefined ? schema.showSearch : true);
+
+  const dataTableSchema: any = {
+    type: 'data-table',
+    caption: schema.label || schema.title,
+    columns: columnsWithActions,
+    data,
+    pagination: paginationEnabled,
+    pageSize: pageSize,
+    searchable: searchEnabled,
+    selectable: selectionMode,
+    sortable: true,
+    exportable: operations?.export,
+    rowActions: hasActions,
+    resizableColumns: schema.resizable ?? schema.resizableColumns ?? true,
+    className: schema.className,
+    onSelectionChange: onRowSelect,
+  };
+
+  return <SchemaRenderer schema={dataTableSchema} />;
+};

package/src/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * 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 from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { ObjectGrid } from './ObjectGrid';
+
+export { ObjectGrid };
+export type { ObjectGridProps } from './ObjectGrid';
+
+// Register object-grid component
+const ObjectGridRenderer: React.FC<{ schema: any }> = ({ schema }) => {
+  return <ObjectGrid schema={schema} dataSource={null as any} />;
+};
+
+ComponentRegistry.register('object-grid', ObjectGridRenderer);
+ComponentRegistry.register('grid', ObjectGridRenderer); // Alias

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginGrid',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        '@object-ui/components',
+        '@object-ui/core',
+        '@object-ui/fields',
+        '@object-ui/react',
+        '@object-ui/types',
+        'lucide-react'
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});