From 4e76e1345b80d5f55ea7b616825057d0b317fbf9 Mon Sep 17 00:00:00 2001 From: Julien Deniau Date: Tue, 26 Apr 2016 19:35:24 +0200 Subject: [PATCH 1/2] custom data accessor --- demo/js/demo.js | 6 ++- examples/js/app.js | 1 + examples/js/components/App.js | 3 ++ .../custom-data-access/custom-data-access.js | 41 +++++++++++++++++++ examples/js/custom-data-access/demo.js | 24 +++++++++++ package.json | 2 +- src/BootstrapTable.js | 1 + src/TableBody.js | 5 ++- src/TableHeaderColumn.js | 6 ++- src/store/TableDataStore.js | 4 +- 10 files changed, 86 insertions(+), 7 deletions(-) create mode 100644 examples/js/custom-data-access/custom-data-access.js create mode 100644 examples/js/custom-data-access/demo.js diff --git a/demo/js/demo.js b/demo/js/demo.js index 9798dfbdf..8983f2148 100644 --- a/demo/js/demo.js +++ b/demo/js/demo.js @@ -13,7 +13,9 @@ function addProducts(quantity) { price: 100 + i, supplierId: id+2, discount: "10%", - categoryId: "catorage-"+id+6 + category: { + id: "catorage-"+id+6, + }, }); } } @@ -92,7 +94,7 @@ React.render( Product Price Supplier ID Discount(Percentage) - Category ID + item.category.id} editable={true}>Category ID , document.getElementById("basic") ); diff --git a/examples/js/app.js b/examples/js/app.js index b1b87c67f..ab963eb96 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -18,6 +18,7 @@ const routes = ( + diff --git a/examples/js/components/App.js b/examples/js/components/App.js index ad5280012..9e11ba560 100644 --- a/examples/js/components/App.js +++ b/examples/js/components/App.js @@ -36,6 +36,9 @@ class App extends React.Component { const examples = [ { text: 'Basic Table', href: 'basic' + }, { + text: 'Custom Data Access', + href: 'custom-data-access' }, { text: 'Work on Column', href: 'column' diff --git a/examples/js/custom-data-access/custom-data-access.js b/examples/js/custom-data-access/custom-data-access.js new file mode 100644 index 000000000..826813057 --- /dev/null +++ b/examples/js/custom-data-access/custom-data-access.js @@ -0,0 +1,41 @@ +/* eslint max-len: 0 */ +import React from 'react'; +import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; + + +const products = []; + +function addProducts(quantity) { + const startId = products.length; + for (let i = 0; i < quantity; i++) { + const id = startId + i; + products.push({ + id: id, + name: 'Item name ' + id, + price: 2100 + i, + category: { + id: 20 + i, + name: 'Category name ' + i + } + }); + } +} + +addProducts(5); + +function categoryName(product) { + return product.category.name; +} + +export default class TrClassStringTable extends React.Component { + render() { + return ( + + Product ID + Product Name + Category name + + ); + } +} + diff --git a/examples/js/custom-data-access/demo.js b/examples/js/custom-data-access/demo.js new file mode 100644 index 000000000..cde00b754 --- /dev/null +++ b/examples/js/custom-data-access/demo.js @@ -0,0 +1,24 @@ +/* eslint max-len: 0 */ +import React from 'react'; +import CustomDataAccessTable from './custom-data-access'; + +class Demo extends React.Component { + render() { + return ( +
+
+
+
Use a custom function to access data
+
+
Source in /examples/js/custom-data-access/custom-data-access.js
+ +
+
+
+
+ ); + } +} + +export default Demo; + diff --git a/package.json b/package.json index b72fdc57a..63433c049 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ }, "dependencies": { "classnames": "^2.1.2", - "react-toastr": "^2.3.1" + "react-toastr": "2.4.0" }, "peerDependencies": { "react": "^0.14.3 || ^15.0.0" diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js index ff80d3cfe..891856de6 100644 --- a/src/BootstrapTable.js +++ b/src/BootstrapTable.js @@ -118,6 +118,7 @@ class BootstrapTable extends Component { return React.Children.map(children, (column, i) => { return { name: column.props.dataField, + dataAccess: column.props.dataAccess, align: column.props.dataAlign, sort: column.props.dataSort, format: column.props.dataFormat, diff --git a/src/TableBody.js b/src/TableBody.js index 97a4aaae6..66bd6ce47 100644 --- a/src/TableBody.js +++ b/src/TableBody.js @@ -32,7 +32,10 @@ class TableBody extends Component { const tableRows = this.props.data.map(function(data, r) { const tableColumns = this.props.columns.map(function(column, i) { - const fieldValue = data[column.name]; + const fieldValue = typeof column.dataAccess === 'function' ? + column.dataAccess(data) : + data[column.name]; + if (this.editing && column.name !== this.props.keyField && // Key field can't be edit column.editable && // column is editable? default is true, user can set it false diff --git a/src/TableHeaderColumn.js b/src/TableHeaderColumn.js index c411c0446..b6d1c77d2 100644 --- a/src/TableHeaderColumn.js +++ b/src/TableHeaderColumn.js @@ -130,9 +130,10 @@ TableHeaderColumn.propTypes = { headerAlign: PropTypes.string, dataSort: PropTypes.bool, onSort: PropTypes.func, - dataFormat: PropTypes.func, csvFormat: PropTypes.func, csvHeader: PropTypes.string, + dataAccess: PropTypes.func, + dataFormat: PropTypes.func, isKey: PropTypes.bool, editable: PropTypes.any, hidden: PropTypes.bool, @@ -168,9 +169,10 @@ TableHeaderColumn.defaultProps = { dataAlign: 'left', headerAlign: undefined, dataSort: false, - dataFormat: undefined, csvFormat: undefined, csvHeader: undefined, + dataAccess: undefined, + dataFormat: undefined, isKey: false, editable: true, onSort: undefined, diff --git a/src/store/TableDataStore.js b/src/store/TableDataStore.js index 0a85e052b..7a2861cf3 100644 --- a/src/store/TableDataStore.js +++ b/src/store/TableDataStore.js @@ -386,7 +386,9 @@ export class TableDataStore { let valid = true; let filterVal; for (const key in filterObj) { - let targetVal = row[key]; + let targetVal = typeof this.colInfos[key].dataAccess === 'function' ? + this.colInfos[key].dataAccess(row) : + row[key]; if (targetVal === null) return false; switch (filterObj[key].type) { From 546bdb7b6b7dc70e09ffb830fcd521c99b5979e9 Mon Sep 17 00:00:00 2001 From: Jean-Francois Remy Date: Tue, 14 Jun 2016 17:29:40 -0700 Subject: [PATCH 2/2] Follow up on PR #418 rebased the code on latest master added support for search updated example to show filtering and search --- examples/js/custom-data-access/custom-data-access.js | 6 +++--- src/store/TableDataStore.js | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/examples/js/custom-data-access/custom-data-access.js b/examples/js/custom-data-access/custom-data-access.js index 826813057..1a51decad 100644 --- a/examples/js/custom-data-access/custom-data-access.js +++ b/examples/js/custom-data-access/custom-data-access.js @@ -15,7 +15,7 @@ function addProducts(quantity) { price: 2100 + i, category: { id: 20 + i, - name: 'Category name ' + i + name: 'Category name ' + (quantity + i) } }); } @@ -30,10 +30,10 @@ function categoryName(product) { export default class TrClassStringTable extends React.Component { render() { return ( - + Product ID Product Name - Category name + Category name ); } diff --git a/src/store/TableDataStore.js b/src/store/TableDataStore.js index 7a2861cf3..d27905dd6 100644 --- a/src/store/TableDataStore.js +++ b/src/store/TableDataStore.js @@ -427,7 +427,7 @@ export class TableDataStore { if (this.colInfos[key]) { const { format, filterFormatted, formatExtraData } = this.colInfos[key]; if (filterFormatted && format) { - targetVal = format(row[key], row, formatExtraData); + targetVal = format(targetVal, row, formatExtraData); } } @@ -480,7 +480,9 @@ export class TableDataStore { const key = keys[i]; if (this.colInfos[key] && row[key]) { const { format, filterFormatted, formatExtraData, searchable } = this.colInfos[key]; - let targetVal = row[key]; + let targetVal = typeof this.colInfos[key].dataAccess === 'function' ? + this.colInfos[key].dataAccess(row) : + row[key]; if (searchable) { if (filterFormatted && format) { targetVal = format(targetVal, row, formatExtraData);