sainw 446bb8c443 Merge branch 'master' of phyothandar/mokkon-reactjs into master | 3 jaren geleden | |
---|---|---|
dist | 3 jaren geleden | |
example | 3 jaren geleden | |
src | 3 jaren geleden | |
.editorconfig | 3 jaren geleden | |
.eslintignore | 3 jaren geleden | |
.eslintrc | 3 jaren geleden | |
.gitignore | 3 jaren geleden | |
.prettierrc | 3 jaren geleden | |
.travis.yml | 3 jaren geleden | |
README.md | 3 jaren geleden | |
package-lock.json | 3 jaren geleden | |
package.json | 3 jaren geleden |
Mokkon's reactjs components
Props
Name | Type | Default | Description |
---|---|---|---|
fields | Array of field object | Form fields | |
data | object | Form data | |
actions | Array of action object |
Field object
Name | Type | Default | Description |
---|---|---|---|
field_name | string | Field name | |
label | string | Field label | |
type | string | Field type | |
options | Array of selection object | Data objects for dropdown or autocomplete | |
can_create | boolean | To handle adding new object from dropdown or autocomplete | |
readonly | boolean | To handle for not editable form | |
option_label_field | string | Field name to get label of option in dropdown |
Field Types
Example of field object
[
{
"type":"string",
"label":"string",
"field_name":"string",
"options":[],
"can_create":boolean,
"readonly":boolean,
"option_label_field":"string",
}
]
Action object
Name | Type | Default | Description |
---|---|---|---|
label | string | Action label | |
icon | icon | Action icon | |
callback | function | Action ( edit, delete, etc..) | |
status | string | Form data status |
Example of action object
{
"label": "string",
"icon": icon,
"callback": () => {}
}
Data
Example of data object
{
"field_name":"value",
"field_name":"value",
}
#
Props
Name | Type | Default | Description |
---|---|---|---|
headers | Array of header object | Table headers | |
data | object | Form data | |
onActions | Array of action callback | Return function with data or event | |
actions | Array of action object | ||
title | string | Item title (item, category,etc..) | |
order | string | asc | Order (asc, desc) |
orderBy | string | name | Order by |
rowsPerPage | number | Number of rows in page | |
noMoreToLoad | boolean | To handle end of data | |
isLoading | boolean | To Handle progressing | |
onChangePaginatePage | function | To Change page number | |
onGetData | function | To Get data list | |
onChangeRowPerPage | function | To change number of rows in page | |
dense | boolean | true | To handle table size |
Example of action object
{
"label": "string",
"icon": icon element,
"callback": () => {}
}
Header object
| Name | Type | Default | Description
| ------------- |-------------| -----:| --------: |
| id | string | | Field name of data object
| numeric | boolean | | To handle numeric or not |
| disablePadding | boolean | |Table cell padding
| label | string | | Label of Header |
| width | Array of action object | | Tablecell width
Example of header object
[
{
'id': 'sr',
'numeric': true,
'disablePadding': false,
'label': 'No.'
},
{
'id': 'name',
'numeric': false,
'disablePadding': false,
'label': 'Name',
'width': '200px'
},
]