Skip to main content

Pagination

Divides table rows into a series of pages.

pagination​

  • Type: boolean | {
        rowsPerPage?: number,
        rowsPerPageSelect?: boolean|RowsPerPageSelect,
        maxNumberOfVisiblePageButtons?: number,
        displayPrevNext?: boolean,
        displayFirstLast?: boolean,
        displayNumberOfVisibleRows?: boolean,
        styles?: PaginationStyle,
        positions?: PaginationPositions
    }
  • Default: {
        rowsPerPage: 10,
        rowsPerPageSelect: true,
        maxNumberOfVisiblePageButtons: 8,
        displayPrevNext: true,
        displayFirstLast: true,
        displayNumberOfVisibleRows: true,
        positions: refer to the PaginationPositions type
    }

rowsPerPage is the number of maximum data rows that can be displayed in a single page.
rowsPerPageSelect facilitates a rowsPerPage selection button that opens up a dropdown containing a number of options that the user can select to change rowsPerPage.
maxNumberOfVisiblePageButtons is the maximum number of page (number) buttons that are visible, the rest will be hidden.
displayPrevNext defines whether the previous and next page buttons are displayed.
displayFirstLast defines whether the first and last page buttons are displayed.
displayNumberOfVisibleRows displays information on the index of currently visible rows out of the total number of rows in the table. E.g. 1-5 of 20.
styles defines the styling properties of pagination components.
positions defines pagination components positions.

Example​

<active-table pagination="true"></active-table>

Types​

Object types for properties inside pagination:

RowsPerPageSelect​

  • Type: {
        prefixText?: string,
        options?: (number | "all" | "All" )[]
    }
  • Default: {
        prefixText: "Rows per page",
        options: [10, 25, 50, "All"]
    }

Custom settings for the rowsPerPageSelect property.
prefixText is the text that is displayed before the button.
options is the array of options that are displayed in the dropdown. "all"|"All" option displays all of the table's rows within one page. If the defined rowsPerPage value (in pagination object) is not in the options array, it will be added to it automatically.

Example​

<active-table
  pagination='{
    "rowsPerPageSelect": {"prefixText": "Number of rows:", "options": [10, 20, 30, "All"]},
    "rowsPerPage": 5
  }'
></active-table>

PaginationStyle​

Styling properties of pagination components.
rowsPerPageSelect defines styling properties for the rowsPerPage button container and its dropdown. numberOfVisibleRows defines styling properties for the number of visible rows text.
pageButtons defines styling properties for the page/previous/next/first/last buttons.

Example​

<active-table
  pagination='{
    "styles": {
      "rowsPerPageSelect": {
        "prefixText": {"color": "#174a76"},
        "buttonText": {"default":{"color": "#174a76"}},
        "buttonArrow": {"default":{"filter": "brightness(0) saturate(100%) invert(22%) sepia(77%) saturate(620%) hue-rotate(168deg) brightness(96%) contrast(95%)"}}
      },
      "numberOfVisibleRows": {"color": "#174a76"},
      "pageButtons": {
        "buttons": {
          "default": {"color": "steelblue", "stroke": "steelblue", "border":"1px solid #dedede", "borderRight": "unset"}
        },
        "activeButton": {"default": {"backgroundColor": "steelblue", "color": "white", "border":"1px solid steelblue"}},
        "firstVisibleButtonOverride": {"borderTopLeftRadius": "2px", "borderBottomLeftRadius": "2px"},
        "lastVisibleButtonOverride": {"borderRight": "1px solid #dedede", "borderTopRightRadius": "2px", "borderBottomRightRadius": "2px"},
        "activeButtonPrecedence": true
    }},
    "rowsPerPage": 5
  }'
></active-table>
tip

When number of visible rows text contains digits that are in the 100s+, it is advisable to set numberOfVisibleRows with a minWidth value that is higher than 32px to stop side components from moving when its digits change.

RowsPerPageOptionsStyle​

Styling properties for the rows per page component elements. container is the parent element that encapsulates all of the rows per page elements.

Example​

