DAHLIA Pattern Library

Table Pagination 

<nav class="table-pagination" role="navigation">
    <div class="table-pagination_action">
        <button class="button tertiary" disabled type="button" data-event="">Previous</button>
    </div>
    <div class="table-pagination_center">
        <span class="table-pagination_pagesize">
      Show
      <span class="table-pagination_pagerows">
      <label for="rows" class="sr-only">Label</label>
      <select name="rows" id="rows" class="" data-width="auto">
        <option value="">20 rows</option>
          <option value="1">Option 1</option>
      	<option value="2">Option 2</option>
      	<option value="3">Option 3</option>
      	<option value="4">Option 4</option>
      	<option value="5">Option 5</option>
      	<option value="6">Option 6</option>
      </select>      </span>
        </span>
        <span class="table-pagination_pageinfo">
      Jump to page
      <span class="table-pagination_pagejump">
        <label for="page" class="sr-only">Label</label>
        <select name="page" id="page" class="" data-width="auto">
          <option value="">1</option>
            <option value="1">Option 1</option>
        	<option value="2">Option 2</option>
        	<option value="3">Option 3</option>
        	<option value="4">Option 4</option>
        	<option value="5">Option 5</option>
        	<option value="6">Option 6</option>
        </select>      </span> of 6
        </span>
    </div>
    <div class="table-pagination_action">
        <button class="button tertiary" type="button" data-event="">Next</button>
    </div>
</nav>
 
<nav class="table-pagination" role="navigation">
  <div class="table-pagination_action">
    {{> @button text="Previous" state="disabled" classes="tertiary"}}
  </div>
  <div class="table-pagination_center">
    <span class="table-pagination_pagesize">
      Show
      <span class="table-pagination_pagerows">
      {{> @select name="rows" placeholder="20 rows" options=inputs.rows}}
      </span>
    </span>
    <span class="table-pagination_pageinfo">
      Jump to page
      <span class="table-pagination_pagejump">
        {{> @select name="page" placeholder="1" options=inputs.pages}}
      </span>
      of 6
    </span>
  </div>
  <div class="table-pagination_action">
    {{> @button text="Next" classes="tertiary"}}
  </div>
</nav>
 
{
  "menus": {
    "account": [
      {
        "name": "My Dashboard",
        "icon": "profile"
      },
      {
        "name": "My Applications",
        "icon": "application"
      },
      {
        "name": "My Favorites",
        "icon": "favorite"
      },
      {
        "name": "Eligibility Settings",
        "icon": "eligibility"
      },
      {
        "name": "Account Settings",
        "icon": "settings"
      },
      {
        "name": "Sign Out"
      }
    ],
    "mobile": [
      {
        "name": "Browse Properties",
        "icon": "browse"
      },
      {
        "name": "Get Assistance",
        "icon": "assistance"
      },
      {
        "name": "My Favorites",
        "icon": "favorite"
      },
      {
        "name": "Eligibility Settings",
        "icon": "eligibility"
      },
      {
        "name": "Account Settings",
        "icon": "settings"
      },
      {
        "name": "Sign Out"
      }
    ],
    "lang": [
      {
        "name": "English",
        "active": true,
        "url": "application-expect.html",
        "selected": true,
        "index": null,
        "id": "panel1"
      },
      {
        "name": "Español",
        "url": "application-expect--es.html",
        "selected": null,
        "index": -1,
        "id": "panel2"
      },
      {
        "name": "中文",
        "chinese": true,
        "url": "application-expect--zh.html",
        "selected": null,
        "index": -1,
        "id": "panel3"
      },
      {
        "name": "Filipino",
        "url": "#",
        "selected": null,
        "index": -1,
        "id": "panel4"
      }
    ]
  }
}

There are no notes for this item.