Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
@arthurkushman
arthurkushman committed Apr 29, 2018
2 parents 88e6ded + 930a304 commit e52a422
Show file tree
Hide file tree
Showing 8 changed files with 101 additions and 76 deletions.
21 changes: 3 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,25 +64,10 @@ import { Reactables, Header } from 'gigatables-react'
```

see how to create table with JSX bellow.
## Few screen-shots
## Demo
![Demo](https://github.com/GigaTables/reactables/blob/develop/screens/GT.gif)

### Multiple select with Ctrl and Shift
![alt tag](https://raw.githubusercontent.com/GigaTables/reactables/master/screens/GigaTables_basic_view.png)

### CRUD pop-ups
![alt tag](https://raw.githubusercontent.com/GigaTables/reactables/master/screens/GigaTables_edit_item.png)

### Pagination + sorting
![alt tag](https://raw.githubusercontent.com/GigaTables/reactables/master/screens/GigaTables_pagination_with_sort.png)

### Delete items
![alt tag](https://raw.githubusercontent.com/GigaTables/reactables/master/screens/GigaTables_delete_items.png)

### One-click cell edit
![alt tag](https://raw.githubusercontent.com/GigaTables/reactables/master/screens/GigaTables_cell_edit.png)

### Form styling (css+fieldset/legend)
![alt tag](https://raw.githubusercontent.com/GigaTables/reactables/master/screens/GigaTables_form_styling.png)
[More screen-shots](https://github.com/GigaTables/reactables/wiki)

## Installation based on browser script implementation (which U can download from build/ dir)
```HTML
Expand Down
6 changes: 3 additions & 3 deletions build/index.js
View file

Large diffs are not rendered by default.

119 changes: 67 additions & 52 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,88 +11,103 @@ let editor = {
// create: {
// url: 'http://gigatables.loc/editor.php',
// type: 'POST',
// headers: {
// 'X-Api-Key': '8013b37216a07f50027139d89ee9f822e3784049'
// }
// },
// edit: {
// url: 'http://gigatables.loc/editor.php',
// type: 'PUT',
// headers: {
// 'X-Api-Key': '8013b37216a07f50027139d89ee9f822e3784049',
// 'X-Header-Key': 'foo-bar'
// }
// },
// delete: {
// url: 'http://gigatables.loc/editor.php',
// type: 'DELETE',
// },
// headers: {
// 'X-Api-Key': '8013b37216a07f50027139d89ee9f822e3784049',
// 'X-Header-Key': 'foo-bar-baz'
// }
// }
// },
ajaxFiles: 'http://gigatables.loc/uploadFiles.php',
struct: {
buttons: ['top', 'bottom'] // buttons
buttons: [ 'top', 'bottom' ] // buttons
},
fields: [
{
label: "ID",
name: "id",
label: 'ID',
name: 'id',
type: 'hidden'
},
{// an example of using select - automatically selected if matches with data in table column
label: "Types:",
name: "types[]",
label: 'Types:',
name: 'types[]',
values: [// if select,checkbox,radio etc types - need this pre-set structure of values
{'key1': 'val1'},
{'key2': 'val2'}
{ 'key1': 'val1' },
{ 'key2': 'val2' }
],
type: 'checkbox', // select,checkbox,radio
type: 'checkbox' // select,checkbox,radio
// attrs: [
// {'multiple':true}
// ]
},
{
label: "Article title:",
name: "title",
label: 'Article title:',
name: 'title',
type: 'text', // default, other: password, file, select, multiselect etc
fieldsetOpen: true,
legend: 'Required fields',
attrs: [
{'pattern': '^[A-Za-z0-9_]+$'},
{'className': 'titleField'}
{ 'pattern': '^[A-Za-z0-9_]+$' },
{ 'className': 'titleField' }
]
},
{
label: "Description:",
name: "desc",
label: 'Description:',
name: 'desc',
type: 'textarea',
plugins: 'rte',
attrs: [
{'className': 'descriptionField'}
{ 'className': 'descriptionField' }
],
fieldsetClose: true,
fieldsetClose: true
},
{
label: "Date Time:",
name: "date",
label: 'Date Time:',
name: 'date',
type: 'date'
},
{
label: "Image:",
name: "image",
label: 'Image:',
name: 'image',
type: 'file'
},
}
]
};
}

