<div class="page-title page-title--full-width">
<div class="h-container">
<h1 class="page-title__text">Arved</h1>
</div>
</div>
<div class="table-filter">
<div class="h-container">
<div class="grid grid--middle-xs">
<div class="grid__col grid__col--lg-7">
<div class="filter js-filter table-filter__filter">
<ul class="filter__list">
<li class="filter__list-item">
<button class="filter-item js-filter-item is-selected" type="button" data-key="all">
<span class="filter-item__inner">
<span class="filter-item__text">Kõik</span>
</span>
</button>
</li>
<li class="filter__list-item">
<button class="filter-item js-filter-item" type="button" data-key="awaiting">
<span class="filter-item__inner">
<span class="filter-item__bullet">
<span class="filter-item__count">2</span>
</span>
<span class="filter-item__text">Kinnituse ootel</span>
</span>
</button>
</li>
<li class="filter__list-item">
<button class="filter-item js-filter-item" type="button" data-key="in-progress">
<span class="filter-item__inner">
<span class="filter-item__bullet">
<span class="filter-item__count">3</span>
</span>
<span class="filter-item__text">Koostamisel</span>
</span>
</button>
</li>
<li class="filter__list-item">
<button class="filter-item js-filter-item" type="button" data-key="confirmed">
<span class="filter-item__inner">
<span class="filter-item__bullet">
<span class="filter-item__count">5</span>
</span>
<span class="filter-item__text">Kinnitatud</span>
</span>
</button>
</li>
</ul>
<button class="filter__button filter__button--left is-hidden" type="button" aria-label="Scroll left">
<svg class="icon filter__button-icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
</svg>
</button>
<button class="filter__button filter__button--right is-hidden" type="button" aria-label="Scroll right">
<svg class="icon filter__button-icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
</svg>
</button>
</div>
</div>
<div class="grid__col grid__col--lg-5">
<div class="grid grid--middle-xs grid--between-xs grid--start-lg grid--no-wrap-lg">
<div class="grid__col grid__col--xs h-hidden-lg">
<button class="search-toggle table-filter__search-toggle" type="button">
<span class="search-toggle__inner">
<svg class="icon search-toggle__icon search-toggle__icon--closed" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
</svg>
<svg class="icon search-toggle__icon search-toggle__icon--open" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
</svg>
<span class="search-toggle__text">Otsi</span>
</span>
</button>
</div>
<div class="grid__col grid__col--xs grid__col--min-lg">
<div class="dropdown js-dropdown dropdown--trigger-icon-animated table-filter__dropdown" data-offset-x="0" data-offset-y="0">
<button type="button" class="button button--tiny dropdown__trigger button--icon-right">
<span class="button__inner">
<svg class="icon button__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
<span class="button__text">Lae info alla</span>
</span>
</button>
<div class="dropdown__content">
<div class="dropdown__content-inner">
<p>Lae info alla</p>
<ul class="dropdown__options">
<li class="dropdown__option-item">
<a class="dropdown__option-link" href="#">
<svg class="icon dropdown__option-icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#csv"></use>
</svg>
<span class="dropdown__text">CSV</span>
</a>
</li>
<li class="dropdown__option-item">
<a class="dropdown__option-link" href="#">
<svg class="icon dropdown__option-icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#excel"></use>
</svg>
<span class="dropdown__text">Excel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="grid__col grid__col--first-lg grid__col--max-lg">
<div class="search table-filter__search">
<div class="search__inner">
<div class="search__textfield-wrapper">
<div class="textfield search__textfield">
<label class="textfield__label h-visually-hidden" for="search1">
Otsing
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="search1" name="search" placeholder="Otsi arvete hulgast...">
</div>
</div>
<button class="search__clear js-search-clear" type="button" aria-label="Tühjenda">
<span class="search__clear-inner">
<svg class="icon search__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
</svg>
</span>
</button>
</div>
<button class="search__button search__button--toggle js-search-toggle" type="button" aria-label="Otsi">
<span class="search__button-inner">
<svg class="icon search__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
</svg>
</span>
</button>
<button class="search__button search__button--submit" type="submit" aria-label="Otsi">
<span class="search__button-inner">
<svg class="icon search__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divider divider--xs divider--invisible"></div>
<div class="h-container">
<h2 class="h4 bold text-base">Avatud arved</h2>
<div class="divider divider--xs divider--invisible"></div>
<div class="status-table ">
<table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
<thead class="status-table__head">
<tr class="status-table__row">
<th class="status-table__header status-table__header--component" scope="col">
<div class="check
check__stat status-table__check--header">
<input type="checkbox" id="check-all" name="check" value="" class="check__input" data-tablesaw-checkall>
<label for="check-all" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Vali kõik</span>
</label>
</div>
</th>
<th class="status-table__header" data-key="arveNr" scope="col">
<span class="status-table__title">Arve nr</span>
</th>
<th class="status-table__header" data-key="objktiKood" scope="col">
<span class="status-table__title">Obj. k.</span>
</th>
<th class="status-table__header" data-key="esindus" scope="col">
<span class="status-table__title">Esindus</span>
</th>
<th class="status-table__header" data-key="kontakt" scope="col">
<span class="status-table__title">Kontakt</span>
</th>
<th class="status-table__header" data-key="kuupäev" scope="col">
<span class="status-table__title">Kuupäev</span>
</th>
<th class="status-table__header" data-key="tähtaeg" scope="col">
<span class="status-table__title">Tähtaeg</span>
</th>
<th class="status-table__header" data-key="staatus" scope="col">
<span class="status-table__title">Staatus</span>
</th>
<th class="status-table__header" data-key="summa" scope="col">
<span class="status-table__title">Summa</span>
</th>
<th class="status-table__header" data-key="tasumata" scope="col">
<span class="status-table__title">Tasumata</span>
</th>
<th class="status-table__header status-table__header--empty" scope="col">
</th>
<th class="status-table__header status-table__header--component" scope="col">
<div class="dropdown js-dropdown status-table__dropdown js-status-table-dropdown" data-offset-x="0" data-offset-y="0">
<button type="button" class="button button--text button--text-color status-table__dropdown-button dropdown__trigger button--icon">
<span class="button__inner">
<svg class="icon button__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dots"></use>
</svg>
<span class="button__text">Valikud</span>
</span>
</button>
<div class="dropdown__content">
<div class="dropdown__content-inner">
Kuva tabeli veerge
<fieldset class="choice-group
dropdown__choices">
<legend class="choice-group__label h-visually-hidden">Kuva tabeli veerge</legend>
<div class="choice-group__inner">
<div class="check
choice-group__item">
<input type="checkbox" id="check1" name="check" value="" class="check__input" checked data-key="arveNr">
<label for="check1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Arve nr</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check2" name="check" value="" class="check__input" checked data-key="objktiKood">
<label for="check2" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Objekti kood</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check3" name="check" value="" class="check__input" checked data-key="esindus">
<label for="check3" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Esindus</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check5" name="check" value="" class="check__input" checked data-key="kontakt">
<label for="check5" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Kontakt</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check6" name="check" value="" class="check__input" checked data-key="kuupäev">
<label for="check6" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Kuupäev</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check7" name="check" value="" class="check__input" checked data-key="tähtaeg">
<label for="check7" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Tähtaeg</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check8" name="check" value="" class="check__input" checked data-key="staatus">
<label for="check8" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Staatus</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check9" name="check" value="" class="check__input" checked data-key="summa">
<label for="check9" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Summa</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check10" name="check" value="" class="check__input" checked data-key="tasumata">
<label for="check10" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Tasumata</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="status-table__body">
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1-2-1" name="check" value="" class="check__input">
<label for="check-1-2-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="arveNr">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O12
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev">
15.06.2022
</td>
<td class="status-table__item status-table__text--bold" data-key="tähtaeg">
29.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-error">
<span class="status__bullet"></span>
<span class="status__text">Tasumata xx päeva</span>
</div>
</td>
<td class="status-table__item " data-key="summa">
201.24€
</td>
<td class="status-table__item " data-key="tasumata">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">maksma</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1-3-1" name="check" value="" class="check__input">
<label for="check-1-3-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="arveNr">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O12
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev">
15.06.2022
</td>
<td class="status-table__item status-table__text--bold" data-key="tähtaeg">
29.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-error">
<span class="status__bullet"></span>
<span class="status__text">Tasumata xx päeva</span>
</div>
</td>
<td class="status-table__item " data-key="summa">
201.24€
</td>
<td class="status-table__item " data-key="tasumata">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">maksma</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1-4-1" name="check" value="" class="check__input">
<label for="check-1-4-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="arveNr">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O12
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev">
15.06.2022
</td>
<td class="status-table__item status-table__text--bold" data-key="tähtaeg">
29.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-error">
<span class="status__bullet"></span>
<span class="status__text">Tasumata xx päeva</span>
</div>
</td>
<td class="status-table__item " data-key="summa">
201.24€
</td>
<td class="status-table__item " data-key="tasumata">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">maksma</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1-2-2" name="check" value="" class="check__input">
<label for="check-1-2-2" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="arveNr">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O12
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev">
15.06.2022
</td>
<td class="status-table__item status-table__text--bold" data-key="tähtaeg">
29.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-error">
<span class="status__bullet"></span>
<span class="status__text">Tasumata xx päeva</span>
</div>
</td>
<td class="status-table__item " data-key="summa">
201.24€
</td>
<td class="status-table__item " data-key="tasumata">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">maksma</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1-1-2" name="check" value="" class="check__input">
<label for="check-1-1-2" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="arveNr">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O12
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev">
15.06.2022
</td>
<td class="status-table__item status-table__text--bold" data-key="tähtaeg">
29.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-error">
<span class="status__bullet"></span>
<span class="status__text">Tasumata xx päeva</span>
</div>
</td>
<td class="status-table__item " data-key="summa">
201.24€
</td>
<td class="status-table__item " data-key="tasumata">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">maksma</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1-3-2" name="check" value="" class="check__input">
<label for="check-1-3-2" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="arveNr">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O12
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev">
15.06.2022
</td>
<td class="status-table__item status-table__text--bold" data-key="tähtaeg">
29.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-error">
<span class="status__bullet"></span>
<span class="status__text">Tasumata xx päeva</span>
</div>
</td>
<td class="status-table__item " data-key="summa">
201.24€
</td>
<td class="status-table__item " data-key="tasumata">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">maksma</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1-1-3" name="check" value="" class="check__input">
<label for="check-1-1-3" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="arveNr">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O12
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev">
15.06.2022
</td>
<td class="status-table__item status-table__text--bold" data-key="tähtaeg">
29.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-error">
<span class="status__bullet"></span>
<span class="status__text">Tasumata xx päeva</span>
</div>
</td>
<td class="status-table__item " data-key="summa">
201.24€
</td>
<td class="status-table__item " data-key="tasumata">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">maksma</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1-1-4" name="check" value="" class="check__input">
<label for="check-1-1-4" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="arveNr">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O12
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev">
15.06.2022
</td>
<td class="status-table__item status-table__text--bold" data-key="tähtaeg">
29.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-error">
<span class="status__bullet"></span>
<span class="status__text">Tasumata xx päeva</span>
</div>
</td>
<td class="status-table__item " data-key="summa">
201.24€
</td>
<td class="status-table__item " data-key="tasumata">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">maksma</span>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="divider divider--xxs divider--invisible"></div>
<div class="grid grid--between-xs">
<div class="grid__col grid__col--sm">
<nav class="pagination " aria-label="Pagination">
<ul class="pagination__list">
<li class="pagination__item pagination__item--prev">
<a aria-disabled="true" class="pagination__link">
<svg class="icon pagination__list--icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
</svg>
<span class="pagination__label">Previous</span>
</a>
</li>
<li class="pagination__item pagination__item--current">
<a aria-current="page" class="pagination__link">
<span class="pagination__label">1</span>
</a>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">
<span class="pagination__label">2</span>
</a>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">
<span class="pagination__label">3</span>
</a>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">
<span class="pagination__label">4</span>
</a>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">
<span class="pagination__label">5</span>
</a>
</li>
<li class="pagination__item">
<span class="pagination__span">···</span>
</li>
<li class="pagination__item ">
<a href="#" class="pagination__link">
<span class="pagination__label">12</span>
</a>
</li>
<li class="pagination__item pagination__item--next">
<a href="#" class="pagination__link">
<svg class="icon pagination__list--icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
</svg>
<span class="pagination__label">Next</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="grid__col grid__col--sm">
<button type="button" class="button button--block-xs button--tiny">
<span class="button__inner">
<span class="button__text">Maksa kõik 1176.48€</span>
</span>
</button>
</div>
</div>
<div class="divider divider--md divider--invisible"></div>
<h2 class="h4 bold text-base">Tasutud</h2>
<div class="divider divider--xs divider--invisible"></div>
<div class="status-table ">
<table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
<thead class="status-table__head">
<tr class="status-table__row">
<th class="status-table__header" data-key="arveNr2" scope="col">
<span class="status-table__title">Arve nr</span>
</th>
<th class="status-table__header" data-key="objektiKood2" scope="col">
<span class="status-table__title">Obj. k.</span>
</th>
<th class="status-table__header" data-key="esindus2" scope="col">
<span class="status-table__title">Esindus</span>
</th>
<th class="status-table__header" data-key="kontakt2" scope="col">
<span class="status-table__title">Kontakt</span>
</th>
<th class="status-table__header" data-key="kuupäev2" scope="col">
<span class="status-table__title">Kuupäev</span>
</th>
<th class="status-table__header" data-key="makstud2" scope="col">
<span class="status-table__title">Makstud</span>
</th>
<th class="status-table__header" data-key="summa2" scope="col">
<span class="status-table__title">Summa</span>
</th>
<th class="status-table__header status-table__header--empty" scope="col">
</th>
<th class="status-table__header status-table__header--component" scope="col">
<div class="dropdown js-dropdown status-table__dropdown js-status-table-dropdown" data-offset-x="0" data-offset-y="0">
<button type="button" class="button button--text button--text-color status-table__dropdown-button dropdown__trigger button--icon">
<span class="button__inner">
<svg class="icon button__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dots"></use>
</svg>
<span class="button__text">Valikud</span>
</span>
</button>
<div class="dropdown__content">
<div class="dropdown__content-inner">
Kuva tabeli veerge
<fieldset class="choice-group
dropdown__choices">
<legend class="choice-group__label h-visually-hidden">Kuva tabeli veerge</legend>
<div class="choice-group__inner">
<div class="check
choice-group__item">
<input type="checkbox" id="check1-1" name="check" value="" class="check__input" checked data-key="arveNr2">
<label for="check1-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Arve nr</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check2-2" name="check" value="" class="check__input" checked data-key="objektiKood2">
<label for="check2-2" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Objekti kood</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check3-3" name="check" value="" class="check__input" checked data-key="esindus2">
<label for="check3-3" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Esindus</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check5-5" name="check" value="" class="check__input" checked data-key="kontakt2">
<label for="check5-5" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Kontakt</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check6-6" name="check" value="" class="check__input" checked data-key="kuupäev2">
<label for="check6-6" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Kuupäev</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check7-7" name="check" value="" class="check__input" checked data-key="makstud2">
<label for="check7-7" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Makstud</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check8-8" name="check" value="" class="check__input" checked data-key="summa2">
<label for="check8-8" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Summa</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="status-table__body">
<tr class="status-table__row">
<td class="status-table__item " data-key="arveNr2">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood2">
O12
</td>
<td class="status-table__item " data-key="esindus2">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt2">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev2">
15.06.2022
</td>
<td class="status-table__item " data-key="makstud2">
29.06.2022
</td>
<td class="status-table__item " data-key="summa2">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">vaata</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item " data-key="arveNr2">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood2">
O12
</td>
<td class="status-table__item " data-key="esindus2">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt2">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev2">
15.06.2022
</td>
<td class="status-table__item " data-key="makstud2">
29.06.2022
</td>
<td class="status-table__item " data-key="summa2">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">vaata</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item " data-key="arveNr2">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood2">
O12
</td>
<td class="status-table__item " data-key="esindus2">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt2">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev2">
15.06.2022
</td>
<td class="status-table__item " data-key="makstud2">
29.06.2022
</td>
<td class="status-table__item " data-key="summa2">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">vaata</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item " data-key="arveNr2">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood2">
O12
</td>
<td class="status-table__item " data-key="esindus2">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt2">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev2">
15.06.2022
</td>
<td class="status-table__item " data-key="makstud2">
29.06.2022
</td>
<td class="status-table__item " data-key="summa2">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">vaata</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item " data-key="arveNr2">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood2">
O12
</td>
<td class="status-table__item " data-key="esindus2">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt2">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev2">
15.06.2022
</td>
<td class="status-table__item " data-key="makstud2">
29.06.2022
</td>
<td class="status-table__item " data-key="summa2">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">vaata</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item " data-key="arveNr2">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood2">
O12
</td>
<td class="status-table__item " data-key="esindus2">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt2">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev2">
15.06.2022
</td>
<td class="status-table__item " data-key="makstud2">
29.06.2022
</td>
<td class="status-table__item " data-key="summa2">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">vaata</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item " data-key="arveNr2">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood2">
O12
</td>
<td class="status-table__item " data-key="esindus2">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt2">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev2">
15.06.2022
</td>
<td class="status-table__item " data-key="makstud2">
29.06.2022
</td>
<td class="status-table__item " data-key="summa2">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">vaata</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item " data-key="arveNr2">
<span class="text-truncate"><a href="#">22000031</a></span>
</td>
<td class="status-table__item " data-key="objektiKood2">
O12
</td>
<td class="status-table__item " data-key="esindus2">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="kontakt2">
Risse Soomets
</td>
<td class="status-table__item " data-key="kuupäev2">
15.06.2022
</td>
<td class="status-table__item " data-key="makstud2">
29.06.2022
</td>
<td class="status-table__item " data-key="summa2">
201.24€
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">vaata</span>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="divider divider--md divider--invisible"></div>
</div>
{% include '@page-title' with { class: '', modifier: '', isFullWidth: true, data: { title: data.title } } %}
{% include '@table-filter' with { class: '', modifier: '', data: data.filter } %}
{% include '@divider' with { modifier: 'divider--xs divider--invisible' } %}
<div class="h-container">
{% if data.table %}
<h2 class="h4 bold text-base">Avatud arved</h2>
{% include '@divider' with { modifier: 'divider--xs divider--invisible' } %}
{% include '@status-table' with { class: '', modifier: '', data: data.table } %}
{% include '@divider' with { modifier: 'divider--xxs divider--invisible' } %}
{% if data.pagination %}
<div class="grid grid--between-xs">
<div class="grid__col grid__col--sm">
{% include '@pagination' with { class: '', modifier: '', data: data.pagination } %}
</div>
<div class="grid__col grid__col--sm">
{% include '@button' with { class: '', modifier: 'button--block-xs button--tiny', data: data.payButton } %}
</div>
</div>
{% else %}
<div class="grid grid--end-xs">
<div class="grid__col grid__col--sm">
{% include '@button' with { class: '', modifier: 'button--block-xs button--tiny', data: data.payButton } %}
</div>
</div>
{% endif %}
{% include '@divider' with { modifier: 'divider--md divider--invisible' } %}
{% endif %}
{% if data.paidTable %}
<h2 class="h4 bold text-base">Tasutud</h2>
{% include '@divider' with { modifier: 'divider--xs divider--invisible' } %}
{% include '@status-table' with { class: '', modifier: '', data: data.paidTable } %}
{% include '@divider' with { modifier: 'divider--md divider--invisible' } %}
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Arved",
"filter": {
"filter": {
"items": [
{
"key": "all",
"isSelected": true,
"text": "Kõik"
},
{
"key": "awaiting",
"text": "Kinnituse ootel",
"count": 2
},
{
"key": "in-progress",
"text": "Koostamisel",
"count": 3
},
{
"key": "confirmed",
"text": "Kinnitatud",
"count": 5
}
]
},
"search": {
"textfield": {
"label": "Otsing",
"id": "search1",
"name": "search",
"placeholder": "Otsi arvete hulgast...",
"isLabelHidden": true
},
"clearText": "Tühjenda",
"searchText": "Otsi",
"submitText": "Otsi"
},
"dropdown": {
"buttonModifier": "button--tiny",
"trigger": {
"text": "Lae info alla",
"icon": "chevron-bottom",
"iconPosition": "right"
},
"triggerIconAnimated": true,
"content": "<p>Lae info alla</p>",
"options": [
{
"url": "#",
"icon": "csv",
"text": "CSV"
},
{
"url": "#",
"icon": "excel",
"text": "Excel"
}
]
},
"searchToggle": {
"text": "Otsi"
}
},
"payButton": {
"text": "Maksa kõik 1176.48€"
},
"pagination": {
"label": "Pagination",
"next": {
"text": "Next",
"url": "#"
},
"previous": {
"text": "Previous",
"url": false
},
"current": {
"text": "1",
"url": false
},
"page": 1,
"pages": 12,
"last": 12,
"nearbyPagesLimit": 4,
"extraPagesLimit": 0,
"items": {
"1": {
"text": "1",
"url": "#"
},
"2": {
"text": "2",
"url": "#"
},
"3": {
"text": "3",
"url": "#"
},
"4": {
"text": "4",
"url": "#"
},
"5": {
"text": "5",
"url": "#"
},
"6": {
"text": "6",
"url": "#"
},
"7": {
"text": "7",
"url": "#"
},
"8": {
"text": "8",
"url": "#"
},
"9": {
"text": "9",
"url": "#"
},
"10": {
"text": "10",
"url": "#"
},
"11": {
"text": "11",
"url": "#"
},
"12": {
"text": "12",
"url": "#"
}
}
},
"table": {
"headers": [
{
"component": "check",
"componentData": {
"id": "check-all",
"name": "check",
"label": "Vali kõik",
"componentClass": "status-table__check--header",
"modifier": "check__stat",
"attributes": "data-tablesaw-checkall"
}
},
{
"label": "Arve nr",
"key": "arveNr"
},
{
"label": "Obj. k.",
"key": "objktiKood"
},
{
"label": "Esindus",
"key": "esindus"
},
{
"label": "Kontakt",
"key": "kontakt"
},
{
"label": "Kuupäev",
"key": "kuupäev"
},
{
"label": "Tähtaeg",
"key": "tähtaeg"
},
{
"label": "Staatus",
"key": "staatus"
},
{
"label": "Summa",
"key": "summa"
},
{
"label": "Tasumata",
"key": "tasumata"
},
{
"label": ""
},
{
"component": "dropdown",
"componentData": {
"componentClass": "status-table__dropdown js-status-table-dropdown",
"buttonModifier": "button--text button--text-color status-table__dropdown-button",
"trigger": {
"text": "Valikud",
"icon": "dots",
"iconPosition": null
},
"triggerIconAnimated": false,
"content": "Kuva tabeli veerge",
"options": null,
"choices": {
"label": "Kuva tabeli veerge",
"type": "check",
"choices": [
{
"id": "check1",
"label": "Arve nr",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"arveNr\""
},
{
"id": "check2",
"label": "Objekti kood",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"objktiKood\""
},
{
"id": "check3",
"label": "Esindus",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"esindus\""
},
{
"id": "check5",
"label": "Kontakt",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"kontakt\""
},
{
"id": "check6",
"label": "Kuupäev",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"kuupäev\""
},
{
"id": "check7",
"label": "Tähtaeg",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"tähtaeg\""
},
{
"id": "check8",
"label": "Staatus",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"staatus\""
},
{
"id": "check9",
"label": "Summa",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"summa\""
},
{
"id": "check10",
"label": "Tasumata",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"tasumata\""
}
],
"isLabelHidden": true
}
}
}
],
"rows": [
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-1-2-1",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr"
},
{
"content": "O12",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Risse Soomets",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "kuupäev"
},
{
"content": "29.06.2022",
"class": "status-table__text--bold",
"key": "tähtaeg"
},
{
"component": "status",
"componentData": {
"text": "Tasumata xx päeva",
"type": "error"
},
"key": "staatus"
},
{
"content": "201.24€",
"key": "summa"
},
{
"content": "201.24€",
"key": "tasumata"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "maksma"
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-1-3-1",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr"
},
{
"content": "O12",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Risse Soomets",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "kuupäev"
},
{
"content": "29.06.2022",
"class": "status-table__text--bold",
"key": "tähtaeg"
},
{
"component": "status",
"componentData": {
"text": "Tasumata xx päeva",
"type": "error"
},
"key": "staatus"
},
{
"content": "201.24€",
"key": "summa"
},
{
"content": "201.24€",
"key": "tasumata"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "maksma"
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-1-4-1",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr"
},
{
"content": "O12",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Risse Soomets",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "kuupäev"
},
{
"content": "29.06.2022",
"class": "status-table__text--bold",
"key": "tähtaeg"
},
{
"component": "status",
"componentData": {
"text": "Tasumata xx päeva",
"type": "error"
},
"key": "staatus"
},
{
"content": "201.24€",
"key": "summa"
},
{
"content": "201.24€",
"key": "tasumata"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "maksma"
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-1-2-2",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr"
},
{
"content": "O12",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Risse Soomets",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "kuupäev"
},
{
"content": "29.06.2022",
"class": "status-table__text--bold",
"key": "tähtaeg"
},
{
"component": "status",
"componentData": {
"text": "Tasumata xx päeva",
"type": "error"
},
"key": "staatus"
},
{
"content": "201.24€",
"key": "summa"
},
{
"content": "201.24€",
"key": "tasumata"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "maksma"
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-1-1-2",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr"
},
{
"content": "O12",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Risse Soomets",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "kuupäev"
},
{
"content": "29.06.2022",
"class": "status-table__text--bold",
"key": "tähtaeg"
},
{
"component": "status",
"componentData": {
"text": "Tasumata xx päeva",
"type": "error"
},
"key": "staatus"
},
{
"content": "201.24€",
"key": "summa"
},
{
"content": "201.24€",
"key": "tasumata"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "maksma"
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-1-3-2",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr"
},
{
"content": "O12",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Risse Soomets",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "kuupäev"
},
{
"content": "29.06.2022",
"class": "status-table__text--bold",
"key": "tähtaeg"
},
{
"component": "status",
"componentData": {
"text": "Tasumata xx päeva",
"type": "error"
},
"key": "staatus"
},
{
"content": "201.24€",
"key": "summa"
},
{
"content": "201.24€",
"key": "tasumata"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "maksma"
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-1-1-3",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr"
},
{
"content": "O12",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Risse Soomets",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "kuupäev"
},
{
"content": "29.06.2022",
"class": "status-table__text--bold",
"key": "tähtaeg"
},
{
"component": "status",
"componentData": {
"text": "Tasumata xx päeva",
"type": "error"
},
"key": "staatus"
},
{
"content": "201.24€",
"key": "summa"
},
{
"content": "201.24€",
"key": "tasumata"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "maksma"
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-1-1-4",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr"
},
{
"content": "O12",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Risse Soomets",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "kuupäev"
},
{
"content": "29.06.2022",
"class": "status-table__text--bold",
"key": "tähtaeg"
},
{
"component": "status",
"componentData": {
"text": "Tasumata xx päeva",
"type": "error"
},
"key": "staatus"
},
{
"content": "201.24€",
"key": "summa"
},
{
"content": "201.24€",
"key": "tasumata"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "maksma"
}
}
]
}
]
},
"paidTable": {
"headers": [
{
"label": "Arve nr",
"key": "arveNr2"
},
{
"label": "Obj. k.",
"key": "objektiKood2"
},
{
"label": "Esindus",
"key": "esindus2"
},
{
"label": "Kontakt",
"key": "kontakt2"
},
{
"label": "Kuupäev",
"key": "kuupäev2"
},
{
"label": "Makstud",
"key": "makstud2"
},
{
"label": "Summa",
"key": "summa2"
},
{
"label": ""
},
{
"component": "dropdown",
"componentData": {
"componentClass": "status-table__dropdown js-status-table-dropdown",
"buttonModifier": "button--text button--text-color status-table__dropdown-button",
"trigger": {
"text": "Valikud",
"icon": "dots",
"iconPosition": null
},
"triggerIconAnimated": false,
"content": "Kuva tabeli veerge",
"options": null,
"choices": {
"label": "Kuva tabeli veerge",
"type": "check",
"choices": [
{
"id": "check1-1",
"label": "Arve nr",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"arveNr2\""
},
{
"id": "check2-2",
"label": "Objekti kood",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"objektiKood2\""
},
{
"id": "check3-3",
"label": "Esindus",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"esindus2\""
},
{
"id": "check5-5",
"label": "Kontakt",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"kontakt2\""
},
{
"id": "check6-6",
"label": "Kuupäev",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"kuupäev2\""
},
{
"id": "check7-7",
"label": "Makstud",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"makstud2\""
},
{
"id": "check8-8",
"label": "Summa",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"summa2\""
}
],
"isLabelHidden": true
}
}
}
],
"rows": [
{
"cells": [
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr2"
},
{
"content": "O12",
"key": "objektiKood2"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus2"
},
{
"content": "Risse Soomets",
"key": "kontakt2"
},
{
"content": "15.06.2022",
"key": "kuupäev2"
},
{
"content": "29.06.2022",
"key": "makstud2"
},
{
"content": "201.24€",
"key": "summa2"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "vaata"
}
}
]
},
{
"cells": [
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr2"
},
{
"content": "O12",
"key": "objektiKood2"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus2"
},
{
"content": "Risse Soomets",
"key": "kontakt2"
},
{
"content": "15.06.2022",
"key": "kuupäev2"
},
{
"content": "29.06.2022",
"key": "makstud2"
},
{
"content": "201.24€",
"key": "summa2"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "vaata"
}
}
]
},
{
"cells": [
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr2"
},
{
"content": "O12",
"key": "objektiKood2"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus2"
},
{
"content": "Risse Soomets",
"key": "kontakt2"
},
{
"content": "15.06.2022",
"key": "kuupäev2"
},
{
"content": "29.06.2022",
"key": "makstud2"
},
{
"content": "201.24€",
"key": "summa2"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "vaata"
}
}
]
},
{
"cells": [
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr2"
},
{
"content": "O12",
"key": "objektiKood2"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus2"
},
{
"content": "Risse Soomets",
"key": "kontakt2"
},
{
"content": "15.06.2022",
"key": "kuupäev2"
},
{
"content": "29.06.2022",
"key": "makstud2"
},
{
"content": "201.24€",
"key": "summa2"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "vaata"
}
}
]
},
{
"cells": [
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr2"
},
{
"content": "O12",
"key": "objektiKood2"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus2"
},
{
"content": "Risse Soomets",
"key": "kontakt2"
},
{
"content": "15.06.2022",
"key": "kuupäev2"
},
{
"content": "29.06.2022",
"key": "makstud2"
},
{
"content": "201.24€",
"key": "summa2"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "vaata"
}
}
]
},
{
"cells": [
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr2"
},
{
"content": "O12",
"key": "objektiKood2"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus2"
},
{
"content": "Risse Soomets",
"key": "kontakt2"
},
{
"content": "15.06.2022",
"key": "kuupäev2"
},
{
"content": "29.06.2022",
"key": "makstud2"
},
{
"content": "201.24€",
"key": "summa2"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "vaata"
}
}
]
},
{
"cells": [
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr2"
},
{
"content": "O12",
"key": "objektiKood2"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus2"
},
{
"content": "Risse Soomets",
"key": "kontakt2"
},
{
"content": "15.06.2022",
"key": "kuupäev2"
},
{
"content": "29.06.2022",
"key": "makstud2"
},
{
"content": "201.24€",
"key": "summa2"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "vaata"
}
}
]
},
{
"cells": [
{
"content": "<span class=\"text-truncate\"><a href=\"#\">22000031</a></span>",
"key": "arveNr2"
},
{
"content": "O12",
"key": "objektiKood2"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus2"
},
{
"content": "Risse Soomets",
"key": "kontakt2"
},
{
"content": "15.06.2022",
"key": "kuupäev2"
},
{
"content": "29.06.2022",
"key": "makstud2"
},
{
"content": "201.24€",
"key": "summa2"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "vaata"
}
}
]
}
]
}
}
}