Add defaultRowsPerPage to Table component
This commit is contained in:
parent
033284d835
commit
cafb75c5ac
|
@ -93,7 +93,7 @@
|
|||
"@storybook/addon-knobs": "5.2.1",
|
||||
"@storybook/addon-links": "5.2.1",
|
||||
"@storybook/react": "5.2.1",
|
||||
"@testing-library/react": "9.1.4",
|
||||
"@testing-library/react": "9.2.0",
|
||||
"autoprefixer": "9.6.1",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"babel-eslint": "10.0.3",
|
||||
|
@ -132,15 +132,15 @@
|
|||
"storybook-host": "5.1.0",
|
||||
"storybook-router": "^0.3.3",
|
||||
"style-loader": "1.0.0",
|
||||
"truffle": "5.0.37",
|
||||
"truffle": "5.0.38",
|
||||
"truffle-contract": "4.0.31",
|
||||
"truffle-solidity-loader": "0.1.32",
|
||||
"uglifyjs-webpack-plugin": "2.2.0",
|
||||
"url-loader": "^2.1.0",
|
||||
"webpack": "4.41.0",
|
||||
"webpack-bundle-analyzer": "3.5.1",
|
||||
"webpack-bundle-analyzer": "3.5.2",
|
||||
"webpack-cli": "3.3.9",
|
||||
"webpack-dev-server": "3.8.1",
|
||||
"webpack-manifest-plugin": "2.1.1"
|
||||
"webpack-manifest-plugin": "2.1.2"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,6 +21,7 @@ type Props<K> = {
|
|||
children: Function,
|
||||
size: number,
|
||||
defaultFixed: boolean,
|
||||
defaultRowsPerPage: number,
|
||||
defaultOrder: 'desc' | 'asc',
|
||||
noBorder: boolean,
|
||||
disablePagination: boolean,
|
||||
|
@ -31,7 +32,7 @@ type State = {
|
|||
order?: Order,
|
||||
orderBy?: string,
|
||||
orderProp: boolean,
|
||||
rowsPerPage: number,
|
||||
rowsPerPage?: number,
|
||||
fixed?: boolean,
|
||||
}
|
||||
|
||||
|
@ -83,7 +84,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
|||
orderBy: undefined,
|
||||
fixed: undefined,
|
||||
orderProp: false,
|
||||
rowsPerPage: 5,
|
||||
rowsPerPage: undefined,
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -147,6 +148,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
|||
defaultOrderBy,
|
||||
defaultOrder,
|
||||
defaultFixed,
|
||||
defaultRowsPerPage,
|
||||
noBorder,
|
||||
} = this.props
|
||||
const {
|
||||
|
@ -154,6 +156,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
|||
} = this.state
|
||||
const orderByParam = orderBy || defaultOrderBy
|
||||
const orderParam = order || defaultOrder
|
||||
const displayRows = rowsPerPage || defaultRowsPerPage
|
||||
const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed
|
||||
|
||||
const paginationClasses = {
|
||||
|
@ -165,10 +168,10 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
|||
let sortedData = stableSort(data, getSorting(orderParam, orderByParam, orderProp), fixedParam)
|
||||
|
||||
if (!disablePagination) {
|
||||
sortedData = sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
sortedData = sortedData.slice(page * displayRows, page * displayRows + displayRows)
|
||||
}
|
||||
|
||||
const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage)
|
||||
const emptyRows = displayRows - Math.min(displayRows, data.length - page * displayRows)
|
||||
const isEmpty = size === 0
|
||||
|
||||
return (
|
||||
|
@ -191,7 +194,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
|||
<TablePagination
|
||||
component="div"
|
||||
count={size}
|
||||
rowsPerPage={rowsPerPage}
|
||||
rowsPerPage={displayRows}
|
||||
rowsPerPageOptions={[5, 10, 25, 50, 100]}
|
||||
page={page}
|
||||
backIconButtonProps={backProps}
|
||||
|
@ -209,6 +212,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
|
|||
GnoTable.defaultProps = {
|
||||
defaultOrder: 'asc',
|
||||
disablePagination: false,
|
||||
defaultRowsPerPage: 5,
|
||||
}
|
||||
|
||||
export default withStyles(styles)(GnoTable)
|
||||
|
|
|
@ -155,6 +155,7 @@ class Balances extends React.Component<Props, State> {
|
|||
<Table
|
||||
label="Balances"
|
||||
defaultOrderBy={BALANCE_TABLE_ASSET_ID}
|
||||
defaultRowsPerPage={10}
|
||||
columns={columns}
|
||||
data={filteredData}
|
||||
size={filteredData.size}
|
||||
|
|
53
yarn.lock
53
yarn.lock
|
@ -1332,6 +1332,13 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.13.2"
|
||||
|
||||
"@babel/runtime@^7.6.0":
|
||||
version "7.6.2"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.2.tgz#c3d6e41b304ef10dcf13777a33e7694ec4a9a6dd"
|
||||
integrity sha512-EXxN64agfUqqIGeEjI5dL5z0Sw0ZwWo1mLTi4mQowCZ42O59b7DRpZAnTC6OqdF28wMBMFKNb/4uFGrVaigSpg==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.2"
|
||||
|
||||
"@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4":
|
||||
version "7.4.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
|
||||
|
@ -2497,10 +2504,10 @@
|
|||
dependencies:
|
||||
defer-to-connect "^1.0.1"
|
||||
|
||||
"@testing-library/dom@^6.1.0":
|
||||
version "6.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.1.0.tgz#8d5a954158e81ecd7c994907f4ec240296ed823b"
|
||||
integrity sha512-qivqFvnbVIH3DyArFofEU/jlOhkGIioIemOy9A9M/NQTpPyDDQmtVkAfoB18RKN581f0s/RJMRBbq9WfMIhFTw==
|
||||
"@testing-library/dom@^6.3.0":
|
||||
version "6.4.1"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.4.1.tgz#4efd38d896b9b2255025acf9567e2360e1f4814f"
|
||||
integrity sha512-bjPHLO5NzlTvA57Tfz8txHEUmnOed3NuvObB2ttoKfO6A/utr7TZt9bDHHcYymcZIG2IsQZLix/m4ZKkedDDwQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
"@sheerun/mutationobserver-shim" "^0.3.2"
|
||||
|
@ -2524,13 +2531,13 @@
|
|||
pretty-format "^24.0.0"
|
||||
redent "^3.0.0"
|
||||
|
||||
"@testing-library/react@9.1.4":
|
||||
version "9.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.1.4.tgz#4cc1a228a944c0f468ee501e7da1651d8bbd9902"
|
||||
integrity sha512-fQ/PXZoLcmnS1W5ZiM3P7XBy2x6Hm9cJAT/ZDuZKzJ1fS1rN3j31p7ReAqUe3N1kJ46sNot0n1oiGbz7FPU+FA==
|
||||
"@testing-library/react@9.2.0":
|
||||
version "9.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.2.0.tgz#143ad2d96b03c3c334e47aaf33cc2c9b7d007123"
|
||||
integrity sha512-Hr87KZflfI+vPZjgyzBKQHolQHiXGU5aTGjQSCJdH/yGPbm+IzrvuWPS97GD3RUH3rSS1IXq1e2Sn8Hmyw2ctA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
"@testing-library/dom" "^6.1.0"
|
||||
"@babel/runtime" "^7.6.0"
|
||||
"@testing-library/dom" "^6.3.0"
|
||||
"@types/testing-library__react" "^9.1.0"
|
||||
|
||||
"@truffle/blockchain-utils@^0.0.11":
|
||||
|
@ -17836,10 +17843,10 @@ truffle-workflow-compile@^2.1.3:
|
|||
truffle-external-compile "^1.0.15"
|
||||
truffle-resolver "^5.0.15"
|
||||
|
||||
truffle@5.0.37:
|
||||
version "5.0.37"
|
||||
resolved "https://registry.yarnpkg.com/truffle/-/truffle-5.0.37.tgz#10da6f1bb9e661c4ccec75c295554bc4434f6b18"
|
||||
integrity sha512-od3mnu6sCV7sYbJCLSDV66RZ4bYeuLQ1QDpjGQHyJMB5AIw+u8GnxBmj6MKBOWHC+zixnwkRwS9yTYpj5IObFg==
|
||||
truffle@5.0.38:
|
||||
version "5.0.38"
|
||||
resolved "https://registry.yarnpkg.com/truffle/-/truffle-5.0.38.tgz#f306ad1bddea7ad87b795783da2ca9f19a8345dc"
|
||||
integrity sha512-RmbhEFROg+SGyQRM0tWk4NHUrS/uqHDTcc/ZY0k3JFd4cbr2vGD2csdWCfVW2/+SQ2qufXymurt9aRNvkpYQDA==
|
||||
dependencies:
|
||||
app-module-path "^2.2.0"
|
||||
mocha "5.2.0"
|
||||
|
@ -19548,10 +19555,10 @@ webidl-conversions@^4.0.2:
|
|||
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
|
||||
integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
|
||||
|
||||
webpack-bundle-analyzer@3.5.1:
|
||||
version "3.5.1"
|
||||
resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.5.1.tgz#84aabb1547178d842ebb4ccc7324084b6c3b0ea9"
|
||||
integrity sha512-CDdaT3TTu4F9X3tcDq6PNJOiNGgREOM0WdN2vVAoUUn+M6NLB5kJ543HImCWbrDwOpbpGARSwU8r+u0Pl367kA==
|
||||
webpack-bundle-analyzer@3.5.2:
|
||||
version "3.5.2"
|
||||
resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.5.2.tgz#ac02834f4b31de8e27d71e6c7a612301ebddb79f"
|
||||
integrity sha512-g9spCNe25QYUVqHRDkwG414GTok2m7pTTP0wr6l0J50Z3YLS04+BGodTqqoVBL7QfU/U/9p/oiI5XFOyfZ7S/A==
|
||||
dependencies:
|
||||
acorn "^6.0.7"
|
||||
acorn-walk "^6.1.1"
|
||||
|
@ -19662,10 +19669,10 @@ webpack-log@^2.0.0:
|
|||
ansi-colors "^3.0.0"
|
||||
uuid "^3.3.2"
|
||||
|
||||
webpack-manifest-plugin@2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.1.tgz#6b3e280327815b83152c79f42d0ca13b665773c4"
|
||||
integrity sha512-2zqJ6mvc3yoiqfDjghAIpljhLSDh/G7vqGrzYcYqqRCd/ZZZCAuc/YPE5xG0LGpLgDJRhUNV1H+znyyhIxahzA==
|
||||
webpack-manifest-plugin@2.1.2:
|
||||
version "2.1.2"
|
||||
resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.2.tgz#990c448b4cfe1cf0b2dfad4a422264aabc4c98eb"
|
||||
integrity sha512-XWjPY0NXXJ1tGQZgtOMZtEsm8mST23nvO7q5e5H26NH4pv7wfYbHaX9Uwogve+IF6Ilv4j1e3hPr9N3JGZdilA==
|
||||
dependencies:
|
||||
fs-extra "^7.0.0"
|
||||
lodash ">=3.5 <5"
|
||||
|
@ -20267,4 +20274,4 @@ yauzl@^2.4.2:
|
|||
integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
|
||||
dependencies:
|
||||
buffer-crc32 "~0.2.3"
|
||||
fd-slicer "~1.1.0"
|
||||
fd-slicer "~1.1.0"
|
||||
|
|
Loading…
Reference in New Issue