diff --git a/src/components/dataview/DataView.d.ts b/src/components/dataview/DataView.d.ts index faf3888a12..ccebb5d569 100755 --- a/src/components/dataview/DataView.d.ts +++ b/src/components/dataview/DataView.d.ts @@ -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, diff --git a/src/components/dataview/DataView.js b/src/components/dataview/DataView.js index 60af8fcdb4..a274bcaa22 100644 --- a/src/components/dataview/DataView.js +++ b/src/components/dataview/DataView.js @@ -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, @@ -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, @@ -147,7 +157,9 @@ export class DataView extends Component { const totalRecords = this.getTotalRecords(); return ( - + ); } diff --git a/src/showcase/dataview/DataViewDemo.js b/src/showcase/dataview/DataViewDemo.js index 73622cd169..73bae3baff 100644 --- a/src/showcase/dataview/DataViewDemo.js +++ b/src/showcase/dataview/DataViewDemo.js @@ -427,12 +427,6 @@ onSortChange(event) { list Layout of the items, valid values are "list" and "grid". - - paginator - boolean - false - When specified as true, enables the pagination. - rows number @@ -452,10 +446,46 @@ onSortChange(event) { Number of total records, defaults to length of value when not defined. - pageLinks + paginator + boolean + false + When specified as true, enables the pagination. + + + paginatorPosition + string + bottom + Position of the paginator, options are "top","bottom" or "both". + + + alwaysShowPaginator + boolean + true + Whether to show it even there is only one page. + + + paginatorTemplate + string + FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown + Template of the paginator. + + + paginatorLeft + Element + null + Content for the left side of the paginator. + + + paginatorRight + Element + null + Content for the right side of the paginator. + + + pageLinkSize number 5 - Number of page links to display in paginator. + Number of page links to display. rowsPerPageOptions @@ -464,10 +494,10 @@ onSortChange(event) { Array of integer values to display inside rows per page dropdown. - paginatorPosition + currentPageReportTemplate string - bottom - Position of the paginator, options are "top","bottom" or "both". + (&123;currentPage&125; of &123;totalPages&125;) + Template of the current page report element. emptyMessage