huajianmao / crud

Get started | API | Examples | Demo | FAQs

Features

• Table Render

Install

npm install @huajianmao/crud

NOTE: As crud package is hosted on Github privately, you need to add github registry in your .npmrc, and request for an authToken from the authors.

@huajianmao:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=REQUEST_THE_TOKEN_BY_CONTACTING_THE_AUTHORS

Install other dependencies

npm install antd lodash

Quickstart

import { Button, Form, FormInstance, Input } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { Crud } from '@huajianmao/crud';

// You need to load antd's css before using crud
import 'antd/dist/antd.css';

function App() {
  const [form, setForm] = useState<FormInstance<Dict>>();

  const columns: ColumnsType<Dict> = [{title: '字典名称', dataIndex: 'name', key: 'name'}, /*{...}*/]
  const actions = (item?: Dict) => [<Button>查看</Button>, <Button>其他</Button>]

  const modal = {
    width: '50vw',
    setForm,
    body: (init?: Store) => <> <Form.Item name="name" label="字典名称"><Input /></Form.Item> </>
  };

  const apis: CrudApi<Dict> = {}; /*SOME CRUD APIs*/

  return <Crud title="字典" table={{ columns, actions }} modal={modal} api={apis} />;
}

Contributors

Thanks go to these wonderful people! [Become a contributor].

Helpers

Thank you for helping and answering questions from the community.