diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-all.js b/packages/react-bootstrap-table2-example/examples/remote/remote-all.js index 95107e1..1b479f5 100644 --- a/packages/react-bootstrap-table2-example/examples/remote/remote-all.js +++ b/packages/react-bootstrap-table2-example/examples/remote/remote-all.js @@ -4,11 +4,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import BootstrapTable from 'react-bootstrap-table-next'; import paginationFactory from 'react-bootstrap-table2-paginator'; +import cellEditFactory from 'react-bootstrap-table2-editor'; import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter'; import Code from 'components/common/code-block'; import { productsGenerator } from 'utils/common'; -const products = productsGenerator(87); +let products = productsGenerator(87); const columns = [{ dataField: 'id', @@ -31,6 +32,7 @@ const columns = [{ const sourceCode = `\ import BootstrapTable from 'react-bootstrap-table-next'; import paginationFactory from 'react-bootstrap-table2-paginator'; +import cellEditFactory from 'react-bootstrap-table2-editor'; import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter'; // ... @@ -57,16 +59,21 @@ const defaultSorted = [{ order: 'desc' }]; +const cellEditProps = { + mode: 'click' +}; + const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
{ sourceCode }
@@ -93,11 +100,25 @@ class Container extends React.Component {
this.handleTableChange = this.handleTableChange.bind(this);
}
- handleTableChange = (type, { page, sizePerPage, filters, sortField, sortOrder }) => {
+ handleTableChange = (type, { page, sizePerPage, filters, sortField, sortOrder, cellEdit }) => {
const currentIndex = (page - 1) * sizePerPage;
setTimeout(() => {
+ // 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
- let result = products.filter((row) => {
+ result = result.filter((row) => {
let valid = true;
for (const dataField in filters) {
const { filterVal, filterType, comparator } = filters[dataField];
@@ -162,12 +183,16 @@ const defaultSorted = [{
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 }