Antd-Crud v1.0.0 is released, an advanced component for adding, deleting, modifying and checking based on Antd

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

start using

Install:

npm i @codeflex/antd-crud

 

Code:

 

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
• form : Edit the form settings of the form, type is FormConfig

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 , //Validation rules, only works 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 onFormItemValueInit ?: ( 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/example

npm install
npm run dev

 

Introduction to AntdAdmin

AntdAdmin is an open source technology community based on React + Ant.Design. Its open source (or planned open source) advanced components include:

• antd-crud: An advanced component for adding, deleting, modifying and checking based on React + Ant.Design (open source).
• antd-bpmn: A workflow design component based on React + Ant.Design (in preparation...).
• antd-builder: A drag-and-drop design component based on React + Ant.Design (in preparation...).