mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
3c88364efe
* init react-bootstrap-table2-paginator * add react-bootstrap-table2-paginator as dependency * no container * handle for wrapping pagination component * add style for paginator addon * add story for pagination * implement pagination list * constants maintain in core package * implement sizePerPage dropdown * fix unalign for sizePerPage dropdown and pagination list * allow to return array from render(react@16 new feature) * implement pagination hooks * add story for pagination hooks * fixed dependencies version and upgrade enzyme * Shallow renderer no longer calls componentDidMount because DOM refs are not available * classNames -> className for TextEditor * add tests for pagination * fix react-bootstrap-table can't be resolved in other modules * implement custom page button title * add test for page button title * fix bug when sizePerPageList is an object array * add story for custom pagination * remove necessary component extends * move pagination options to react-bootstrap-table2-paginator * refine pagination stories * implement hideSizePerPage * implement hidePageListOnlyOnePage * fix multiple same key warning * remove help * support start from react@^16
83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
/* eslint react/prefer-stateless-function: 0 */
|
|
import React from 'react';
|
|
|
|
import BootstrapTable from 'react-bootstrap-table2';
|
|
import paginator from 'react-bootstrap-table2-paginator';
|
|
import Code from 'components/common/code-block';
|
|
import { productsGenerator } from 'utils/common';
|
|
|
|
const products = productsGenerator(87);
|
|
|
|
const columns = [{
|
|
dataField: 'id',
|
|
text: 'Product ID'
|
|
}, {
|
|
dataField: 'name',
|
|
text: 'Product Name'
|
|
}, {
|
|
dataField: 'price',
|
|
text: 'Product Price'
|
|
}];
|
|
|
|
const sourceCode = `\
|
|
import BootstrapTable from 'react-bootstrap-table2';
|
|
import paginator from 'react-bootstrap-table2-paginator';
|
|
// ...
|
|
|
|
const options = {
|
|
paginationSize: 4,
|
|
pageStartIndex: 0,
|
|
// alwaysShowAllBtns: true, // Always show next and previous button
|
|
// withFirstAndLast: false, // Hide the going to First and Last page button
|
|
// hideSizePerPage: true, // Hide the sizePerPage dropdown always
|
|
// hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
|
|
firstPageText: 'First',
|
|
prePageText: 'Back',
|
|
nextPageText: 'Next',
|
|
lastPageText: 'Last',
|
|
nextPageTitle: 'First page',
|
|
prePageTitle: 'Pre page',
|
|
firstPageTitle: 'Next page',
|
|
lastPageTitle: 'Last page',
|
|
sizePerPageList: [{
|
|
text: '5', value: 5
|
|
}, {
|
|
text: '10', value: 10
|
|
}, {
|
|
text: 'All', value: products.length
|
|
}] // A numeric array is also available. the purpose of above example is custom the text
|
|
};
|
|
|
|
<BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginator(options) } />
|
|
`;
|
|
const options = {
|
|
paginationSize: 4,
|
|
pageStartIndex: 0,
|
|
// alwaysShowAllBtns: true // Always show next and previous button
|
|
// withFirstAndLast: false // Hide the going to First and Last page button
|
|
// hideSizePerPage: true, // Hide the sizePerPage dropdown always
|
|
// hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
|
|
firstPageText: 'First',
|
|
prePageText: 'Back',
|
|
nextPageText: 'Next',
|
|
lastPageText: 'Last',
|
|
nextPageTitle: 'First page',
|
|
prePageTitle: 'Pre page',
|
|
firstPageTitle: 'Next page',
|
|
lastPageTitle: 'Last page',
|
|
sizePerPageList: [{
|
|
text: '5', value: 5
|
|
}, {
|
|
text: '10', value: 10
|
|
}, {
|
|
text: 'All', value: products.length
|
|
}] // A numeric array is also available. the purpose of above example is custom the text
|
|
};
|
|
|
|
export default () => (
|
|
<div>
|
|
<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginator(options) } />
|
|
<Code>{ sourceCode }</Code>
|
|
</div>
|
|
);
|