import TableEditor from 'prg-editor/src/components/TableEditor.jsx'

public class | source

TableEditor

Extends:

Component → TableEditor

Main datagrid component Accepts theese props:

Props

prop	type	description
`params`	`Object`	Initial data for query
`colsConfig`	`Object[]` - required	output from {TableBuilder} to show in table
`resource`	`string	AjaxResource` - required	url of resource or {AjaxResource}
`t`	`function`	translator function (`word => word`)
`loadingErrorMessage`	`string`	string to show when loading fails
`deleteErrorMessage`	`string`	string to show in delete confirmation alert
`limit`	`number`	required number of entries
`disableAdd`	`boolean`	which determins to show an add button
`onParamsChange`	`function`	switches component to controlled state
`noPagination`	`boolean`	disables pagination

Controlled TableEditor - managing state from the outside

For controlling component state you can provide onParamsChange prop and manually set the params property. So you can delegate controlling state to the React Router.

Example:

<TableEditor
    colsConfig={tableBuilder.getColsConfig()}
    resource="/api/models/:id?someQuery=1"
>
    <Editor
        validator={validator}
        context={{
            create: validator.CONTEXT_CREATE,
            update: validator.CONTEXT_UPDATE
        }}
    >
        <Input name="text" />
    </Editor>
</TableEditor>

// or with filter form at the header
<TableEditor
    colsConfig={tableBuilder.getColsConfig()}
    resource="/api/models/:id?someQuery=1"
>
    <header>
        <Input
            name="search"
            placeholder="Search"
            controlClass="is-expanded"
            iconBefore={<i className="fa fa-search" aria-hidden="true" />}
        />
    </header>
    <Editor
        validator={validator}
    >
        <Input name="text" />
    </Editor>
</TableEditor>

Method Summary

Public Methods
public	delete(idOrData: string \| Object) Open delete confirmation dialog
public	edit(idOrData: string \| Object) Open editor with given item

Public Methods

public delete(idOrData: string | Object) source

Open delete confirmation dialog

Params:

Name	Type	Attribute	Description
idOrData	string \| Object		identifier or object

public edit(idOrData: string | Object) source

Open editor with given item

Params:

Name	Type	Attribute	Description
idOrData	string \| Object		identifier or object