let settings = {
struct: {
search: ['top', 'bottom'],
rowsSelector: ['desc', 'top', 'bottom'],
pagination: ['bottom'],
search: [ 'top', 'bottom' ],
rowsSelector: [ 'desc', 'top', 'bottom' ],
pagination: [ 'bottom' ],
fixedHeader: false, // default false
editableCells: true, // default false
aggregateFooter: true, // default false
download: {
csv: false,
csv: false
},
width: '950px',
width: '950px'
},
lang: 'en', // english default
perPageRows: [25, 50, 100, 200],
defaultPerPage: 100,
perPageRows: [ 25, 50, 100, 200 ],
defaultPerPage: 50,
headers: {
'X-Api-Key': '8013b37216a07f50027139d89ee9f822e3784049',
'X-Header-Key': 'foo-bar'
},
ajax: 'http://gigatables.loc/gigatables.php',
// ajax: new Promise((resolve) => {
// resolve('http://gigatables.loc/gigatables.php')
Expand All @@ -102,42 +117,42 @@ let settings = {
requestType: 'GET',
columns: [
{// include all defaults
data: "id",
data: 'id',
sortable: true, // true by defualt
visible: true, // true by defualt
searchable: true, // true by defualt
discreteSearch: true, // false by default
discreteSearchValue: function (title) {
return 'Search by field - ' + title;
return 'Search by field - ' + title
}
},
{
data: "title",
data: 'title',
cISearch: true, // default false
footer: 'frequency',
footer: 'frequency'
},
{
data: "desc",
data: 'desc',
sortable: false,
discreteSearch: true,
discreteCISearch: true // default false
},
{
data: "date",
data: 'date',
searchable: false
},
{
data: "info",
data: 'info'
},
{
data: "field1",
plugins: "progressbar",
data: 'field1',
plugins: 'progressbar'
},
{
data: "field2",
footer: "avg",
data: 'field2',
footer: 'avg'
},
{data: "field3", visible: false}
{ data: 'field3', visible: false }
],
columnOpts: [
{
Expand Down Expand Up @@ -168,27 +183,27 @@ let settings = {
// editor: editor,
// },
{
extended: "editor_create", editor: editor, triggerAfter: (function () {
console.log('after create');
extended: 'editor_create', editor: editor, triggerAfter: (function () {
console.log('after create')
}), triggerBefore: (function () {
console.log('before create');
console.log('before create')
})
},
{
extended: "editor_edit", editor: editor, triggerBefore: (function () {
console.log('before edit');
extended: 'editor_edit', editor: editor, triggerBefore: (function () {
console.log('before edit')
})
},
{
extended: "editor_remove", editor: editor, triggerAfter: (function () {
console.log('after del');
extended: 'editor_remove', editor: editor, triggerAfter: (function () {
console.log('after del')
})
}
],
buttonsPosition: ['top', 'bottom'],
buttonsPosition: [ 'top', 'bottom' ],
theme: 'std'
}
};
}

ReactDOM.render(
<Reactables editor={editor} settings={settings}>
Expand All @@ -202,4 +217,4 @@ ReactDOM.render(
<Header data="field3">Field3 invisible</Header>
<Header>Field3 invisible</Header>
</Reactables>,
document.getElementById('app'));
document.getElementById('app'))
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gigatables-react",
"version": "2.4.1",
"version": "2.4.2",
"description": "GigaTables is a ReactJS plug-in to help web-developers process table-data in applications and CMS, CRM, ERP or similar systems. It supports ajax data processing/editing (CRUD), pagination, cross-sorting, global search, shft/ctrl rows selection, 7 popular languages and more.",
"main": "./build/index.js",
"dependencies": {
Expand Down
Binary file added screens/GT.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 12 additions & 1 deletion src/Reactables.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ class Reactables extends Main {
},
ajaxAutoloadData: false,
ajaxAutoloadPeriod: CommonConstants.MIN_AUTOLOAD_PERIOD,
headers: {},
};

this.state = {
Expand Down Expand Up @@ -129,7 +130,17 @@ class Reactables extends Main {
}

setData(url, colsLen) {
fetch(url).then((response) => {// set ajax loader fo BD
const {headers} = this.settings;
let hrs = new Headers();
hrs.append(CommonConstants.HEADER_CONTENT_TYPE, CommonConstants.CONTENT_APP_JSON);
for (let k in headers) {
if (headers.hasOwnProperty(k)) {
hrs.append(k, headers[k]);
}
}
fetch(url, {
headers: hrs,
}).then((response) => {// set ajax loader fo BD
this.setLoader(colsLen);
return response.json();
}).then((data) => {
Expand Down
14 changes: 14 additions & 0 deletions src/components/form/Editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -406,6 +406,8 @@ class Editor extends Component {
if (typeof dataIndices[CommonConstants.GT_ROW_ID] !== CommonConstants.UNDEFINED) {
delete dataIndices[CommonConstants.GT_ROW_ID];
}
headers = this.setHeaders(settings, headers);
console.log(settings, headers);
fetch(ajaxUrl, {
method: settings.method,
body: JSON.stringify(dataIndices),
Expand Down Expand Up @@ -433,6 +435,7 @@ class Editor extends Component {
payload[k] = loAssign({}, fieldsEdit[k], dataIndices);
}
}
headers = this.setHeaders(settings, headers);
fetch(ajaxUrl, {
method: settings.method,
body: JSON.stringify(payload),
Expand All @@ -443,6 +446,7 @@ class Editor extends Component {
});
} else if (action === EditorConstants.ACTION_DELETE) {
this.triggerBefore(EditorConstants.EDITOR_REMOVE);
headers = this.setHeaders(settings, headers);
fetch(ajaxUrl, {
method: settings.method,
body: JSON.stringify(dataIndices), // prop ids are passed from Reactables
Expand All @@ -454,6 +458,15 @@ class Editor extends Component {
});
}
}

setHeaders(settings, headers) {
for (let hKey in settings.headers) {
if (settings.headers.hasOwnProperty(hKey)) {
headers.append(hKey, settings.headers[hKey]);
}
}
return headers;
}

getAjaxSettings(action) {
const {
Expand All @@ -477,6 +490,7 @@ class Editor extends Component {
return {
url: editor.ajax[action].url,
method: editor.ajax[action].type,
headers: editor.ajax[action].headers,
};
} else { // setting error
throw new EditorException('"ajax" property must be set either as string url ' +
Expand Down

0 comments on commit e52a422

Please sign in to comment.