<active-table
  pagination='{
    "styles": {
      "rowsPerPageSelect": {
        "container": {"marginRight": "1px"},
        "prefixText": {"color": "#1f6e97"},
        "button": {"default":{"border": "1px solid #9f9f9f"}, "hover":{"backgroundColor": "#fcfcfc"}},
        "buttonText": {"default":{"color": "#1f6e97"}, "hover":{"color": "#444444"}, "click":{"color": "#707070"}},
        "buttonArrow": {
          "default":{"filter": "brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(397%) hue-rotate(155deg) brightness(99%) contrast(92%)"},
          "hover":{"filter": "brightness(0) saturate(100%) invert(27%) sepia(0%) saturate(3140%) hue-rotate(277deg) brightness(97%) contrast(100%)"},
          "click":{"filter": "brightness(0) saturate(100%) invert(44%) sepia(0%) saturate(4%) hue-rotate(67deg) brightness(100%) contrast(98%)"}
      }}},
    "rowsPerPage": 5
  }'
></active-table>
info

Because buttonArrow is an svg icon - its color is set via filter property. You can use the cssfilterconverter tool to generate its values.

PageButtonStyle​

Styling properties for the page buttons component elements.
container is the parent element that encapsulates all of the buttons.
buttons is used to styles the buttons with numbers, however its properties are also reused by actionButtons, disabledButtons and actionButtons. Use the TIPs below to help styles them correctly.
activeButton is the button with the currently active page number.
activeButtonPrecedence denotes whether its border properties overcomes the sibling border properties (except radius).
disabledButtons are buttons that have no events and cannot be clicked. E.g. buttons when there are no data rows or action buttons when the currently active page number is either the first or the last.
actionButtons are buttons that change the currently active page number to next, previous, first and last.
firstVisibleButtonOverride and lastVisibleButtonOverride are used for overriding the properties of first or last buttons within the container, e.g. setting the border radius or setting the opposite side border property when the buttons styles border properties are set for the other. Eg. when default properties are "border": "1px solid #dedede", "borderRight": "unset", set lastVisibleButtonOverride with _"borderLeft":"1px solid #dedede"_ as otherwise the last button is not going to have a border on the right.

Example​

<active-table
  pagination='{
    "styles": {
      "pageButtons": {
        "buttons": {
          "default": {
            "color": "#3682ec", "stroke": "#3682ec", "border":"1px solid #dedede", "borderRight": "unset", "minWidth": "30px"
        }},
        "activeButton": {"default": {"backgroundColor": "#3682ec", "color": "white", "border":"1px solid #3682ec"}},
        "firstVisibleButtonOverride": {"borderTopLeftRadius": "5px", "borderBottomLeftRadius": "5px"},
        "lastVisibleButtonOverride": {"borderRight": "1px solid #dedede", "borderTopRightRadius": "5px", "borderBottomRightRadius": "5px"},
        "activeButtonPrecedence": true
    }},
    "rowsPerPage": 5
  }'
></active-table>
tip

When setting button widths, use minWidth instead of width to override the defaults and it is additionally useful to automatically expand the button widths in situations when their numbers contain multiple digits that surpass the currently defined width dimensions.

tip

When buttons are grouped next to each other and they have borders, set borderRight to "unset" in the buttons property to create an appearance of a thin border. When doing this you will additionally need to set borderLeft with a pixel value on lastVisibleButtonOverride as the rightmost button would not have a right border.

info

When using activeButtonPrecedence with thin buttons borders (in the tip above), make sure to set borderRight to "unset" and not "borderLeft" as the css selector limitations only allow the active button to unset the left border of the right sibling and not the left.

ActionButtonStyle​

  • Type: {StatefulCSS &
        previousText?: string,
        nextText?: string,
        firstText?: string,
        lastText?: string
    }

Styling for action buttons that facilitates the definition of styles for various mouse states and the text that is displayed in each one.

Example​

<active-table
  pagination='{
    "styles": {
      "pageButtons": {
        "actionButtons": {
          "default": {"width": "50px", "fontSize": "15px", "color": "#1e912a"},
          "hover": {"backgroundColor": "#e4ffe4"},
          "click": {"backgroundColor": "#81d581"},
          "previousText": "Prev",
          "nextText": "Next",
          "firstText": "First",
          "lastText": "Last"
      }}
    },
    "rowsPerPage": 5
  }'
></active-table>
tip

Action buttons contain icons (by default) - if you want to change their color use the stroke property, otherwise when they are in text format like in the example above - use color.

PaginationPositions​

Positions for pagination components.

Example​

<active-table
  pagination='{
    "positions": {
      "pageButtons": {"position": "bottom-center"},
      "numberOfVisibleRows": {"position": "top-left", "order": 2},
      "rowsPerPageSelect": {"position": "top-left", "order": 1}
    },
    "rowsPerPage": 5
  }'
></active-table>

PaginationPosition​

Object defining position properties for a pagination component. order is the order of the component when other ones are also placed in the same position.

