@zango-core/crud

Unified React CRUD components library for tables, forms and workflows — one of the Zango frontend packages.

@zango-core/crud is a composable, headless-first React library and one of the frontend packages in the Zango ecosystem. It renders CRUD interfaces directly from the metadata a Zango backend serves. It pairs an advanced data table (built on TanStack Table) with a dynamic form engine (built on react-jsonschema-form) and a workflow/status-transition system — all driven by a shared, context-based state layer so default and custom components stay in sync without prop drilling.

Features

• Drop-in or composable — render a full table with one <CrudHandler api_endpoint="…" />, or compose your own UI from the headless hooks.
• Headless core — useCrud and useForm expose state and actions with no UI attached, so you can build a completely custom layout on the same engine.
• Dynamic forms — server-driven or local RJSF schemas via FormRenderer, plus a themed FormHandler with render slots, custom footer buttons, and --form-* CSS-variable theming.
• Workflows — status badges, tags, and form-based transitions out of the box.
• Granular subpath exports — import only what you need (/core, /ui, /form, /table).

Installation

npm install @zango-core/crud
# or: bun add @zango-core/crud

Peer dependencies

Install these alongside the library:

| Package | Version | | --- | --- | | react | ^17.0.0 \|\| ^18.0.0 | | react-dom | ^17.0.0 \|\| ^18.0.0 | | react-router-dom | 7.7.0 | | @zango-core/components | ^0.2.0-rc.3 |

Quick start

import { CrudHandler } from "@zango-core/crud/table";

export function Users() {
  // api_endpoint is the URL of a Zango CRUD view.
  return <CrudHandler api_endpoint="/api/users/" />;
}

api_endpoint points at a Zango CRUD view — the backend serves the table data and the metadata that drives it. That single component then renders a complete table — header, search, filters, pagination, and a detail drawer.

Entry points

The library ships multiple entry points so consumers only pull in what they use:

| Import | Contents | | --- | --- | | @zango-core/crud | Everything (convenience root barrel). | | @zango-core/crud/core | Headless logic only — useCrud, CrudProvider, types. No UI. | | @zango-core/crud/ui | Presentational Crud* components and cells. | | @zango-core/crud/form | FormRenderer, FormHandler, useForm, theming utilities. | | @zango-core/crud/table | Table engine — CrudHandler, Table, TableProvider, all useTable* hooks. |

Documentation

Full guides live in docs/guide/:

• CrudHandler — the primary table component and its props.
• Forms — FormRenderer + the headless FormHandler / useForm layer and theming.
• Building Custom CRUD Views with Hooks — provider hierarchy and the full hook reference.
• Workflow Components — status, tags, and transitions.
• Table Styling Customization — class and style-function system.
• Render Props Customization — customizing Actions / Status / Tags columns.
• Custom Components API Reference — drop-in component reference.

Development

git clone https://github.com/Healthlane-Technologies/pkg-zango-crud.git
cd pkg-zango-crud/crud/frontend
npm install

Common scripts:

| Script | Description | | --- | --- | | npm run dev | Start the development server (port 1234). | | npm run dev:mock | Dev server with MSW mocks enabled. | | npm run build | Build the library (all entry points). | | npm test | Run the unit test suite (Vitest). | | npm run test:e2e | Run the Playwright end-to-end suite. | | npm run lint | Lint and format diagnostics (Biome). |

Contributing

Issues and pull requests are welcome. See CONTRIBUTING.md for setup, the project layout, and the development workflow. In short: run npm run lint and npm test before opening a PR, and follow Conventional Commits for commit messages.

To report a security vulnerability, please follow SECURITY.md rather than filing a public issue.

License

This project uses a multi-license arrangement, matching the wider Zango project: documentation (docs/) is licensed under CC BY-SA 4.0, client-side JavaScript under the MIT Expat license, and all other content under the Apache License 2.0. See LICENSE for the full text.

Copyright © Healthlane Technologies Pvt. Ltd. ("Zango").