angular-ui/ui-grid

Control over pagination template in UI-Grid

Open

#3,836 opened on Jun 22, 2015

View on GitHub
 (5 comments) (0 reactions) (0 assignees)JavaScript (5,395 stars) (2,496 forks)batch import
good first issuetype: enhancement

Description

Hello - thanks for UI grid, a great addition to angular!

Feature request -

a) Control over the appearance and behaviour of the pagination template through an instantiation option in grid options

e.g a few issues / requests here

  1. I would like to be able to move the pagination panel to at the top of the grid

  2. Once the data has been paged at least once, i.e user moves to second page, the pagination template overlaps the bottom of the grid, and the width of the select box for pageSizes is not wide enough to incorporate larger amounts - see http://gyazo.com/8431730d9b2ac2dcb7580ca0b542aad8 I've managed to "fix" issue 2) by overriding some of the css but it's not ideal

    .ui-grid-pager-panel {
  position:relative;
  display: inline-block;
}
.ui-grid-pager-max-pages-number {
  vertical-align: top;
}
.ui-grid-pager-row-count-picker select {
  width: auto !important;
}

  3. Increased control over options in paginationPageSizes: Desired behaviour is control over styling and also allowing an "all" option in paginationPageSizes: e.g instead of [100, 500, 1000, 5000], to be able to use something like

    paginationPageSizes: [
  {amount: 100, label: "100"},
  {amount: 500, label: "500"},
  {amount: $scope.gridOptions.totalItems, label: "All"}]

Contributor guide

Tech stack
javascriptangularcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
AngularJS experienceUI Grid fundamentalsCSS for override
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the current pagination template implementation in ui grid (likely in files like 'pagination.js' or 'templates/'). Look at the grid options interface to understand how to add a configuration for template position and custom page sizes. Check existing comments on the issue for any maintainer guidance or suggested approaches. Also review the CSS overrides provided by the user to see if they can be incorporated into a more robust solution.
Control over pagination template in UI-Grid · angular-ui/ui-grid#3836 | Good First Issue