Table ID-SK

Table Jednoduchá tabuľka

(open in a new window)

Code

Markup

<div data-module="idsk-table" id="rozsireny-priklad-1">
    <div class="idsk-table__heading">
        <div class="idsk-table__heading-container">
            <h2 class="govuk-heading-l govuk-!-margin-bottom-4">Štátne sviatky</h2>
            <p class="govuk-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s.</p>
        </div>
    </div>

  

  <table class="idsk-table" >

<thead class="idsk-table__head">
      <tr class="idsk-table__row">
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Dátum
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Deň
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Názov
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
      </tr>
    </thead>
    <tbody class="idsk-table__body" style="">
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">1.Január</td>
            <td class="idsk-table__cell">piatok</td>
            <td class="idsk-table__cell">Deň vzniku Slovenskej republiky</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">5.Júl</td>
            <td class="idsk-table__cell">pondelok</td>
            <td class="idsk-table__cell">Sviatok svätého Cyrila a Metoda</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">29.August</td>
            <td class="idsk-table__cell">nedeľa</td>
            <td class="idsk-table__cell">Výročie SNP</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">1.September</td>
            <td class="idsk-table__cell">streda</td>
            <td class="idsk-table__cell">Deň Ústavy Slovenskej republiky</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">17.November</td>
            <td class="idsk-table__cell">streda</td>
            <td class="idsk-table__cell">Deň boja za slobodu a demokraciu</td>
          </tr>
    </tbody>
  </table>

    <div class="idsk-table__meta">
      <div class="idsk-button-group idsk-table__meta-buttons">

          <button type="button" class="idsk-button idsk-table__meta-print-button" data-module="idsk-button">
  Vytlačiť
</button>
      </div>

    </div>
</div>

Macro

{% from "table/macro.njk" import idskTable %}

{{ idskTable({
  "uniqueId": "rozsireny-priklad-1",
  "title": "Štátne sviatky",
  "caption": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
  "head": [
    {
      "text": "Dátum"
    },
    {
      "text": "Deň"
    },
    {
      "text": "Názov"
    }
  ],
  "rows": [
    [
      {
        "text": "1.Január"
      },
      {
        "text": "piatok"
      },
      {
        "text": "Deň vzniku Slovenskej republiky"
      }
    ],
    [
      {
        "text": "5.Júl"
      },
      {
        "text": "pondelok"
      },
      {
        "text": "Sviatok svätého Cyrila a Metoda"
      }
    ],
    [
      {
        "text": "29.August"
      },
      {
        "text": "nedeľa"
      },
      {
        "text": "Výročie SNP"
      }
    ],
    [
      {
        "text": "1.September"
      },
      {
        "text": "streda"
      },
      {
        "text": "Deň Ústavy Slovenskej republiky"
      }
    ],
    [
      {
        "text": "17.November"
      },
      {
        "text": "streda"
      },
      {
        "text": "Deň boja za slobodu a demokraciu"
      }
    ]
  ],
  "printTable": true
}) }}

Table Zložitá tabuľka

(open in a new window)

Code

Markup

<div data-module="idsk-table" id="rozsireny-priklad-1">
    <div class="idsk-table__heading">
        <div class="idsk-table__heading-container">
            <h2 class="govuk-heading-l govuk-!-margin-bottom-4">Štátne sviatky</h2>
            <p class="govuk-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s.</p>
        </div>
        <div class="idsk-table__heading-extended">
          <div class="govuk-form-group">
            <div class="govuk-radios govuk-radios--inline">
              <fieldset class="govuk-fieldset">
                <legend class="govuk-visually-hidden"></legend>
                  <div class="govuk-radios__item">
                    <input title="Možnosť 1" class="govuk-radios__input" type="radio" name="radio-rozsireny-priklad-1" id="radio-rozsireny-priklad-1-1" value="moznost-1" checked="">
                    <label class="govuk-label govuk-radios__label" for="radio-rozsireny-priklad-1">Možnosť 1</label>
                  </div>
                  <div class="govuk-radios__item">
                    <input title="Možnosť 2" class="govuk-radios__input" type="radio" name="radio-rozsireny-priklad-1" id="radio-rozsireny-priklad-1-2" value="moznost-2" >
                    <label class="govuk-label govuk-radios__label" for="radio-rozsireny-priklad-1">Možnosť 2</label>
                  </div>
              </fieldset>
            </div>
          </div>
        </div>
    </div>

  

  <table class="idsk-table" >

<thead class="idsk-table__head">
      <tr class="idsk-table__row">
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Dátum
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Deň
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Názov
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
      </tr>
    </thead>
    <tbody class="idsk-table__body" style="">
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">1.Január</td>
            <td class="idsk-table__cell">piatok</td>
            <td class="idsk-table__cell">Deň vzniku Slovenskej republiky</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">5.Júl</td>
            <td class="idsk-table__cell">pondelok</td>
            <td class="idsk-table__cell">Sviatok svätého Cyrila a Metoda</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">29.August</td>
            <td class="idsk-table__cell">nedeľa</td>
            <td class="idsk-table__cell">Výročie SNP</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">1.September</td>
            <td class="idsk-table__cell">streda</td>
            <td class="idsk-table__cell">Deň Ústavy Slovenskej republiky</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">17.November</td>
            <td class="idsk-table__cell">streda</td>
            <td class="idsk-table__cell">Deň boja za slobodu a demokraciu</td>
          </tr>
    </tbody>
  </table>

    <div class="idsk-table__meta">
      <div class="idsk-button-group idsk-table__meta-buttons">

          <button type="button" class="idsk-button idsk-table__meta-print-button" data-module="idsk-button">
  Vytlačiť
</button>
      </div>

        <div class="govuk-body idsk-table__meta-source">
          Zdroj: 
            <a class="govuk-link" href="https://www.vlada.gov.sk/statne-sviatky/" target="_blank" title="vlada.gov.sk">vlada.gov.sk</a>
        </div>
    </div>
</div>

Macro

{% from "table/macro.njk" import idskTable %}

{{ idskTable({
  "uniqueId": "rozsireny-priklad-1",
  "title": "Štátne sviatky",
  "caption": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
  "radioOptions": [
    {
      "title": "Možnosť 1",
      "value": "moznost-1"
    },
    {
      "title": "Možnosť 2",
      "value": "moznost-2"
    }
  ],
  "head": [
    {
      "text": "Dátum"
    },
    {
      "text": "Deň"
    },
    {
      "text": "Názov"
    }
  ],
  "rows": [
    [
      {
        "text": "1.Január"
      },
      {
        "text": "piatok"
      },
      {
        "text": "Deň vzniku Slovenskej republiky"
      }
    ],
    [
      {
        "text": "5.Júl"
      },
      {
        "text": "pondelok"
      },
      {
        "text": "Sviatok svätého Cyrila a Metoda"
      }
    ],
    [
      {
        "text": "29.August"
      },
      {
        "text": "nedeľa"
      },
      {
        "text": "Výročie SNP"
      }
    ],
    [
      {
        "text": "1.September"
      },
      {
        "text": "streda"
      },
      {
        "text": "Deň Ústavy Slovenskej republiky"
      }
    ],
    [
      {
        "text": "17.November"
      },
      {
        "text": "streda"
      },
      {
        "text": "Deň boja za slobodu a demokraciu"
      }
    ]
  ],
  "printTable": true,
  "source": {
    "name": "vlada.gov.sk",
    "href": "https://www.vlada.gov.sk/statne-sviatky/"
  }
}) }}