Table: Primary

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="table table--zebra table--primary">
    <table>

        <thead>
            <th>Title</th>
            <th>Description</th>
            <th>Type</th>
            <th>Required</th>
        </thead>

        <tbody>

            <tr>
                <td class="table__lead-cell" data-header="Title">Identifier</td>
                <td data-header="Description">The unique identifier for this grant. Made up of your 360Giving prefix, and an identifier from your records. See the 360Giving Grant identifier guidance for details.</td>
                <td data-header="Type"><code>string</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Title</td>
                <td data-header="Description">A title for this grant activity. This should be under 140 characters long.</td>
                <td data-header="Type"><code>string</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Description</td>
                <td data-header="Description">A short description of this grant activity.</td>
                <td data-header="Type"><code>string</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Currency</td>
                <td data-header="Description">The currency used in amounts. Use the three-letter <a href='#'>currency code from ISO 4217</a> eg: Use GBP for Pounds Sterling.</td>
                <td data-header="Type"><code>string</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Amount Applied For</td>
                <td data-header="Description">Total amount applied for in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the application transactions for this grant.</td>
                <td data-header="Type"><code>number</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--false">close</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Amount Awarded</td>
                <td data-header="Description">Total amount awarded in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the award transactions for this grant.</td>
                <td data-header="Type"><code>number</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Amount Disbursed</td>
                <td data-header="Description">Total amount disbursed (paid) to this grantee when this record was last updated (in numbers: do not include commas or currency symbols such as £)). If you have provided detailed transaction information on a separate table, this should equal the sum of all the disbursement transactions for this grant.</td>
                <td data-header="Type"><code>number</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--false">close</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Award Date</td>
                <td data-header="Description">When was the decision to award this grant made. The date should be written as YYYY-MM-DD, or in full date-time format.</td>
                <td data-header="Type"><code>string</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

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


        <div class="table table--zebra table--primary">
  <table>
    {% if header %}
    <thead>
      <th>{{ header.th1 }}</th>
      <th>{{ header.th2 }}</th>
      <th>{{ header.th3 }}</th>
      <th>{{ header.th4 }}</th>
    </thead>
    {% endif %}
    <tbody>
      {% for i in body %}
      <tr>
        <td class="table__lead-cell" data-header="{{ header.th1 }}">{{ i.row.cell1 | safe }}</td>
        <td data-header="{{ header.th2 }}">{{ i.row.cell2 | safe }}</td>
        <td data-header="{{ header.th3 }}"><code>{{ i.row.cell3 | safe }}</code></td>
        <td data-header="{{ header.th4 }}"class="table__checks">
          {% if i.row.cell4 %}
          <i class="material-icons table--{{i.row.cell4}}">check</i>
          {% else %}
          <i class="material-icons table--{{i.row.cell4}}">close</i>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>


        
            
            {
  "header": {
    "th1": "Title",
    "th2": "Description",
    "th3": "Type",
    "th4": "Required"
  },
  "body": [
    {
      "row": {
        "cell1": "Identifier",
        "cell2": "The unique identifier for this grant. Made up of your 360Giving prefix, and an identifier from your records. See the 360Giving Grant identifier guidance for details.",
        "cell3": "string",
        "cell4": true
      }
    },
    {
      "row": {
        "cell1": "Title",
        "cell2": "A title for this grant activity. This should be under 140 characters long.",
        "cell3": "string",
        "cell4": true
      }
    },
    {
      "row": {
        "cell1": "Description",
        "cell2": "A short description of this grant activity.",
        "cell3": "string",
        "cell4": true
      }
    },
    {
      "row": {
        "cell1": "Currency",
        "cell2": "The currency used in amounts. Use the three-letter <a href='#'>currency code from ISO 4217</a> eg: Use GBP for Pounds Sterling.",
        "cell3": "string",
        "cell4": true
      }
    },
    {
      "row": {
        "cell1": "Amount Applied For",
        "cell2": "Total amount applied for in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the application transactions for this grant.",
        "cell3": "number",
        "cell4": false
      }
    },
    {
      "row": {
        "cell1": "Amount Awarded",
        "cell2": "Total amount awarded in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the award transactions for this grant.",
        "cell3": "number",
        "cell4": true
      }
    },
    {
      "row": {
        "cell1": "Amount Disbursed",
        "cell2": "Total amount disbursed (paid) to this grantee when this record was last updated (in numbers: do not include commas or currency symbols such as £)). If you have provided detailed transaction information on a separate table, this should equal the sum of all the disbursement transactions for this grant.",
        "cell3": "number",
        "cell4": false
      }
    },
    {
      "row": {
        "cell1": "Award Date",
        "cell2": "When was the decision to award this grant made. The date should be written as YYYY-MM-DD, or in full date-time format.",
        "cell3": "string",
        "cell4": true
      }
    }
  ]
}

