{ `This Expand row is belong to rowKey ${row.id}` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
{ sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
@@ -77,10 +100,25 @@ class Container extends React.Component {
this.handleTableChange = this.handleTableChange.bind(this);
}
- handleTableChange = (type, { page, sizePerPage, filters }) => {
+ handleTableChange = (type, { page, sizePerPage, filters, sortField, sortOrder, cellEdit }) => {
const currentIndex = (page - 1) * sizePerPage;
setTimeout(() => {
- const result = products.filter((row) => {
+ // Handle cell editing
+ if (type === 'cellEdit') {
+ const { rowId, dataField, newValue } = cellEdit;
+ products = products.map((row) => {
+ if (row.id === rowId) {
+ const newRow = { ...row };
+ newRow[dataField] = newValue;
+ return newRow;
+ }
+ return row;
+ });
+ }
+ let result = products;
+
+ // Handle column filters
+ result = result.filter((row) => {
let valid = true;
for (const dataField in filters) {
const { filterVal, filterType, comparator } = filters[dataField];
@@ -96,6 +134,26 @@ class Container extends React.Component {
}
return valid;
});
+ // Handle column sort
+ if (sortOrder === 'asc') {
+ result = result.sort((a, b) => {
+ if (a[sortField] > b[sortField]) {
+ return 1;
+ } else if (b[sortField] > a[sortField]) {
+ return -1;
+ }
+ return 0;
+ });
+ } else {
+ result = result.sort((a, b) => {
+ if (a[sortField] > b[sortField]) {
+ return -1;
+ } else if (b[sortField] > a[sortField]) {
+ return 1;
+ }
+ return 0;
+ });
+ }
this.setState(() => ({
page,
data: result.slice(currentIndex, currentIndex + sizePerPage),
@@ -120,18 +178,29 @@ class Container extends React.Component {
}
`;
+const defaultSorted = [{
+ dataField: 'name',
+ order: 'desc'
+}];
+
+const cellEditProps = {
+ mode: 'click'
+};
+
const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
remote.pagination is enabled, the filtering,
sorting and searching will also change to remote mode automatically{ sourceCode }
{ sourceCode }
+ { sourceCode }
+ { `This Expand row is belong to rowKey ${row.id}` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ \`This Expand row is belong to rowKey $\{row.id}\` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ sourceCode }
+ { `This Expand row is belong to rowKey ${row.id}` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ \`This Expand row is belong to rowKey $\{row.id}\` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ sourceCode }
+ { `This Expand row is belong to rowKey ${row.id}` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ \`This Expand row is belong to rowKey $\{row.id}\` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ sourceCode }
+ { \`This Expand row is belong to rowKey $\{row.id}\` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ sourceCode }
+ { `This Expand row is belong to rowKey ${row.id}` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ sourceCode }
+ { `This Expand row is belong to rowKey ${row.id}` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ \`This Expand row is belong to rowKey $\{row.id}\` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ sourceCode }
+ { `This Expand row is belong to rowKey ${row.id}` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ \`This Expand row is belong to rowKey $\{row.id}\` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
+