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

Doména gov.sk je oficá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 filter

Table filter ID-SK

Table filter simple

(open in a new window)
Code

Markup




<div data-module="idsk-table-filter" id="simple-filter" class="idsk-table-filter ">
  <div class="idsk-table-filter__panel idsk-table-filter__inputs">
    <div class="idsk-table-filter__title govuk-heading-m">Filtrovať obsah</div>
      <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="0"
          data-open-text="Rozbaliť obsah filtra"
          data-close-text="Zbaliť obsah filtra"
          data-category-name=""
          aria-label="Rozbaliť obsah filtra"
          type="button">
    Rozbaliť obsah filtra
  </button>

    <form class="idsk-table-filter__content" action="#">
        <div class="govuk-grid-row idsk-table-filter__filter-inputs">
              <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="filter1">
          Filter 1
        </label>
          <select tabindex="-1" class="govuk-select" id="filter1" name="filter1">
              <option  
                value="">Text</option>
              <option  
                value="filter1-1">Filter1-1</option>
              <option  
                value="filter1-2">Filter1-2</option>
              <option  
                value="filter1-3">Filter1-3</option>
          </select>
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="filter2">
          Filter 2
        </label>
          <select tabindex="-1" class="govuk-select" id="filter2" name="filter2">
              <option  
                value="">Text</option>
              <option  
                value="filter2-1">Filter2-1</option>
              <option  
                value="filter2-2">Filter2-2</option>
              <option  
                value="filter2-3">Filter2-3</option>
          </select>
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="filter3">
          Filter 3
        </label>
          <select tabindex="-1" class="govuk-select" id="filter3" name="filter3">
              <option  
                value="">Text</option>
              <option  
                value="filter3-1">Filter2-1</option>
              <option  
                value="filter3-2">Filter2-2</option>
              <option  
                value="filter3-3">Filter2-3</option>
          </select>
      </div>
    </div>

        </div>
      <button type="submit" class="idsk-button submit-table-filter" disabled="disabled">
        Filtrovať (<span class="count">0</span>)
      </button>
    </form>
  </div>
  <div class="idsk-table-filter__panel idsk-table-filter__active-filters idsk-table-filter__active-filters__hide idsk-table-filter--expanded"
       data-remove-filter="Zrušiť filter"
       data-remove-all-filters="Zrušiť všetko">
    <div class="govuk-body idsk-table-filter__title">Aktívny filter</div>
      <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="0"
          data-open-text="Rozbaliť aktívny filter"
          data-close-text="Zbaliť aktívny filter"
          data-category-name=""
          aria-label="Zbaliť aktívny filter"
          type="button">
    Zbaliť aktívny filter
  </button>

    <div class="govuk-clearfix idsk-table-filter__content"></div>
  </div>
</div>

Macro

{% from "table-filter/macro.njk" import idskTableFilter %}

{{ idskTableFilter({
  "id": "simple-filter",
  "filters": [
    {
      "id": "filter1",
      "inputTitle": "Filter 1",
      "options": [
        {
          "value": "",
          "inputTitle": "Text"
        },
        {
          "value": "filter1-1",
          "inputTitle": "Filter1-1"
        },
        {
          "value": "filter1-2",
          "inputTitle": "Filter1-2"
        },
        {
          "value": "filter1-3",
          "inputTitle": "Filter1-3"
        }
      ]
    },
    {
      "id": "filter2",
      "inputTitle": "Filter 2",
      "options": [
        {
          "value": "",
          "inputTitle": "Text"
        },
        {
          "value": "filter2-1",
          "inputTitle": "Filter2-1"
        },
        {
          "value": "filter2-2",
          "inputTitle": "Filter2-2"
        },
        {
          "value": "filter2-3",
          "inputTitle": "Filter2-3"
        }
      ]
    },
    {
      "id": "filter3",
      "inputTitle": "Filter 3",
      "options": [
        {
          "value": "",
          "inputTitle": "Text"
        },
        {
          "value": "filter3-1",
          "inputTitle": "Filter2-1"
        },
        {
          "value": "filter3-2",
          "inputTitle": "Filter2-2"
        },
        {
          "value": "filter3-3",
          "inputTitle": "Filter2-3"
        }
      ]
    }
  ]
}) }}

Table filter advanced

(open in a new window)
Code

Markup




