antd-crud v1.0.1 is released, a React add, delete, modify and check high-level component

Antd-Crud

A CRUD component based on React + Ant.Design.

feature

• 1. Extremely lightweight, only relying on Ant.Design and no other dependencies.
• 2. Support basic [Add, Delete, Modify, Check] and [Batch Delete] functions
• 3. Supports functions such as search, custom paging, and custom sorting
• 4. Supports functions such as refreshing, exporting to Excel, data printing, row height setting, etc.
• 5. More DIY configurations

Completed function

•  Basic addition, deletion, modification and search
•  Page loading
•  search panel
•  Search panel automatically shrinks
•  batch deletion
•  Data refresh
•  EXCEL export
•  Row height settings
•  Print function
•  You can choose Modal or Drawer to edit or view the page.
•  Edit pages and view page grouping settings
•  Edit page custom layout

v1.0.1 version update

• New: Added group display function when editing, adding and viewing forms
• New: Drawer method for editing, adding and rendering functions
• Optimization: Add mouse style display for prohibited operations on the data viewing page
• Optimization: Modify formItemDisabled to formReadOnly
• Optimization: Modify onFormItemValueInit to onSearchValueInit;
• Optimization: Optimize some styles displayed in the demo

start using

npm i @codeflex/antd-crud

 

function App() {

    const columns: ColumnsConfig<Account> = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            placeholder:"请输入姓名",
            supportSearch:true,
            render: (text) => <a>{text}</a>,
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            supportSearch:true,
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
            supportSearch:true,
        },
        {
            title: '标签',
            key: 'tags',
            dataIndex: 'tags',
            supportSearch:true,
            render: (_, { tags }) => (
                <>
                    {tags.map((tag) => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === 'loser') {
                            color = 'volcano';
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </>
            ),
        }
    ];


    const data: Account[] = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer'],
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            tags: ['loser'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
    ];

    const actions:Actions<Account> = {
        onCreate:(account)=>{
            console.log("onCreate", account);
        }
    };


    return (
        <div style={{width:"960px"}}>
            <AntdCrud columns={columns}
                      dataSource={data}
                      actions={actions}
                      pageNumber={1}
                      pageSize={10}
                      totalRow={2342}/>
        </div>
    )
}

 

ColumnConfig Type description:

ColumnConfig All configurations of Column of Table inherited from Antd, refer to: https://ant-design.antgroup.com/components/table-cn#column

On this basis, I added my own configuration:

• placeholder : placeholder content for the search box and edit page
• supportSearch : Whether to support search element
• colSpan : occupancy length, default value is 20
• colOffset : offset default value is 2
• groupKey : group key
• form : edit the form settings of the form, type is FormConfig

ColumnGroup Type description:

Used to display form content in groups on the new, edit and view pages.

export type ColumnGroup = {
    key: string,
    title: string,
}

FormConfig Type description:

type  FormConfig  =  { 
// Form type, default is Input, // Supports: Input, InputNumber, Hidden, Radio, Checkbox, Rate, // Switch, DatePicker, Select, Slider, Upload type : string , // Custom properties, Supports all attribute configurations of antd control attrs ?: any ,    
    
    
    
     
    
    
     

    //Verification rules, only effective on the edit page 
rules ?: any [], }     

Actions Type description:

Actions Is used to define the listening method of the AntdCrud component

Actions The defined types are as follows:

type  Actions < T >  =  { 
//Get the data list onFetchList ?: ( currentPage : number , pageSize : number , totalPage : number , searchParams : any , sortKey : string , sortType : " asc " | " desc " ) => void ,    
      
          
          
          
          
              

    //Get data details 
onFetchDetail ?: ( row : T ) => T ,        

    //Delete a single piece of data 
onDelete ?: ( row : T ) => void ,        

    //Delete data in batches 
onDeleteBatch ?: ( rows : T []) => void ,        

    //Data update 
onUpdate ?: ( row : T ) => void ,        

    //Data creation 
onCreate ?: ( row : T ) => void ,        

    //Initialize the value of the search box 
onSearchValueInit ?:( key : string ) => any }      

Users are required to define the above methods for operating or querying data. Actions 

Run the demo

git clone https://gitee.com/antdadmin/antd-crud.git
cd antd-crud

npm install
npm run dev

Introduction to AntdAdmin

AntdAdmin is a front-end open source framework dedicated to China's information and innovation industry. Its underlying technology stack is mainly based on React + Ant.design. The main open source (or planned open source) products of AntdAdmin are as follows:  

• antd-admin : A middle (back) UI framework based on React + Ant.Design (preparing...).
• antd-crud : An advanced component for adding, deleting, modifying and checking based on React + Ant.Design (open source: https://gitee.com/antdadmin/antd-crud  ).
• antd-bpmn : A workflow design component based on React + Ant.Design (open source: https://gitee.com/antdadmin/antd-bpmn  ).
• antd-builder : A form drag-and-drop design component based on React + Ant.Design (in preparation...).