# prg-editor

> Data Table and Editor for use with Prg-Form

Latest version **0.6.0** (published 2018-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install prg-editor
pnpm add prg-editor
yarn add prg-editor
bun add prg-editor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2018-11-13 |
| First published | 2017-02-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 111.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Pragonauts |
| Maintainers | davidmenger, pragonauts |
| Keywords | React, Datagrid, Table, Datagrid, Bulma |

## Links

- npm: https://www.npmjs.com/package/prg-editor
- Repository: https://github.com/pragonauts/prg-editor
- Homepage: https://github.com/pragonauts/prg-editor#readme
- Issues: https://github.com/pragonauts/prg-editor/issues
- npm.io page: https://npm.io/package/prg-editor

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.6.0 (latest) — 2018-11-13
- 0.5.1 — 2018-02-12
- 0.5.0 — 2017-12-21
- 0.4.4 — 2017-12-18
- 0.4.3 — 2017-09-07
- 0.4.2 — 2017-09-07
- 0.4.1 — 2017-05-16
- 0.4.0 — 2017-05-16
- 0.4.0-alpha.1 — 2017-04-13
- 0.3.1 — 2017-04-05
- 0.3.0 — 2017-04-05
- 0.2.2 — 2017-04-05
- 0.2.1 — 2017-03-29
- 0.2.0 — 2017-02-14
- 0.2.0-alpha.2 — 2017-02-13
- … 1 more at https://npm.io/package/prg-editor/versions

## 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 (<TableEditor
            colsConfig={colsConfig}
            resource={resource}
            ref={(c) => { this.tableEditor = c; }}
            t={this.props.t}
        >
            <Editor
                validator={validator}
            >
                <Input name="text" />
            </Editor>
        </TableEditor>);
    }


}

EditorView.propTypes = {
    t: PropTypes.func
};

EditorView.defaultProps = {
    t: w => w
};

export default EditorView;

```

---
_Source: https://npm.io/package/prg-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._