This is the example that shows how to group data in remote mode. Make sure to update to the newest version.
import React from 'react';
import { DataGrid, GridColumn } from 'rc-easyui';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
sourceData: [],
total: 0,
pageNumber: 1,
pageSize: 20,
data: [],
loading: false,
}
}
componentDidMount() {
this.loadData();
this.loadPage(this.state.pageNumber, this.state.pageSize)
}
loadPage(pageNumber, pageSize) {
this.setState({ loading: true })
setTimeout(() => {
let result = this.getData(pageNumber, pageSize);
this.setState(Object.assign({}, result, {
data: result.rows,
loading: false
}))
}, 400);
}
loadData() {
const isGroupRow = (row) => {
return row._groupRow ? true : false;
}
const getGroup = (value, groups) => {
if (!groups) {
groups = this.groupData;
}
for (let group of groups) {
if (group.value === value) {
return group;
}
}
return null;
}
const makeGroup = (data, groupField) => {
const groups = [];
for (let row of data) {
if (!isGroupRow(row)) {
let group = getGroup(row[groupField], groups);
if (group) {
group.rows.push(row);
} else {
group = {
value: row[groupField],
collapsed: false,
rows: [row]
};
groups.push(group);
}
}
}
groups.sort((a, b) => {
return a.value < b.value ? -1 : 1;
})
return groups;
}
const data = [];
for (let i = 1; i <= 100; i++) {
let amount = Math.floor(Math.random() * 1000);
let price = Math.floor(Math.random() * 1000);
data.push({
inv: "Inv No " + i,
name: "Name " + i,
amount: amount,
price: price,
cost: amount * price,
note: "Note " + i,
code: 'code' + (Math.floor(Math.random() * 10) + 1)
});
}
this.groupData = makeGroup(data, 'code');
const rows = this.makeGroupedRows(this.groupData);
this.setState({ sourceData: rows })
}
makeGroupedRows(groupData) {
let rows = [];
for (let group of groupData) {
rows.push({
_groupRow: true,
value: group.value,
rows: group.rows,
collapsed: group.collapsed
});
if (!group.collapsed) {
rows = rows.concat(group.rows);
}
}
return rows;
}
getData(pageNumber, pageSize) {
const data = this.state.sourceData;
const pageData = data.filter(r => !r._groupRow);
const total = pageData.length;
const start = (pageNumber - 1) * pageSize;
const rows = pageData.slice(start, start + pageSize);
const row1 = rows[0];
const row2 = rows[rows.length - 1];
let index1 = data.indexOf(row1);
let index2 = data.indexOf(row2);
while (index1 > 0 && data[index1 - 1]._groupRow) {
index1--;
}
return {
total: total,
pageNumber: pageNumber,
pageSize: pageSize,
rows: this.state.sourceData.slice(index1, index2 + 1)
};
}
handlePageChange(event) {
if (event.toggleGroup) {
const data = this.groupData.filter(g => g.value === event.toggleGroup);
if (data.length) {
data[0].collapsed = !data[0].collapsed;
}
const rows = this.makeGroupedRows(this.groupData);
this.setState({ sourceData: rows }, () => {
this.loadPage(event.pageNumber, event.pageSize)
})
} else {
this.loadPage(event.pageNumber, event.pageSize)
}
}
renderGroup({ value, rows }) {
return (
<span style={{ fontWeight: 'bold' }}>
{value} - <span style={{ color: 'red' }}>{rows.length}</span> Item(s)
</span>
)
}
render() {
return (
<div>
<h2>Row Group</h2>
<DataGrid
style={{ height: 250 }}
groupField="code"
renderGroup={this.renderGroup}
pagination
lazy
{...this.state}
onPageChange={this.handlePageChange.bind(this)}
>
<GridColumn field="inv" title="Inv No"></GridColumn>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="amount" title="Amount" align="right"></GridColumn>
<GridColumn field="price" title="Price" align="right"></GridColumn>
<GridColumn field="cost" title="Cost" align="right"></GridColumn>
<GridColumn field="note" title="Note"></GridColumn>
</DataGrid>
</div>
);
}
}
export default App;