gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Embed interactive search field in large table

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 18:28:51 +02:00
parent 69855cbe57
commit a3b5ea3bf0
2 changed files with 29 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/data-display.html
+29 -11
View File
@@ -80,17 +80,18 @@
<article class="sg-card sg-large-table" data-component="large-table" role="table" aria-label="Beispiel Large Table">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-large-table__title-segment" data-component-part="large-table-header">
<div class="sg-strong">Large Table</div>
<div class="sg-large-table__search" data-component="search-field">
<label class="sg-large-table__search-label" for="large-table-search">Suchfeld</label>
<input
class="sg-large-table__search-input"
id="large-table-search"
type="search"
placeholder="Tabelle durchsuchen"
aria-label="Tabelle durchsuchen"
data-large-table-search
>
</div>
<span class="sg-search-field-row" data-component="search-field">
<span class="sg-input-single-line-wrap" data-has-value="false" data-component="single-line-input" data-component-state="inactive-selectable">
<input
class="sg-interaction-element sg-input-single-line sg-search-field-input sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text"
placeholder="Suchfeld"
aria-label="Suchfeld ohne Eingabe"
data-large-table-search
>
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
</span>
</span>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--header" role="row" data-component-part="large-table-header-row">
@@ -221,6 +222,8 @@
const rows = Array.from(table.querySelectorAll('[data-component-part="large-table-row"]'));
const headerRow = table.querySelector('[data-component-part="large-table-header-row"]');
const searchInput = table.querySelector('[data-large-table-search]');
const searchFieldWrap = table.querySelector('[data-component="single-line-input"]');
const searchClearButton = table.querySelector('.sg-input-clear-button');
const state = {
columnIndex: 0,
direction: 'ascending',
@@ -314,10 +317,25 @@
if (searchInput) {
searchInput.addEventListener('input', () => {
state.query = searchInput.value.trim().toLowerCase();
if (searchFieldWrap) {
searchFieldWrap.setAttribute('data-has-value', searchInput.value ? 'true' : 'false');
}
renderRows();
});
}
if (searchClearButton && searchInput) {
searchClearButton.addEventListener('click', () => {
searchInput.value = '';
state.query = '';
if (searchFieldWrap) {
searchFieldWrap.setAttribute('data-has-value', 'false');
}
renderRows();
searchInput.focus();
});
}
if (headerRow) {
setHeaderState(state.columnIndex, state.direction);
}