ListList

sort
  • Mauris Iaculis Porttitor Posuere. Praesent
  • Lorem Ipsum Dolor Sit Amet
  • In Pellentesque Faucibus Vestibulum. Nulla At
  • Duis Aliquet Egestas Purus
  • Ut In Nulla Enim. Phasellus

  <div data-widget="sort" data-items="li" role="grid" aria-readonly="true" class="ui-sortelements">
    <div role="row">
      <span data-role="sort-trigger" role="columnheader">sort</span>
    </div>
    <ul role="row">
      <li data-role="sort-items" role="gridcell">
        <span>Mauris Iaculis Porttitor Posuere. Praesent</span>
      </li>
      <li data-role="sort-items" role="gridcell">
        <span>Lorem Ipsum Dolor Sit Amet</span>
      </li>
      <li data-role="sort-items" role="gridcell">
        <span>In Pellentesque Faucibus Vestibulum. Nulla At</span>
      </li>
      <li data-role="sort-items" role="gridcell">
        <span>Duis Aliquet Egestas Purus</span>
      </li>
      <li data-role="sort-items" role="gridcell">
        <span>Ut In Nulla Enim. Phasellus</span>
      </li>
    </ul>
  </div>

TableTable

Population, GDP and exchange rate of to countries.
Country Population Date Exchange rate to USD GDP
United States 317,227,000 December 9, 2013 1.00 14,991,300
China 1,361,520,000 December 9, 2013 0.16 7,203,784
Japan 127,290,000 November 1, 2013 0.0097 5,870,357
Germany 80,548,000 May 31, 2013 1.37 3,604,061
France 65,834,000 November 1, 2013 1.37 2,775,518
Total 1,952,419,000     34,445,020

  <table class="table ui-sortelements" data-widget="sort" role="grid" aria-readonly="true">
    <caption>Population, GDP and exchange rate of to countries.</caption>
    <thead>
      <tr role="row">
        <th scope="col" data-role="sort-trigger">Country</th>
        <th scope="col" data-type="numeric" data-role="sort-trigger">Population</th>
        <th scope="col" data-type="date" data-role="sort-trigger">Date</th>
        <th scope="col" data-type="numeric" data-role="sort-trigger">Exchange rate to USD</th>
        <th scope="col" data-type="numeric" data-role="sort-trigger">GDP</th>
      </tr>
    </thead>
    <tbody role="row">
      <tr data-role="sort-items" role="gridcell">
        <th scope="row">United States</th>
        <td>317,227,000</td>
        <td>December 9, 2013</td>
        <td>1.00</td>
        <td>14,991,300</td>
      </tr>
      <tr data-role="sort-items" role="gridcell">
        <th scope="row">China</th>
        <td>1,361,520,000</td>
        <td>December 9, 2013</td>
        <td>0.16</td>
        <td>7,203,784</td>
      </tr>
      <tr data-role="sort-items" role="gridcell">
        <th scope="row">Japan</th>
        <td>127,290,000</td>
        <td>November 1, 2013</td>
        <td>0.0097</td>
        <td>5,870,357</td>
      </tr>
      <tr data-role="sort-items" role="gridcell">
        <th scope="row">Germany</th>
        <td>80,548,000</td>
        <td>May 31, 2013</td>
        <td>1.37</td>
        <td>3,604,061</td>
      </tr>
      <tr data-role="sort-items" role="gridcell">
        <th scope="row">France</th>
        <td>65,834,000</td>
        <td>November 1, 2013</td>
        <td>1.37</td>
        <td>2,775,518</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td>1,952,419,000</td>
        <td> </td>
        <td> </td>
        <td>34,445,020</td>
      </tr>
    </tfoot>
  </table>