​
CRUD UI Command

The crud-ui command generates React components for CRUD (Create, Read, Update, Delete) operations in your zopio project. This command creates reusable UI components that connect to your backend API.

​
Usage

zopio crud-ui [options]

​
Options

OptionDescription
-m, --model <name>Model name
-f, --fields <fields>Fields in format “name:type:label,age:number:Age”
-o, --output <directory>Output directory for UI components
-t, --theme <theme>UI theme (bootstrap, material) (default: “bootstrap”)
-h, --helpDisplay help for command

​
Examples

​
Generate UI components for a User model

zopio crud-ui --model User --fields "name:string:Full Name,email:string:Email Address,age:number:Age,isActive:boolean:Active Status"

​
Generate UI components with Material UI theme

zopio crud-ui --model Product --fields "name:string:Product Name,price:number:Price,description:string:Description,inStock:boolean:In Stock" --theme material

​
Generated Components

When you run the crud-ui command, the following React components will be generated:
  1. List Component: Displays a table of all records with sorting and pagination
  2. Form Component: Provides a form for creating and editing records
  3. Detail Component: Shows detailed information for a single record
  4. Service: Contains API calls for CRUD operations

​
Example Component Structure

components/
└── user/
    ├── UserList.jsx
    ├── UserForm.jsx
    ├── UserDetail.jsx
    └── user.service.js

​
Example Usage in React Router

import { UserList } from './components/user/UserList';
import { UserForm } from './components/user/UserForm';
import { UserDetail } from './components/user/UserDetail';

<Route path="/user" element={<UserList />} />
<Route path="/user/create" element={<UserForm />} />
<Route path="/user/edit/:id" element={<UserForm />} />
<Route path="/user/:id" element={<UserDetail />} />
  • crud - Generate basic CRUD operations
  • crud-unified - Generate a complete CRUD setup
  • data-provider - Generate data providers for your zopio project