https://github.com/pragonauts/prg-editor

React Table Editor for REST API and Bulma.css
https://github.com/pragonauts/prg-editor

bulma bulma-css datagrid pragonauts react reactjs

Last synced: about 1 month ago
JSON representation

React Table Editor for REST API and Bulma.css

• Host: GitHub
• URL: https://github.com/pragonauts/prg-editor
• Owner: pragonauts
• Created: 2017-02-09T17:22:40.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-02-12T09:38:35.000Z (almost 7 years ago)
• Last Synced: 2024-10-01T01:42:00.760Z (about 1 month ago)
• Topics: bulma, bulma-css, datagrid, pragonauts, react, reactjs
• Language: JavaScript
• Size: 1.58 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Prg Editor

> React Table Editor for REST API and Bulma.css.

There is [API Documentation](http://pragonauts.github.io/prg-editor).

## Basic Usage

```javascript

import React, { PropTypes, Component } from 'react';

import { Input, Checkbox } from 'prg-form';

import { TableBuilder, TableEditor, Editor, AjaxResource } from 'prg-editor';

class EditorView extends Component {

    constructor (props) {

        super(props);

        this.validator = new Validator();

        this.validator.add('text')

            .isRequired();

        /**

         * @type {TableEditor}

         */

        this.tableEditor = null;

        const tb = new TableBuilder();

        const { t } = props;

        tb.addText('text', 'Title')

            .orderBy()

            .orderByDefault();

        tb.addAction('id', t('Remove'))

            .onClick((e, data) => this.tableEditor.delete(data))

            .condition((id, data) => data.isAdministrable);

        const resource = new AjaxResource('/api/users/:id');

        resource.mapInput = (...args) => this.mapInput(...args);

        this.state = {

            colsConfig: tb.getColsConfig(),

            resource

        };

    }

    mapInput (data) {

        return Object.assign(data, {

            groups: data.groups

                .filter(group => group.group)

        });

    }

    render () {

        const { t } = this.props;

        const { colsConfig, resource } = this.state;

        return ( { this.tableEditor = c; }}

            t={this.props.t}

        >

            

                

            

        );

    }

}

EditorView.propTypes = {

    t: PropTypes.func

};

EditorView.defaultProps = {

    t: w => w

};

export default EditorView;

```