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 |