Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK Frontend
  2. Table

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/"
  }
}) }}