<div class="extended-table" id="extended-table-19548-17219">
<div class="extended-table__bar">
<div class="extended-table__search">
<form id="extended-table-19548-17219-search" class="inline-form inline-form--small" method="get">
<div class="inline-form__large-input">
<div id="extended-table-19548-17219-search-input" class="large-input has-overlay-link">
<label for="extended-table-19548-17219-search-input-input" class="large-input__label">Suchbegriff</label>
<input class="large-input__input" id="extended-table-19548-17219-search-input-input" name="search" type="text">
</div>
</div>
<div class="inline-form__submit">
<button class="icon-button" type="submit" title="Suche">
<span class="icon-button__icon">
<svg class="icon icon--search" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#search"></use>
</svg> </span>
</button>
</div>
</form>
</div>
<div class="extended-table__settings">
<button class="icon-button" type="button" data-overlay="extended-table-19548-17219-settings">
<span class="icon-button__icon">
<svg class="icon icon--gear" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#gear"></use>
</svg> </span>
<span class="icon-button__text u-underline">Filtern und sortieren</span>
</button>
<div id="extended-table-19548-17219-settings" class="overlay overlay--slim" hidden aria-labelledby="extended-table-19548-17219-settings-headline" data-destroy-after-close="false" data-redirect-after-close="false">
<div class="overlay__backdrop"></div>
<div class="overlay__overlay u-inverted" role="document">
<div class="overlay__bar">
<button class="overlay__close" type="button" title="Schließen">
<svg class="icon icon--cross" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross"></use>
</svg> </button>
</div>
<div class="overlay__content">
<div class="overlay__headline">
<h2 id="extended-table-19548-17219-settings-headline" class="headline headline--2"><span class="headline__text">Filtern und sortieren</span></h2>
</div>
<div class="overlay__blocks">
<div class="overlay__block">
<form id="extended-table-19548-17219-settings-content" class="filters" method="get">
<div class="filters__filters">
<details id="extended-table-19548-17219-settings-content-filter-1" class="filters__filter" open>
<summary class="filters__filter-summary has-underline">
<div class="filters__filter-summary-inner">
<span class="filters__filter-summary-text u-underline">Anzeige</span>
<svg class="icon icon--caret-down-alt filters__filter-summary-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
</svg>
</div>
</summary>
<div class="filters__filter-fields">
<div class="filters__filter-field">
<div id="extended-table-19548-17219-settings-content-filter-1-field-1" class="field">
<label class="field__label u-hidden-visually" for="extended-table-19548-17219-settings-content-filter-1-field-1-control">
<span class="label">Einträge pro Seite</span>
</label>
<div id="extended-table-19548-17219-settings-content-filter-1-field-1-errors" class="field__errors" hidden>
<div class="notice notice--error">
<svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
</svg>
<span class="notice__text"></span>
</div>
</div>
<div class="field__controls field__controls--stacked">
<div class="field__control">
<div class="input">
<div class="input__inner">
<select class="input__input input__input--select" id="extended-table-19548-17219-settings-content-filter-1-field-1-control" name="select">
<option class="input__option" value="10">10 pro Seite</option>
<option class="input__option" value="25">25 pro Seite</option>
<option class="input__option" value="50">50 pro Seite</option>
</select> <svg class="icon icon--caret-down input__icon input__icon--select" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="field__footer">
</div>
</div>
</div>
</div>
</details>
</div>
<div class="filters__actions">
<div class="filters__submit">
<button class="button u-underline" type="submit">Filtern und sortieren</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="extended-table__content">
<div class="extended-table__table-wrapper">
<table class="extended-table__table">
<thead class="extended-table__table-head">
<tr>
<th class="extended-table__hcell has-overlay-link" scope="col">
<span class="extended-table__hcell-text">Note 1. Staatsexamen</span>
<span class="extended-table__hcell-sorting">
<span class="u-hidden-visually">(unsortiert)</span>
<a class="navigation-button u-overlay-link" title="Aufsteigend sortieren nach Note 1. Staatsexamen" href="#">
<svg class="icon icon--sort-default" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#sort-default"></use>
</svg></a>
</span>
</th>
<th class="extended-table__hcell has-overlay-link" scope="col">
<span class="extended-table__hcell-text">Note 2. Staatsexamen</span>
<span class="extended-table__hcell-sorting">
<span class="u-hidden-visually">(aufsteigend sortiert)</span>
<a class="navigation-button u-overlay-link" title="Absteigend sortieren nach Note 2. Staatsexamen" href="#">
<svg class="icon icon--sort-asc" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#sort-asc"></use>
</svg></a>
</span>
</th>
<th class="extended-table__hcell has-overlay-link" scope="col">
<span class="extended-table__hcell-text">TOEFL</span>
<span class="extended-table__hcell-sorting">
<span class="u-hidden-visually">(unsortiert)</span>
<a class="navigation-button u-overlay-link" title="Aufsteigend sortieren nach TOEFL" href="#">
<svg class="icon icon--sort-default" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#sort-default"></use>
</svg></a>
</span>
</th>
<th class="extended-table__hcell has-overlay-link" scope="col">
<span class="extended-table__hcell-text">IELTS</span>
<span class="extended-table__hcell-sorting">
<span class="u-hidden-visually">(unsortiert)</span>
<a class="navigation-button u-overlay-link" title="Aufsteigend sortieren nach IELTS" href="#">
<svg class="icon icon--sort-default" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#sort-default"></use>
</svg></a>
</span>
</th>
<th class="extended-table__hcell has-overlay-link" scope="col">
<span class="extended-table__hcell-text">Promotion</span>
<span class="extended-table__hcell-sorting">
<span class="u-hidden-visually">(unsortiert)</span>
<a class="navigation-button u-overlay-link" title="Aufsteigend sortieren nach Promotion" href="#">
<svg class="icon icon--sort-default" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#sort-default"></use>
</svg></a>
</span>
</th>
<th class="extended-table__hcell has-overlay-link" scope="col">
<span class="extended-table__hcell-text">Zeitpunkt der Bewerbung</span>
<span class="extended-table__hcell-sorting">
<span class="u-hidden-visually">(unsortiert)</span>
<a class="navigation-button u-overlay-link" title="Aufsteigend sortieren nach Zeitpunkt der Bewerbung" href="#">
<svg class="icon icon--sort-default" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#sort-default"></use>
</svg></a>
</span>
</th>
<th class="extended-table__hcell has-overlay-link" scope="col">
<span class="extended-table__hcell-text">Praxiserfahrung</span>
</th>
<th class="extended-table__hcell has-overlay-link" scope="col">
<span class="extended-table__hcell-text">Law School</span>
</th>
<th class="extended-table__hcell has-overlay-link" scope="col">
<span class="extended-table__hcell-text">Bewerbung erfolgreich?</span>
</th>
</tr>
<tr>
<th class="extended-table__fcell">
<button id="extended-table-19548-17219-filter-button-1" class="extended-table__filter-button" type="button" title="Spalte filtern: Note 1. Staatsexamen" aria-haspopup="true" aria-controls="extended-table-19548-17219-filters-1" aria-expanded="false">
<span class="extended-table__filter-button-text u-underline">Alle</span>
<svg class="icon icon--caret-down extended-table__filter-button-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down"></use>
</svg> </button>
<ul class="extended-table__filters" id="extended-table-19548-17219-filters-1" role="menu" aria-label="Spalte filtern: Note 1. Staatsexamen">
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem" aria-current="true">
<span class="extended-table__filter-link-text u-underline">Alle</span>
<svg class="icon icon--check-alt extended-table__filter-link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
</svg> </a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">unter 7</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">7,0 - 7,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">8,0 - 8,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">9,0 - 9,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">10,0 - 10,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">11,0 - 11,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">12,0 - 12,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">13,0 - 13,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">14,0 - 18</span>
</a>
</li>
</ul>
</th>
<th class="extended-table__fcell">
<button id="extended-table-19548-17219-filter-button-2" class="extended-table__filter-button" type="button" title="Spalte filtern: Note 2. Staatsexamen" aria-haspopup="true" aria-controls="extended-table-19548-17219-filters-2" aria-expanded="false">
<span class="extended-table__filter-button-text u-underline">Alle</span>
<svg class="icon icon--caret-down extended-table__filter-button-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down"></use>
</svg> </button>
<ul class="extended-table__filters" id="extended-table-19548-17219-filters-2" role="menu" aria-label="Spalte filtern: Note 2. Staatsexamen">
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem" aria-current="true">
<span class="extended-table__filter-link-text u-underline">Alle</span>
<svg class="icon icon--check-alt extended-table__filter-link-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
</svg> </a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">unter 7</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">7,0 - 7,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">8,0 - 8,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">9,0 - 9,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">10,0 - 10,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">11,0 - 11,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">12,0 - 12,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">13,0 - 13,9</span>
</a>
</li>
<li class="extended-table__filter" role="presentation">
<a class="extended-table__filter-link" href="#" role="menuitem">
<span class="extended-table__filter-link-text u-underline">14,0 - 18</span>
</a>
</li>
</ul>
</th>
<th class="extended-table__fcell">
</th>
<th class="extended-table__fcell">
</th>
<th class="extended-table__fcell">
</th>
<th class="extended-table__fcell">
</th>
<th class="extended-table__fcell">
</th>
<th class="extended-table__fcell">
</th>
<th class="extended-table__fcell">
</th>
</tr>
</thead>
<tbody class="extended-table__table-body">
<tr class="extended-table__row">
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Note 1. Staatsexamen</span>
<span class="extended-table__cell-value">9,4</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Note 2. Staatsexamen</span>
<span class="extended-table__cell-value" aria-hidden="true">-</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">TOEFL</span>
<span class="extended-table__cell-value">105</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">IELTS</span>
<span class="extended-table__cell-value" aria-hidden="true">-</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Promotion</span>
<span class="extended-table__cell-value">ohne Promotion</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Zeitpunkt der Bewerbung</span>
<span class="extended-table__cell-value">vor 1. Staatsexamen</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Praxiserfahrung</span>
<span class="extended-table__cell-value">Praktikum in Großkanzlei, Praktikum in Botschaft</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Law School</span>
<span class="extended-table__cell-value">University of Southern California (USC) Gould School of Law</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Bewerbung erfolgreich?</span>
<span class="extended-table__cell-value">nein</span>
</td>
</tr>
<tr class="extended-table__row">
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Note 1. Staatsexamen</span>
<span class="extended-table__cell-value">9,4</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Note 2. Staatsexamen</span>
<span class="extended-table__cell-value" aria-hidden="true">-</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">TOEFL</span>
<span class="extended-table__cell-value">105</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">IELTS</span>
<span class="extended-table__cell-value" aria-hidden="true">-</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Promotion</span>
<span class="extended-table__cell-value">ohne Promotion</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Zeitpunkt der Bewerbung</span>
<span class="extended-table__cell-value">vor 1. Staatsexamen</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Praxiserfahrung</span>
<span class="extended-table__cell-value">Praktikum in Großkanzlei, Praktikum in Botschaft</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Law School</span>
<span class="extended-table__cell-value">University of Southern California (USC) Gould School of Law</span>
</td>
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">Bewerbung erfolgreich?</span>
<span class="extended-table__cell-value">nein</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="extended-table__pagination">
<div id="pagination-35585-53993" class="pagination">
<div class="pagination__bar">
<div class="pagination__current">Seite 1 von 110</div>
<div class="pagination__buttons">
<button class="navigation-button" type="button" title="Vorherige Seite" disabled>
<svg class="icon icon--caret-left" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-left"></use>
</svg></button>
<a class="navigation-button" title="Nächste Seite" href="#">
<svg class="icon icon--caret-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-right"></use>
</svg></a>
</div>
</div>
</div>
</div>
</div>
{% set id = id ??? html_id('extended-table') %}
<div {{ html_attributes({
class: 'extended-table',
id: id,
}, attrs ?? {}) }}>
{% if successAlert|default %}
<div class="extended-table__alert">
{% include '@alert' with {
type: 'success',
text: successAlert,
} only %}
</div>
{% endif %}
{% if search|default or settings|default %}
<div class="extended-table__bar">
{% if search|default %}
<div class="extended-table__search">
{% include '@inline-form' with search | merge({
id: 'search' | namespaceInputId(id),
small: true,
button: {
icon: 'search',
title: 'Search' | t('site'),
},
}) only %}
</div>
{% endif %}
{% if settings|default %}
<div class="extended-table__settings">
{% include '@icon-button' with {
icon: 'gear',
text: 'Filters and sorting' | t('site'),
attrs: {
'data-overlay': 'settings' | namespaceInputId(id),
},
} only %}
{% include '@overlay' with {
id: 'settings' | namespaceInputId(id),
open: false,
slim: true,
destroyAfterClose: false,
headline: {
text: 'Filters and sorting' | t('site'),
},
use: '@filters',
configuration: settings | merge({
withReset: false,
submit: {
text: 'Filter and sort' | t('site'),
},
}),
} only %}
</div>
{% endif %}
</div>
{% endif %}
<div class="extended-table__content">
<div class="extended-table__table-wrapper">
<table class="extended-table__table">
<thead class="extended-table__table-head">
<tr>
{% for column in columns %}
<th class="extended-table__hcell has-overlay-link" scope="col">
<span class="extended-table__hcell-text">
{{- column.text -}}
</span>
{% if column.sorting|default %}
<span class="extended-table__hcell-sorting">
{% switch column.sorting.state %}
{% case 'asc' %}
<span class="u-hidden-visually">{{ '(ascending sorted)' | t('site') }}</span>
{% include '@navigation-button' with {
link: column.sorting.link,
icon: 'sort-asc',
title: 'Sort descending by {column}' | t('site', { column: column.text }),
attrs: {
class: 'u-overlay-link',
},
} only %}
{% case 'desc' %}
<span class="u-hidden-visually">{{ '(descending sorted)' | t('site') }}</span>
{% include '@navigation-button' with {
link: column.sorting.link,
icon: 'sort-desc',
title: 'Remove sorting from {column}' | t('site', { column: column.text }),
attrs: {
class: 'u-overlay-link',
},
} only %}
{% default %}
<span class="u-hidden-visually">{{ '(unsorted)' | t('site') }}</span>
{% include '@navigation-button' with {
link: column.sorting.link,
icon: 'sort-default',
title: 'Sort ascending by {column}' | t('site', { column: column.text }),
attrs: {
class: 'u-overlay-link',
},
} only %}
{% endswitch %}
</span>
{% endif %}
</th>
{% endfor %}
</tr>
{% if columns | filter(column => column.filters|default) | length > 0 %}
<tr>
{% for column in columns %}
<th class="extended-table__fcell">
{% if column.filters|default %}
{% set selected = column.filters | filter(column => column.selected|default) | first | default(column.filters | first) %}
<button {{ html_attributes({
id: "filter-button-#{loop.index}" | namespaceInputId(id),
class: 'extended-table__filter-button',
type: 'button',
title: 'Filter column: {column}' | t('site', {
column: column.text,
}),
'aria-haspopup': 'true',
'aria-controls': "filters-#{loop.index}" | namespaceInputId(id),
'aria-expanded': 'false',
}) }}>
<span class="extended-table__filter-button-text u-underline">{{ selected.text }}</span>
{% include '@icon' with {
icon: 'caret-down',
class: 'extended-table__filter-button-icon',
} only %}
</button>
<ul {{ html_attributes({
class: 'extended-table__filters',
id: "filters-#{loop.index}" | namespaceInputId(id),
role: 'menu',
'aria-label': 'Filter column: {column}' | t('site', {
column: column.text,
}),
}) }}>
{% for filter in column.filters %}
<li class="extended-table__filter" role="presentation">
<a {{ html_attributes({
class: 'extended-table__filter-link',
href: filter.link,
role: 'menuitem',
'aria-current': filter.selected|default ? 'true',
}) }}>
<span class="extended-table__filter-link-text u-underline">
{{- filter.text -}}
</span>
{% if filter.selected|default %}
{% include '@icon' with {
icon: 'check-alt',
class: 'extended-table__filter-link-icon',
} only %}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</th>
{% endfor %}
</tr>
{% endif %}
</thead>
<tbody class="extended-table__table-body">
{% for row in rows %}
<tr class="extended-table__row">
{% for value in row %}
<td class="extended-table__cell">
<span class="extended-table__cell-label" aria-hidden="true">
{{- columns[loop.index0].text -}}
</span>
{% if value %}
<span class="extended-table__cell-value">
{{- value -}}
</span>
{% else %}
<span class="extended-table__cell-value" aria-hidden="true">-</span>
{% endif %}
</td>
{% endfor %}
</tr>
{% else %}
<tr class="extended-table__row">
<td class="extended-table__cell extended-table__cell--no-results" colspan="{{ columns | length }}">
{{ 'No results' | t('site') }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% if pagination|default %}
<div class="extended-table__pagination">
{% include '@pagination' with pagination only %}
</div>
{% endif %}
{% if button|default %}
<div class="extended-table__button">
{% include '@button' with button only %}
</div>
{% endif %}
</div>
{
"search": {
"input": {
"name": "search",
"label": "Suchbegriff"
},
"icon": "search"
},
"settings": {
"filters": [
{
"summary": "Anzeige",
"open": true,
"fields": [
{
"label": "Einträge pro Seite",
"type": "select",
"name": "select",
"controls": [
{
"use": "@input",
"type": "select",
"options": [
{
"value": 10,
"label": "10 pro Seite"
},
{
"value": 25,
"label": "25 pro Seite"
},
{
"value": 50,
"label": "50 pro Seite"
}
]
}
]
}
]
}
]
},
"columns": [
{
"text": "Note 1. Staatsexamen",
"sorting": {
"link": "#",
"state": "default"
},
"filters": [
{
"link": "#",
"text": "Alle",
"selected": true
},
{
"link": "#",
"text": "unter 7"
},
{
"link": "#",
"text": "7,0 - 7,9"
},
{
"link": "#",
"text": "8,0 - 8,9"
},
{
"link": "#",
"text": "9,0 - 9,9"
},
{
"link": "#",
"text": "10,0 - 10,9"
},
{
"link": "#",
"text": "11,0 - 11,9"
},
{
"link": "#",
"text": "12,0 - 12,9"
},
{
"link": "#",
"text": "13,0 - 13,9"
},
{
"link": "#",
"text": "14,0 - 18"
}
]
},
{
"text": "Note 2. Staatsexamen",
"sorting": {
"link": "#",
"state": "asc",
"active": true
},
"filters": [
{
"link": "#",
"text": "Alle",
"selected": true
},
{
"link": "#",
"text": "unter 7"
},
{
"link": "#",
"text": "7,0 - 7,9"
},
{
"link": "#",
"text": "8,0 - 8,9"
},
{
"link": "#",
"text": "9,0 - 9,9"
},
{
"link": "#",
"text": "10,0 - 10,9"
},
{
"link": "#",
"text": "11,0 - 11,9"
},
{
"link": "#",
"text": "12,0 - 12,9"
},
{
"link": "#",
"text": "13,0 - 13,9"
},
{
"link": "#",
"text": "14,0 - 18"
}
]
},
{
"text": "TOEFL",
"sorting": {
"link": "#",
"state": "default"
}
},
{
"text": "IELTS",
"sorting": {
"link": "#",
"state": "default"
}
},
{
"text": "Promotion",
"sorting": {
"link": "#",
"state": "default"
}
},
{
"text": "Zeitpunkt der Bewerbung",
"sorting": {
"link": "#",
"state": "default"
}
},
{
"text": "Praxiserfahrung"
},
{
"text": "Law School"
},
{
"text": "Bewerbung erfolgreich?"
}
],
"rows": [
[
"9,4",
"",
"105",
"",
"ohne Promotion",
"vor 1. Staatsexamen",
"Praktikum in Großkanzlei, Praktikum in Botschaft",
"University of Southern California (USC) Gould School of Law",
"nein"
],
[
"9,4",
"",
"105",
"",
"ohne Promotion",
"vor 1. Staatsexamen",
"Praktikum in Großkanzlei, Praktikum in Botschaft",
"University of Southern California (USC) Gould School of Law",
"nein"
]
],
"pagination": {
"total": 110,
"current": 1,
"nextUrl": "#",
"prevUrl": null
}
}
.extended-table {
padding-inline: var(--extended-table-padding-inline, 0);
}
.extended-table__alert {
margin-block-end: 4rem;
}
.extended-table__bar {
align-items: center;
column-gap: 4rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-block-end: 4rem;
row-gap: 3rem;
}
.extended-table__search {
flex-grow: 1;
flex-shrink: 0;
max-inline-size: 50rem;
min-inline-size: 30rem;
}
.extended-table__settings {
--icon-button-background-color: transparent;
--icon-button-background-color-active: transparent;
--icon-button-border-color: transparent;
--icon-button-border-color-active: transparent;
--icon-button-icon-color: currentColor;
--icon-button-icon-color-active: currentColor;
--icon-button-size: 2.4rem;
--icon-button-icon-size: 2.4rem;
--icon-button-gap: 0.5rem;
--icon-button-text-size: 1.6rem;
flex-shrink: 0;
}
.extended-table__content {
container-name: extended-table;
container-type: inline-size;
}
.extended-table__table-wrapper {
overflow-x: auto;
@container extended-table (inline-size < 80rem) {
overflow-x: visible;
}
}
.extended-table__table {
border: 1px solid var(--color-cyan-light);
border-collapse: collapse;
font-size: 1.6rem;
inline-size: 100%;
line-height: var(--line-height-body);
@container extended-table (inline-size < 80rem) {
block-size: auto;
border: 0;
display: block;
margin-block: 1rem;
}
}
.extended-table__table-head {
@container extended-table (inline-size < 80rem) {
display: none;
}
}
.extended-table__hcell {
background-color: var(--color-cyan-light);
font-size: 1.4rem;
font-weight: 600;
hyphens: auto;
line-height: 1.3;
overflow: hidden;
padding-block-end: 4.2rem;
padding-block-start: 1rem;
padding-inline: 1rem;
position: relative;
text-align: start;
}
.extended-table__hcell-sorting {
--navigation-button-size: 2.4rem;
--navigation-button-icon-size: 2rem;
--navigation-button-background-color: var(--color-cyan-xlight);
--navigation-button-color: var(--color-cyan);
--navigation-button-hover-background-color: var(--color-midnight);
--navigation-button-hover-color: var(--color-white);
--overlay-link-inset: -100vw;
inset-block-end: 1rem;
inset-inline-end: 1rem;
position: absolute;
}
.extended-table__fcell {
background-color: var(--color-cyan-xlight);
border: 1px solid var(--color-cyan-light);
font-size: 1.4rem;
position: relative;
text-align: start;
}
.extended-table__filter-button {
align-items: center;
display: flex;
font-weight: 600;
gap: 1rem;
inline-size: 100%;
justify-content: center;
line-height: var(--line-height-default);
padding-block: 0.5rem;
padding-inline: 1rem;
}
.extended-table__filter-button-icon {
flex-shrink: 0;
}
.extended-table__filters {
animation: 0.2s slide-slightly-from-top, 0.2s opacity;
background-color: var(--color-white);
border: 3px solid var(--color-cyan-light);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
inline-size: calc(100% - 2rem);
line-height: var(--line-height-default);
margin-block-start: -1px;
margin-inline: 1rem;
max-block-size: 15rem;
overflow-x: none;
overflow-y: auto;
padding-block: 0.5rem;
position: absolute;
.extended-table__filter-button:not([aria-expanded='true']) + & {
display: none;
}
}
.extended-table__filter {
display: block;
}
.extended-table__filter-link {
align-items: center;
display: flex;
gap: 0.5rem;
justify-content: space-between;
padding-block: 0.5rem;
padding-inline: 1.5rem;
}
.extended-table__filter-link-icon {
flex-shrink: 0;
}
.extended-table__table-body {
block-size: 30rem;
@container extended-table (inline-size < 80rem) {
block-size: auto;
display: flex;
flex-direction: column;
margin-inline: max(-3rem, calc(var(--body-padding) * -1));
}
}
.extended-table__row {
&:nth-child(even) {
background-color: var(--color-cyan-xlight);
}
@container extended-table (inline-size < 80rem) {
border-block-end-color: var(--color-grey-light);
border-block-end-style: solid;
border-block-end-width: 1px;
column-gap: 2.4rem;
display: grid;
grid-auto-rows: auto;
grid-template-columns: 1fr;
padding-block: 3rem;
padding-inline: min(3rem, var(--body-padding));
row-gap: 1.6rem;
&:first-child {
padding-block-start: 0;
}
&:last-child:not(:nth-child(even)) {
padding-block-end: 0;
}
&:nth-child(even) {
background-color: var(--color-orange-light);
}
}
}
.extended-table__cell {
border: 1px solid var(--color-cyan-light);
hyphens: auto;
max-inline-size: 30rem;
min-block-size: calc(1em * var(--line-height-body) + 2rem);
padding-block: 1rem;
padding-inline: 1rem;
text-align: start;
@container extended-table (inline-size < 80rem) {
border: 0;
column-gap: 1.6rem;
display: flex;
flex-direction: row;
hyphens: manual;
max-inline-size: none;
min-block-size: 0;
padding: 0;
}
}
.extended-table__cell-label {
display: none;
@container extended-table (inline-size < 80rem) {
display: block;
flex-shrink: 0;
font-size: 1.4rem;
font-weight: var(--font-weight-bold);
inline-size: 40%;
}
}
.extended-table__cell-value:is([aria-hidden='true']) {
display: none;
@container extended-table (inline-size < 80rem) {
color: var(--color-grey-dark);
display: block;
}
}
.extended-table__cell--no-results {
block-size: 30rem;
color: var(--color-midnight-line);
font-size: 2rem;
text-align: center;
vertical-align: middle;
}
.extended-table__pagination {
--navigation-button-size: 4rem;
--navigation-button-icon-size: 2rem;
--pagination-font-size: 1.6rem;
margin-block-start: 2rem;
}
.extended-table__button {
margin-block-start: 4rem;
}
import { on } from 'delegated-events';
import { createFocusTrap, type FocusTrap } from 'focus-trap';
import abort from '../../../javascripts/utils/abort';
import invisibleFocus from '../../../javascripts/utils/invisibleFocus';
import moveFocus from '../../../javascripts/utils/moveFocus';
let focusTrap: FocusTrap | undefined;
on('click', 'button.extended-table__filter-button', (event) => {
const { currentTarget: $button } = event;
event.preventDefault();
if (focusTrap) {
focusTrap.deactivate();
focusTrap = undefined;
return;
}
const target = $button.getAttribute('aria-controls') ?? abort();
const $target = document.getElementById(target) ?? abort();
$button.setAttribute('aria-expanded', 'true');
focusTrap = createFocusTrap([$target, $button], {
initialFocus: false,
clickOutsideDeactivates: true,
returnFocusOnDeactivate: false,
onActivate() {
moveFocus($target);
},
onDeactivate() {
$button.setAttribute('aria-expanded', 'false');
invisibleFocus($button);
},
onPostDeactivate() {
focusTrap = undefined;
},
});
focusTrap.activate();
});
No notes defined.