JSDoc: Module: Pagination

Pagination for MDCDataTable component implemented by react component. This component is used as the child element of the DataTable. This component requires MDCSelect and MDCIconButton to be installed in addition to MDCDataTable.

Parameters:

Name Type Description

props

Object

Properties

Name	Type	Attributes	Description
`className`	string	<optional>	The class name that is added to the root element.
`rowsCountList`	Array.<number>	<optional>	Specifies array of number that can be set to rows count per page. Default to `[10, 25, 50, 100]`.
`defaultRowsCount`	number	<optional>	Specifies default rows count per page. Default to first item of `props.rowsCountList`.
`pageRowsLable`	string	<optional>	The label of select that specifies rows count per page.
`onChangeRowsCount`	EventHandler	<optional>	Specifies event handler that is called when select that specifies rows count per page is changed.
`paginationLabel`	string	<optional>	The label that represents the current state of pagination.
`isLastPage`	boolean	<optional>	Specifies `true` if current page is the last page otherwise `false`.
`isFirstPage`	boolean	<optional>	Specifies `true` if current page is the first page otherwise `false`.
`onClickFirstPageIcon`	EventHandler	<optional>	Specifies event handler that is called when first page icon is clicked.
`onClickPrevPageIcon`	EventHandler	<optional>	Specifies event handler that is called when previous page icon is clicked.
`onClickNextPageIcon`	EventHandler	<optional>	Specifies event handler that is called when next page icon is clicked.
`onClickLastPageIcon`	EventHandler	<optional>	Specifies event handler that is called when last page icon is clicked.

Source:

data-table-pagination.jsx, line 27

Returns:

Type: DetailedReactHTMLElement

Example

import { DataTable, Pagination } from 'material-react-js';

function MyTable(props) {
  return (
    <DataTable data={props.data} keyField="myKey" columns={props.columns}>
      <Pagination pageRowsLable="Rows per page" rowsCountList={[10, 25, 50]}
                  defaultRowsCount={10} paginationLabel="1-10 of 100" isFirstPage={true}/>
    </DataTable>
  );
}