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" aria-hidden="true" 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" aria-hidden="true" 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"
            }
          ]
        }
      ]
    }
  ]
}) }}