material-crud-component v0.2.0

Material Crud Component

Material Crud Component is a simple package that allows you to scaffold CRUD pages data in minutes.

Installation

yarn install material-crud-component
#OR
npm install --save material-crud-component

Usage

import Crud from 'material-crud-component';

Example

...    
        const data = [{ cost: 1000, gluten: 'NO'} ...];
...
        return ( 
           <Crud
                title="Nutrition"
                columns={[
                    {
                        key: 'cost',
                        label: 'Cost',
                        name: 'cost',
                        align: 'right',
                        format: (val: any) => numeral(val).format('$0,0[.]0')
                    }
                ]}
                data={data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)}
                idExtractor={(val: any) => val.id}
                pagination={{
                    totalElements: data.length,
                    page,
                    rowsPerPage,
                    rowsPerPageOptions: [10, 25, 50],
                    onPageChange: (p: number) => {
                        setPage(p)
                    },
                    onRowsPerPageChange: (s: number) => {
                        setRowsPerPage(s);
                    }
                }}
                onDelete={(item: any) => {
                    const d = data.filter(i => item.id !== i.id);
                    setData(d);
                }}
                addItem={{
                    form: {
                        required: ['cost', 'gluten'],
                        properties: {
                            cost: {type: 'number', title: 'Cost'},
                            gluten: {type: 'string', title: 'Gluten Free', enum: ['Yes', 'No']},
                        }
                    },
                    onSubmit: (item: any) => {
                        setData([...data, {...item, id: Date.now().toString()}])
                    }
                }}
                editItem={{
                    form: {
                        required: ['cost', 'gluten'], 
                        properties: {
                            cost: {type: 'number', title: 'Cost'},
                            gluten: {type: 'string', title: 'Gluten Free', enum: ['Yes', 'No']},
                        }
                    },
                    onSubmit: (item: any) => {
                        const i = data.findIndex(i => item.id === i.id);
                        data[i] = item;
                        setData([...data]);
                    }
                }}
            />);

A detailed example can be found in the examples directory

Properties

TODO

complete documentation