@pmwcs/data-table-pagination v1.1.0

Data Table Pagination (PMWCS Addon)

Pagination for data tables.

• Module @pmwcs/data-table-pagination
• Import styles:
  • Using CSS Loader
    • import '@pmwcs/data-table-pagination/styles';
  • Or include stylesheets
    • '@pmwcs/data-table-pagination/data-table-pagination.css'
    • '@pmwcs/icon-button/styles'
    • '@pmwcs/select/styles'

Uncontrolled

<DataTablePagination
  defaultPage={1}
  count={12}
  onChangePage={(evt, page) => {}}
  onChangeRowsPerPage={(evt, rowsPerPage) => {}}
/>

Controlled

function Controlled ({ page: page_, count = 55 }) {
  const [page, setPage] = useState(page_)
  const rowsPerPageOptions = [
    10, 25, { value: -1, label: 'Todas' }
  ]
  const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageOptions[0])

  return (
    <DataTablePagination
      count={count}
      page={page}
      rowsPerPage={rowsPerPage}
      rowsPerPageOptions={rowsPerPageOptions}
      onChangePage={(_, page) => setPage(page)}
      onChangeRowsPerPage={(_, rowsPerPage) => setRowsPerPage(rowsPerPage)}
      labelRowsPerPage='Filas por página'
      labelDisplayedRows={({ from, to, count }) => `del ${from} a ${to} ${count === -1 ? '' : `de ${count}`}`}
    />
  )
}

DataTablePagination

The DataTablePagination Component.

Props