Basic Table

WIP

HTML
View
Context
Info
Notes


        
        <div class="table__wrapper">
    <div class="table__title">
        <h3><span class="table__currency">USD </span><span class="table__description bottom">Russell-IdealRatings Islamic Index</span></h3>
    </div>
    <table class="table">
        <thead>
            <tr>

                <th class="table__cell table__header" scope="col">
                    <a href="#">
          <span>Index Name</span>
          
          <span class="table__sort">
            <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
            <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
          </span>
          
        </a>
                </th>

                <th class="table__cell table__header" scope="col">
                    <a href="#">
          <span>daily</span>
          
          <span class="table__sort">
            <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
            <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
          </span>
          
        </a>
                </th>

                <th class="table__cell table__header" scope="col">
                    <a href="#">
          <span>mtd</span>
          
          <span class="table__sort">
            <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
            <svg class="icon icon-chevron-down active"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
          </span>
          
        </a>
                </th>

                <th class="table__cell table__header" scope="col">
                    <a href="#">
          <span>ytd</span>
          
          <span class="table__sort">
            <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
            <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
          </span>
          
        </a>
                </th>

                <th class="table__cell table__header" scope="col">
                    <a href="#">
          <span>1y</span>
          
          <span class="table__sort">
            <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
            <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
          </span>
          
        </a>
                </th>

                <th class="table__cell table__header" scope="col">
                    <a href="#">
          <span>2y</span>
          
          <span class="table__sort">
            <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
            <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
          </span>
          
        </a>
                </th>

                <th class="table__cell table__header" scope="col">
                    <a href="#">
          <span>3y</span>
          
          <span class="table__sort">
            <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
            <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
          </span>
          
        </a>
                </th>

                <th class="table__cell table__header" scope="col">
                    <a href="#">
          <span>10y</span>
          
          <span class="table__sort">
            <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
            <svg class="icon icon-chevron-down"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
          </span>
          
        </a>
                </th>

            </tr>
        </thead>
        <tbody>

            <tr class="table__row">

                <td data-column="Index Name" class="table__cell"><span class="table__cell--value "><span>Russell-IdealRatings Islamic Developed</span></span>
                </td>

                <td data-column="daily" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="mtd" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="ytd" class="table__cell"><span class="table__cell--value increase"><svg class="icon icon-caret"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg><span>-0.17</span></span>
                </td>

                <td data-column="1y" class="table__cell"><span class="table__cell--value "><span>13.34</span></span>
                </td>

                <td data-column="2y" class="table__cell"><span class="table__cell--value "><span>8.15</span></span>
                </td>

                <td data-column="3y" class="table__cell"><span class="table__cell--value "><span>10.68</span></span>
                </td>

                <td data-column="10y" class="table__cell"><span class="table__cell--value "><span>7.07</span></span>
                </td>

            </tr>

            <tr class="table__row">

                <td data-column="Index Name" class="table__cell"><span class="table__cell--value "><span>Russell-IdealRatings Islamic Emerging Markets</span></span>
                </td>

                <td data-column="daily" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="mtd" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="ytd" class="table__cell"><span class="table__cell--value decrease"><svg class="icon icon-caret"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg><span>-0.17</span></span>
                </td>

                <td data-column="1y" class="table__cell"><span class="table__cell--value "><span>13.34</span></span>
                </td>

                <td data-column="2y" class="table__cell"><span class="table__cell--value "><span>8.15</span></span>
                </td>

                <td data-column="3y" class="table__cell"><span class="table__cell--value "><span>10.68</span></span>
                </td>

                <td data-column="10y" class="table__cell"><span class="table__cell--value "><span>7.07</span></span>
                </td>

            </tr>

            <tr class="table__row">

                <td data-column="Index Name" class="table__cell"><span class="table__cell--value "><span>Russell-IdealRatings Islamic Global</span></span>
                </td>

                <td data-column="daily" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="mtd" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="ytd" class="table__cell"><span class="table__cell--value decrease"><svg class="icon icon-caret"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg><span>-0.17</span></span>
                </td>

                <td data-column="1y" class="table__cell"><span class="table__cell--value "><span>13.34</span></span>
                </td>

                <td data-column="2y" class="table__cell"><span class="table__cell--value "><span>8.15</span></span>
                </td>

                <td data-column="3y" class="table__cell"><span class="table__cell--value "><span>10.68</span></span>
                </td>

                <td data-column="10y" class="table__cell"><span class="table__cell--value "><span>7.07</span></span>
                </td>

            </tr>

            <tr class="table__row">

                <td data-column="Index Name" class="table__cell"><span class="table__cell--value "><span>Russell-IdealRatings Islamic Global Large Cap</span></span>
                </td>

                <td data-column="daily" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="mtd" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="ytd" class="table__cell"><span class="table__cell--value decrease"><svg class="icon icon-caret"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg><span>-0.17</span></span>
                </td>

                <td data-column="1y" class="table__cell"><span class="table__cell--value "><span>13.34</span></span>
                </td>

                <td data-column="2y" class="table__cell"><span class="table__cell--value "><span>8.15</span></span>
                </td>

                <td data-column="3y" class="table__cell"><span class="table__cell--value "><span>10.68</span></span>
                </td>

                <td data-column="10y" class="table__cell"><span class="table__cell--value "><span>7.07</span></span>
                </td>

            </tr>

            <tr class="table__row">

                <td data-column="Index Name" class="table__cell"><span class="table__cell--value "><span>Russell-IdealRatings Islamic Global Small Cap</span></span>
                </td>

                <td data-column="daily" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="mtd" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="ytd" class="table__cell"><span class="table__cell--value decrease"><svg class="icon icon-caret"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg><span>-0.17</span></span>
                </td>

                <td data-column="1y" class="table__cell"><span class="table__cell--value "><span>13.34</span></span>
                </td>

                <td data-column="2y" class="table__cell"><span class="table__cell--value "><span>8.15</span></span>
                </td>

                <td data-column="3y" class="table__cell"><span class="table__cell--value "><span>10.68</span></span>
                </td>

                <td data-column="10y" class="table__cell"><span class="table__cell--value "><span>7.07</span></span>
                </td>

            </tr>

            <tr class="table__row">

                <td data-column="Index Name" class="table__cell"><span class="table__cell--value "><span>Russell-IdealRatings Islamic US Large Cap</span></span>
                </td>

                <td data-column="daily" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="mtd" class="table__cell"><span class="table__cell--value "><span>0.06</span></span>
                </td>

                <td data-column="ytd" class="table__cell"><span class="table__cell--value decrease"><svg class="icon icon-caret"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg><span>-0.17</span></span>
                </td>

                <td data-column="1y" class="table__cell"><span class="table__cell--value "><span>13.34</span></span>
                </td>

                <td data-column="2y" class="table__cell"><span class="table__cell--value "><span>8.15</span></span>
                </td>

                <td data-column="3y" class="table__cell"><span class="table__cell--value "><span>10.68</span></span>
                </td>

                <td data-column="10y" class="table__cell"><span class="table__cell--value "><span>7.07</span></span>
                </td>

            </tr>

        </tbody>
    </table>