<div data-module="idsk-table-filter" id="advanced-filter" class="idsk-table-filter ">
  <div class="idsk-table-filter__panel idsk-table-filter__inputs">
    <div class="idsk-table-filter__title govuk-heading-m">Filtrovať obsah</div>
      <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="0"
          data-open-text="Rozbaliť obsah filtra"
          data-close-text="Zbaliť obsah filtra"
          data-category-name=""
          aria-label="Rozbaliť obsah filtra"
          type="button">
    Rozbaliť obsah filtra
  </button>

    <form class="idsk-table-filter__content" action="#">
          <div class="idsk-table-filter__category">
            <div class="idsk-table-filter__title govuk-heading-s">Bydlisko <span class="count"></span></div>
              <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="-1"
          data-open-text="Rozbaliť sekciu filtra"
          data-close-text="Zbaliť sekciu filtra"
          data-category-name="Bydlisko"
          aria-label="Rozbaliť sekciu filtra Bydlisko"
          type="button">
    Rozbaliť sekciu filtra
  </button>

            <div class="idsk-table-filter__content">
              <div class="govuk-grid-row idsk-table-filter__filter-inputs">
                    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="bydlisko-filter1">
          Label
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="bydlisko-filter1" name="bydlisko-filter1"
                 placeholder="Label"
                 aria-label="Label">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="bydlisko-filter2">
          Filter 2
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="bydlisko-filter2" name="bydlisko-filter2"
                 placeholder="Filter 2"
                 aria-label="Filter 2">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="bydlisko-filter3">
          Filter 3
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="bydlisko-filter3" name="bydlisko-filter3"
                 placeholder="Filter 3"
                 aria-label="Filter 3">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="bydlisko-filter4">
          Filter6
        </label>
          <select tabindex="-1" class="govuk-select" id="bydlisko-filter4" name="bydlisko-filter4">
              <option  
                value="">Text</option>
              <option  
                value="bydlisko-filter4-1">Bydlisko-filter4-1</option>
              <option  
                value="bydlisko-filter4-2">Bydlisko-filter4-2</option>
              <option  
                value="bydlisko-filter4-3">Bydlisko-filter4-3</option>
          </select>
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="bydlisko-filter5">
          Filter6
        </label>
          <select tabindex="-1" class="govuk-select" id="bydlisko-filter5" name="bydlisko-filter5">
              <option  
                value="">Text</option>
              <option  
                value="bydlisko-filter5-1">Bydlisko-filter6-1</option>
              <option  
                value="bydlisko-filter5-2">Bydlisko-filter6-2</option>
              <option  
                value="bydlisko-filter5-3">Bydlisko-filter6-3</option>
          </select>
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="bydlisko-filter6">
          Filter6
        </label>
          <select tabindex="-1" class="govuk-select" id="bydlisko-filter6" name="bydlisko-filter6">
              <option  
                value="">Text</option>
              <option  
                value="bydlisko-filter6-1">Bydlisko-filter6-1</option>
              <option  
                value="bydlisko-filter6-2">Bydlisko-filter6-2</option>
              <option  
                value="bydlisko-filter6-3">Bydlisko-filter6-3</option>
          </select>
      </div>
    </div>

              </div>
            </div>
          </div>
          <div class="idsk-table-filter__category">
            <div class="idsk-table-filter__title govuk-heading-s">Názov inštitúcie <span class="count"></span></div>
              <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="-1"
          data-open-text="Rozbaliť sekciu filtra"
          data-close-text="Zbaliť sekciu filtra"
          data-category-name="Názov inštitúcie"
          aria-label="Rozbaliť sekciu filtra Názov inštitúcie"
          type="button">
    Rozbaliť sekciu filtra
  </button>

            <div class="idsk-table-filter__content">
              <div class="govuk-grid-row idsk-table-filter__filter-inputs">
                    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="filter5">
          Filter5
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="filter5" name="filter5"
                 placeholder="Filter5"
                 aria-label="Filter5">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="filter6">
          Filter6
        </label>
          <select tabindex="-1" class="govuk-select" id="filter6" name="filter6">
              <option  
                value="">Vyber filter</option>
              <option  
                value="filter6-1">Filter6-1</option>
              <option  
                value="filter6-2">Filter6-2</option>
              <option  
                value="filter6-3">Filter6-3</option>
          </select>
      </div>
    </div>

              </div>
            </div>
          </div>
          <div class="idsk-table-filter__category">
            <div class="idsk-table-filter__title govuk-heading-s">Parametre <span class="count"></span></div>
              <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="-1"
          data-open-text="Rozbaliť sekciu filtra"
          data-close-text="Zbaliť sekciu filtra"
          data-category-name="Parametre"
          aria-label="Rozbaliť sekciu filtra Parametre"
          type="button">
    Rozbaliť sekciu filtra
  </button>

            <div class="idsk-table-filter__content">
              <div class="govuk-grid-row idsk-table-filter__filter-inputs">
                    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="filter7">
          Filter 7
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="filter7" name="filter7"
                 placeholder="Filter 7"
                 aria-label="Filter 7">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="filter8">
          Filter 8
        </label>
          <select tabindex="-1" class="govuk-select" id="filter8" name="filter8">
              <option  
                value="">Vyber filter</option>
              <option  
                value="filter8-1">Filter8-1</option>
              <option  
                value="filter8-2">Filter8-2</option>
              <option  
                value="filter8-3">Filter8-3</option>
          </select>
      </div>
    </div>

              </div>
            </div>
          </div>
      <button type="submit" class="idsk-button submit-table-filter" disabled="disabled">
        Filtrovať (<span class="count">0</span>)
      </button>
    </form>
  </div>
  <div class="idsk-table-filter__panel idsk-table-filter__active-filters idsk-table-filter__active-filters__hide idsk-table-filter--expanded"
       data-remove-filter="Zrušiť filter"
       data-remove-all-filters="Zrušiť všetko">
    <div class="govuk-body idsk-table-filter__title">Aktívny filter</div>
      <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="0"
          data-open-text="Rozbaliť aktívny filter"
          data-close-text="Zbaliť aktívny filter"
          data-category-name=""
          aria-label="Zbaliť aktívny filter"
          type="button">
    Zbaliť aktívny filter
  </button>

    <div class="govuk-clearfix idsk-table-filter__content"></div>
  </div>