File:

Content:


                                .table {
  --table-border-hsl: var(--base-hsl);
  --table-text-hsl: var(--base-hsl);
  --table-bg-hsl: var(--base-hsl);

  font-size: .9rem;
  border: 1px solid hsla(var(--table-border-hsl), .2);
  border-radius: 3px;

  table { margin: 0; }

  a {
    font-weight: inherit;
    text-decoration: underline;
    text-underline-position: under;
  }

  th, td {
    padding: 8px;
    vertical-align: top;
    color: hsla(var(--table-text-hsl), 1);
    display: block;
    @include breakpoint($medium) {
      display: table-cell;
      padding: 8px 16px;
    }
  }

  th { background-color: hsla(var(--table-bg-hsl), .1); }
  tr + tr { border-top: 1px solid hsla(var(--table-bg-hsl), .2); }

  th {
    display: none;
    @include breakpoint($medium) { display: table-cell; }
  }

  td {
    display: block;
    @include breakpoint($medium) { display: table-cell; }
  }
}

.table {
  @include breakpoint($small-only) {
    td:before {
      content: attr(data-header);
      display: block;
      font-weight: 400;
      background-color: hsla(var(--table-bg-hsl), .1);
      margin: -8px -8px 4px -8px;
      padding: 4px 8px;
    }
  }
}

.table--zebra {
  tr:nth-of-type(even) { background-color: hsla(var(--table-bg-hsl), .04); }
}

.table__lead-cell {
  font-weight: 500;
  min-width: 180px;
}

.table__checks {
  @include breakpoint($medium) { text-align: center; }
}

.table--true  { color: hsla(var(--teal-dark-hsl), 1); }
.table--false { color: hsla(var(--red-hsl), 1);; }

/* Primary styling */
.table--primary {
  border: none;
  border-bottom: 1px solid $orange-tint-lighter;

  th {
    background: $orange-tint-lighter;
    font-size: 20px;
    font-weight: 700;
    padding: 16px 14px;
    border: none;
  }

  thead {
    tr:first-of-type {
      border-radius: 3px 3px 0px 0px;

      th:first-of-type {
        border-top-left-radius: 3px;
      }

      th:last-of-type {
        border-top-right-radius: 3px;
      }
    }
  }

  tr {
    border: none;

    td + td {
      border-left: 1px solid $orange-tint-lighter;
    }

    &:nth-of-type(odd) {
      background: $orange-tint-fade;
    }

    &:nth-of-type(even) {
      background: $orange-tint-light;
    }

    + tr {
      border: none;
    }
  }
}

.table--primary-light {
  table {
    border: solid 1px $orange-tint-light;
  }

  th {
    background: $orange-tint-lightest;
  }

  td {
    border: solid 1px $orange-tint-light;
  }
}

/* Secondary styling */
.table--secondary {
  border: none;
  border-bottom: 1px solid $yellow-tint-dark;

  th {
    background: $yellow-tint-dark;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 14px;
    border: none;
  }

  thead {
    tr:first-of-type {
      border-radius: 3px 3px 0px 0px;

      th:first-of-type {
        border-top-left-radius: 3px;
      }

      th:last-of-type {
        border-top-right-radius: 3px;
      }
    }
  }

  tr {
    border: none;

    td + td {
      border-left: 1px solid $yellow-tint-dark;
    }

    &:nth-of-type(odd) {
      background: $yellow-tint-fade;
    }

    &:nth-of-type(even) {
      background: $yellow-tint-light;
    }

    + tr {
      border: none;
    }
  }
}


.table--small {
  width: 100%;
  border: none;
  border-bottom: 1px solid $orange-tint-lighter;

  th {
    background: $orange-tint-lighter;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 14px;
    border: none;
  }

  thead {
    tr:first-of-type {
      border-radius: 3px 3px 0px 0px;

      th:first-of-type {
        border-top-left-radius: 3px;
      }

      th:last-of-type {
        border-top-right-radius: 3px;
      }
    }
  }

  tr {
    border: none;

    td + td {
      border-left: 1px solid $orange-tint-lighter;
    }

    &:nth-of-type(odd) {
      background: $orange-tint-fade;
    }

    &:nth-of-type(even) {
      background: $orange-tint-light;
    }

    + tr {
      border: none;
    }
  }
}

URL: /components/raw/table/table.scss
Filesystem Path: src/components/03-components/table/table.scss
Size: 3.9 KB

Handle: @table--primary
Variants (4): Default , Publishers , Primary , Secondary
Preview:
- With layout
- Component only
Filesystem Path: src/components/03-components/table/table--primary.njk
Referenced by (1): @grant-nav--grant-page

No notes defined.