More examples​

Circle buttons

<active-table
  pagination='{
    "displayFirstLast": false,
    "styles": {
      "pageButtons": {
        "buttons": {
          "default": {"color": "grey", "stroke": "grey", "border":"1px solid #dedede", "marginRight": "5px", "marginTop": "1px", "height": "31px", "width": "31px", "borderRadius": "20px"}},
        "activeButton": {"default": {"backgroundColor": "#56b3ff", "color": "white", "border":"1px solid #56b3ff"}},
        "disabledButtons": {"default": {"backgroundColor": "white"}},
        "firstVisibleButtonOverride": {},
        "lastVisibleButtonOverride": {}
    }},
    "rowsPerPageSelect": false,
    "displayNumberOfVisibleRows": false,
    "positions": {"pageButtons": {"position": "bottom-center"}},
    "rowsPerPage": 2
  }'
></active-table>

Active circle button

<active-table
  pagination='{
    "styles": {
      "pageButtons": {
        "buttons": {
          "default": {"color": "grey", "stroke": "grey", "backgroundColor": "none", "border":"none", "marginRight": "5px", "marginTop": "3px", "height": "31px", "width": "31px", "borderRadius": "20px"}},
        "activeButton": {"default": {"backgroundColor": "#2e72fd", "border":"none", "color": "white"}},
        "actionButtons": {"default": {"border": "none"}},
        "disabledButtons": {"default": {"backgroundColor": "white"}},
        "firstVisibleButtonOverride": {},
        "lastVisibleButtonOverride": {}
    }},
    "rowsPerPageSelect": false,
    "displayNumberOfVisibleRows": false,
    "positions": {"pageButtons": {"position": "bottom-center"}},
    "rowsPerPage": 2
  }'
></active-table>

Active square button

<active-table
  pagination='{
    "displayFirstLast": false,
    "styles": {
      "pageButtons": {
        "buttons": {
          "default": {"color": "grey", "stroke" :"grey", "backgroundColor": "none", "border":"none", "marginTop": "3px", "borderRadius": "5px"}},
        "activeButton": {"default": {"backgroundColor": "#2e72fd", "border":"none", "color": "white"}},
        "actionButtons": {"default": {"border": "none"}},
        "disabledButtons": {"default": {"backgroundColor": "white"}},
        "firstVisibleButtonOverride": {},
        "lastVisibleButtonOverride": {}
    }},
    "rowsPerPageSelect": false,
    "displayNumberOfVisibleRows": false,
    "positions": {"pageButtons": {"position": "bottom-center"}},
    "rowsPerPage": 2
  }'
></active-table>

Grey background button series

<active-table
  pagination='{
    "styles": {
      "pageButtons": {
        "buttons": {
          "default": {"color": "grey", "border":"unset", "borderRight": "unset", "backgroundColor":"#ececec", "marginTop": "8px"},
          "hover": {"backgroundColor":"white"}},
        "activeButton": {"default": {"backgroundColor": "#0e59ff", "color": "white"}},
        "disabledButtons": {"backgroundColor": "#ececec"},
        "firstVisibleButtonOverride": {"borderTopLeftRadius": "5px", "borderBottomLeftRadius": "5px"},
        "lastVisibleButtonOverride": {"borderTopRightRadius": "5px", "borderBottomRightRadius": "5px"},
        "activeButtonPrecedence": true
    }},
    "rowsPerPageSelect": false,
    "displayNumberOfVisibleRows": false,
    "positions": {"pageButtons": {"position": "bottom-center"}},
    "rowsPerPage": 2
  }'
></active-table>

Disabled buttons not displayed

<active-table
  pagination='{
    "styles": {
      "pageButtons": {
        "buttons": {
          "default": {"color": "grey", "stroke": "grey", "backgroundColor": "none", "border":"none", "marginTop": "3px", "borderRadius": "5px"}},
        "activeButton": {"default": {"backgroundColor": "#2e72fd", "border":"none", "color": "white", "boxShadow": "rgb(55 55 55 / 17%) 0px 2px 5px 1px"}},
        "actionButtons": {"default": {"border": "none"}},
        "disabledButtons": {"visibility": "hidden"},
        "firstVisibleButtonOverride": {},
        "lastVisibleButtonOverride": {}
    }},
    "rowsPerPageSelect": false,
    "displayNumberOfVisibleRows": false,
    "positions": {"pageButtons": {"position": "bottom-center"}},
    "rowsPerPage": 2
  }'
></active-table>