@apps-megafy/backoffice-controller

Headless React controller for Megafy back-office data-table screens — the kind almost every project has. Renders a themed, full-screen DataTable (from @apps-megafy/ui) as a Mendix pluggable widget, replacing native data grids.

Install

npm install @apps-megafy/backoffice-controller @apps-megafy/ui react react-dom

import "@apps-megafy/ui/styles.css";

Usage — client-side (small lists)

import { BackofficeController } from "@apps-megafy/backoffice-controller";
import type { ColumnDef } from "@apps-megafy/ui";

const columns: ColumnDef<Shipment, unknown>[] = [/* … cell renderers, StatusBadge … */];

<BackofficeController
  title="Seguimiento de envíos"
  columns={columns}
  data={rows}
  rowActions={[{ id: "notify", label: "Enviar aviso", onSelect: (r) => …}]}
  currentUser={currentUser}
  requiredPermission="shipments.view"
/>

Usage — server-side (large / Mendix-driven)

Two adapters drive the table in manual mode; spread their tableProps:

// A) Java-Action fetch (Core XPath/OQL paged query)
const { tableProps } = useJavaActionData(async (req) => {
  const res = await fetchPageJavaAction(req);   // { rows, total }
  return res;
});

// B) Native Mendix list datasource (ListValue)
const { tableProps } = useMendixDatasource(props.datasource, { mapRow });

<BackofficeController columns={columns} {...tableProps} currentUser={user} />

API

• BackofficeController<TData> — extends DataTable props + currentUser, requiredPermission (UX gate — real authz stays in Mendix), noAccessState, pageClassName.
• useJavaActionData(fetchPage, opts) — server-side data from a (req) => Promise<{ rows, total }> fetch (wire to a Java Action).
• useMendixDatasource(listValue, { mapRow }) — server-side data from a native Mendix ListValue (setLimit/setOffset/requestTotalCount).

See docs/mendix-styling.md for the full Mendix wiring (blank layout, per-clinic theming, data paths, row-action → Java Action).