</div>

Macro

{% from "table-filter/macro.njk" import idskTableFilter %}

{{ idskTableFilter({
  "id": "advanced-filter",
  "categories": [
    {
      "title": "Bydlisko",
      "filters": [
        {
          "id": "bydlisko-filter1",
          "inputTitle": "Label"
        },
        {
          "id": "bydlisko-filter2",
          "inputTitle": "Filter 2"
        },
        {
          "id": "bydlisko-filter3",
          "inputTitle": "Filter 3"
        },
        {
          "id": "bydlisko-filter4",
          "inputTitle": "Filter6",
          "options": [
            {
              "value": "",
              "inputTitle": "Text"
            },
            {
              "value": "bydlisko-filter4-1",
              "inputTitle": "Bydlisko-filter4-1"
            },
            {
              "value": "bydlisko-filter4-2",
              "inputTitle": "Bydlisko-filter4-2"
            },
            {
              "value": "bydlisko-filter4-3",
              "disabled": true,
              "inputTitle": "Bydlisko-filter4-3"
            }
          ]
        },
        {
          "id": "bydlisko-filter5",
          "inputTitle": "Filter6",
          "options": [
            {
              "value": "",
              "inputTitle": "Text"
            },
            {
              "value": "bydlisko-filter5-1",
              "inputTitle": "Bydlisko-filter6-1"
            },
            {
              "value": "bydlisko-filter5-2",
              "inputTitle": "Bydlisko-filter6-2"
            },
            {
              "value": "bydlisko-filter5-3",
              "disabled": true,
              "inputTitle": "Bydlisko-filter6-3"
            }
          ]
        },
        {
          "id": "bydlisko-filter6",
          "inputTitle": "Filter6",
          "options": [
            {
              "value": "",
              "inputTitle": "Text"
            },
            {
              "value": "bydlisko-filter6-1",
              "inputTitle": "Bydlisko-filter6-1"
            },
            {
              "value": "bydlisko-filter6-2",
              "inputTitle": "Bydlisko-filter6-2"
            },
            {
              "value": "bydlisko-filter6-3",
              "disabled": true,
              "inputTitle": "Bydlisko-filter6-3"
            }
          ]
        }
      ]
    },
    {
      "title": "Názov inštitúcie",
      "filters": [
        {
          "id": "filter5",
          "inputTitle": "Filter5"
        },
        {
          "id": "filter6",
          "inputTitle": "Filter6",
          "options": [
            {
              "value": "",
              "inputTitle": "Vyber filter"
            },
            {
              "value": "filter6-1",
              "inputTitle": "Filter6-1"
            },
            {
              "value": "filter6-2",
              "inputTitle": "Filter6-2"
            },
            {
              "value": "filter6-3",
              "disabled": true,
              "inputTitle": "Filter6-3"
            }
          ]
        }
      ]
    },
    {
      "title": "Parametre",
      "filters": [
        {
          "id": "filter7",
          "inputTitle": "Filter 7"
        },
        {
          "id": "filter8",
          "inputTitle": "Filter 8",
          "options": [
            {
              "value": "",
              "inputTitle": "Vyber filter"
            },
            {
              "value": "filter8-1",
              "inputTitle": "Filter8-1",
              "disabled": true
            },
            {
              "value": "filter8-2",
              "inputTitle": "Filter8-2",
              "selected": true
            },
            {
              "value": "filter8-3",
              "disabled": true,
              "inputTitle": "Filter8-3"
            }
          ]
        }
      ]
    }
  ]
}) }}