Skip to content

Commit

Permalink
Fixed #657 - More paginator options to DataView
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Dec 4, 2018
1 parent e24f99b commit 29118c0
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 22 deletions.
13 changes: 9 additions & 4 deletions src/components/dataview/DataView.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,18 @@ interface DataViewProps {
footer?: JSX.Element | string,
value?: any[],
layout?: string,
paginator?: boolean,
rows?: number,
first?: number,
totalRecords?: number,
pageLinks?: number,
rowsPerPageOptions?: any[],
paginatorPosition?: string,
paginator?: boolean;
paginatorPosition?: string;
alwaysShowPaginator?: boolean;
paginatorTemplate?: string;
paginatorLeft?: any;
paginatorRight?: any;
pageLinkSize?: number;
rowsPerPageOptions?: number[];
currentPageReportTemplate?: string;
emptyMessage?: string,
sortField?: string,
sortOrder?: number,
Expand Down
26 changes: 19 additions & 7 deletions src/components/dataview/DataView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,18 @@ export class DataView extends Component {
footer: null,
value: null,
layout: 'list',
paginator: false,
rows: null,
first: 0,
totalRecords: null,
pageLinks: 5,
paginator: false,
paginatorPosition: 'bottom',
alwaysShowPaginator: true,
paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
paginatorLeft:null,
paginatorRight: null,
pageLinkSize: 5,
rowsPerPageOptions: null,
paginatorPosition: "bottom",
currentPageReportTemplate: '({currentPage} of {totalPages})',
emptyMessage: 'No records found',
sortField: null,
sortOrder: null,
Expand All @@ -105,13 +110,18 @@ export class DataView extends Component {
footer: PropTypes.string,
value: PropTypes.array,
layout: PropTypes.string,
paginator: PropTypes.bool,
rows: PropTypes.number,
first: PropTypes.number,
totalRecords: PropTypes.number,
pageLinks: PropTypes.number,
rowsPerPageOptions: PropTypes.array,
paginator: PropTypes.bool,
paginatorPosition: PropTypes.string,
alwaysShowPaginator: PropTypes.bool,
paginatorTemplate: PropTypes.string,
paginatorLeft: PropTypes.any,
paginatorRight: PropTypes.any,
pageLinkSize: PropTypes.number,
rowsPerPageOptions: PropTypes.array,
currentPageReportTemplate: PropTypes.string,
emptyMessage: PropTypes.string,
sortField: PropTypes.string,
sortOrder: PropTypes.number,
Expand Down Expand Up @@ -147,7 +157,9 @@ export class DataView extends Component {
const totalRecords = this.getTotalRecords();

return (
<Paginator first={first} rows={rows} className={className} onPageChange={this.onPageChange} totalRecords={totalRecords}/>
<Paginator first={first} rows={rows} pageLinkSize={this.props.pageLinkSize} className={className} onPageChange={this.onPageChange} template={this.props.paginatorTemplate}
totalRecords={totalRecords} rowsPerPageOptions={this.props.rowsPerPageOptions} currentPageReportTemplate={this.props.currentPageReportTemplate}
leftContent={this.props.paginatorLeft} rightContent={this.props.paginatorRight} />
);
}

Expand Down
52 changes: 41 additions & 11 deletions src/showcase/dataview/DataViewDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -427,12 +427,6 @@ onSortChange(event) {
<td>list</td>
<td>Layout of the items, valid values are "list" and "grid".</td>
</tr>
<tr>
<td>paginator</td>
<td>boolean</td>
<td>false</td>
<td>When specified as true, enables the pagination.</td>
</tr>
<tr>
<td>rows</td>
<td>number</td>
Expand All @@ -452,10 +446,46 @@ onSortChange(event) {
<td>Number of total records, defaults to length of value when not defined.</td>
</tr>
<tr>
<td>pageLinks</td>
<td>paginator</td>
<td>boolean</td>
<td>false</td>
<td>When specified as true, enables the pagination.</td>
</tr>
<tr>
<td>paginatorPosition</td>
<td>string</td>
<td>bottom</td>
<td>Position of the paginator, options are "top","bottom" or "both".</td>
</tr>
<tr>
<td>alwaysShowPaginator</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show it even there is only one page.</td>
</tr>
<tr>
<td>paginatorTemplate</td>
<td>string</td>
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
<td>Template of the paginator.</td>
</tr>
<tr>
<td>paginatorLeft</td>
<td>Element</td>
<td>null</td>
<td>Content for the left side of the paginator.</td>
</tr>
<tr>
<td>paginatorRight</td>
<td>Element</td>
<td>null</td>
<td>Content for the right side of the paginator.</td>
</tr>
<tr>
<td>pageLinkSize</td>
<td>number</td>
<td>5</td>
<td>Number of page links to display in paginator.</td>
<td>Number of page links to display.</td>
</tr>
<tr>
<td>rowsPerPageOptions</td>
Expand All @@ -464,10 +494,10 @@ onSortChange(event) {
<td>Array of integer values to display inside rows per page dropdown.</td>
</tr>
<tr>
<td>paginatorPosition</td>
<td>currentPageReportTemplate</td>
<td>string</td>
<td>bottom</td>
<td>Position of the paginator, options are "top","bottom" or "both".</td>
<td>(&123;currentPage&125; of &123;totalPages&125;)</td>
<td>Template of the current page report element.</td>
</tr>
<tr>
<td>emptyMessage</td>
Expand Down

0 comments on commit 29118c0

Please sign in to comment.