</div>


        <div class="table__wrapper">
<div class="table__title"><h3>{% if currency %}<span class="table__currency">{{ currency }} </span>{% endif %}<span class="table__description bottom">{{ title }}</span></h3></div>
  <table class="table">
  <thead>
    <tr>
    {% for header in headers %}
      <th class="table__cell table__header" scope="col">
        <a href="#">
          <span>{{ header.name }}</span>
          {% if header.order %}
          <span class="table__sort">
            <svg class="icon icon-chevron-up"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg>
            <svg class="icon icon-chevron-down{% if header.active %} active{% endif %}"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg>
          </span>
          {% endif %}
        </a>
     </th>
    {% endfor %}
    </tr>
  </thead>
   <tbody>
    {% for item in items %}
    <tr class="table__row">
    {% for cell in item.row %}
      <td data-column="{{ cell.col }}" class="table__cell"><span class="table__cell--value {{ cell.status }}">{% if cell.status %}<svg class="icon icon-caret"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg>{% endif %}<span>{{cell.value}}</span></span></td>
      {% endfor %}
    </tr>
    {% endfor %}
   </tbody>
  </table>
</div>


        
            
            {
  "currency": "USD",
  "title": "Russell-IdealRatings Islamic Index",
  "headers": [
    {
      "name": "Index Name",
      "order": true,
      "active": null
    },
    {
      "name": "daily",
      "order": true,
      "active": null
    },
    {
      "name": "mtd",
      "order": true,
      "active": true
    },
    {
      "name": "ytd",
      "order": true,
      "active": null
    },
    {
      "name": "1y",
      "order": true,
      "active": null
    },
    {
      "name": "2y",
      "order": true,
      "active": null
    },
    {
      "name": "3y",
      "order": true,
      "active": null
    },
    {
      "name": "10y",
      "order": true,
      "active": null
    }
  ],
  "items": [
    {
      "row": [
        {
          "value": "Russell-IdealRatings Islamic Developed",
          "col": "Index Name"
        },
        {
          "value": "0.06",
          "col": "daily"
        },
        {
          "value": "0.06",
          "col": "mtd"
        },
        {
          "value": "-0.17",
          "status": "increase",
          "col": "ytd"
        },
        {
          "value": "13.34",
          "col": "1y"
        },
        {
          "value": "8.15",
          "col": "2y"
        },
        {
          "value": "10.68",
          "col": "3y"
        },
        {
          "value": "7.07",
          "col": "10y"
        }
      ]
    },
    {
      "row": [
        {
          "value": "Russell-IdealRatings Islamic Emerging Markets",
          "col": "Index Name"
        },
        {
          "value": "0.06",
          "col": "daily"
        },
        {
          "value": "0.06",
          "col": "mtd"
        },
        {
          "value": "-0.17",
          "status": "decrease",
          "col": "ytd"
        },
        {
          "value": "13.34",
          "col": "1y"
        },
        {
          "value": "8.15",
          "col": "2y"
        },
        {
          "value": "10.68",
          "col": "3y"
        },
        {
          "value": "7.07",
          "col": "10y"
        }
      ]
    },
    {
      "row": [
        {
          "value": "Russell-IdealRatings Islamic Global",
          "col": "Index Name"
        },
        {
          "value": "0.06",
          "col": "daily"
        },
        {
          "value": "0.06",
          "col": "mtd"
        },
        {
          "value": "-0.17",
          "status": "decrease",
          "col": "ytd"
        },
        {
          "value": "13.34",
          "col": "1y"
        },
        {
          "value": "8.15",
          "col": "2y"
        },
        {
          "value": "10.68",
          "col": "3y"
        },
        {
          "value": "7.07",
          "col": "10y"
        }
      ]
    },
    {
      "row": [
        {
          "value": "Russell-IdealRatings Islamic Global Large Cap",
          "col": "Index Name"
        },
        {
          "value": "0.06",
          "col": "daily"
        },
        {
          "value": "0.06",
          "col": "mtd"
        },
        {
          "value": "-0.17",
          "status": "decrease",
          "col": "ytd"
        },
        {
          "value": "13.34",
          "col": "1y"
        },
        {
          "value": "8.15",
          "col": "2y"
        },
        {
          "value": "10.68",
          "col": "3y"
        },
        {
          "value": "7.07",
          "col": "10y"
        }
      ]
    },
    {
      "row": [
        {
          "value": "Russell-IdealRatings Islamic Global Small Cap",
          "col": "Index Name"
        },
        {
          "value": "0.06",
          "col": "daily"
        },
        {
          "value": "0.06",
          "col": "mtd"
        },
        {
          "value": "-0.17",
          "status": "decrease",
          "col": "ytd"
        },
        {
          "value": "13.34",
          "col": "1y"
        },
        {
          "value": "8.15",
          "col": "2y"
        },
        {
          "value": "10.68",
          "col": "3y"
        },
        {
          "value": "7.07",
          "col": "10y"
        }
      ]
    },
    {
      "row": [
        {
          "value": "Russell-IdealRatings Islamic US Large Cap",
          "col": "Index Name"
        },
        {
          "value": "0.06",
          "col": "daily"
        },
        {
          "value": "0.06",
          "col": "mtd"
        },
        {
          "value": "-0.17",
          "status": "decrease",
          "col": "ytd"
        },
        {
          "value": "13.34",
          "col": "1y"
        },
        {
          "value": "8.15",
          "col": "2y"
        },
        {
          "value": "10.68",
          "col": "3y"
        },
        {
          "value": "7.07",
          "col": "10y"
        }
      ]
    }
  ]
}

Handle: @basic_table
Preview:
- With layout
- Component only
Filesystem Path: src/components/molecules/tables/basic_table.html

There are no notes for this item.

Basic Table

Forms

Input

Select

Select

Logo

Next Prev

Typography

Cards

Blog Card

Contact

Content Piece

Content Section

Filter

Hero

Jumbotron

Navigation

Search Page

Tables

Teasers

Indexes

Blogs

Listing

Governance

Homepage

Index Series

Index Linked Products

Derivatives

Press Releases

Press Releases Listing

Research

Landing Page Layout

Single Column