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

Add large table search filter

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 18:12:57 +02:00
parent fc86eb0697
commit 9ab23c47cc
2 changed files with 83 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/data-display.html
+40 -8
View File
@@ -78,8 +78,19 @@
<p class="sg-preview-label">Component: Large Table</p>
<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" data-component-part="large-table-header">
<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>
</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">
@@ -209,9 +220,11 @@
const headerButtons = headerCells.map((cell) => cell.querySelector('.sg-large-table__sort-button'));
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 state = {
columnIndex: 0,
direction: 'ascending',
query: '',
};
function setHeaderState(activeIndex, direction) {
@@ -251,21 +264,33 @@
return direction === 'ascending' ? comparison : -comparison;
}
function sortRows(columnIndex, direction) {
function rowMatchesQuery(row, query) {
if (!query) {
return true;
}
return Array.from(row.querySelectorAll('[role="cell"]')).some((cell) => {
const value = cell.textContent || '';
return value.toLowerCase().includes(query);
});
}
function renderRows() {
const sortedRows = rows.slice().sort((leftRow, rightRow) => {
const leftCell = leftRow.querySelectorAll('[role="cell"]')[columnIndex];
const rightCell = rightRow.querySelectorAll('[role="cell"]')[columnIndex];
const leftCell = leftRow.querySelectorAll('[role="cell"]')[state.columnIndex];
const rightCell = rightRow.querySelectorAll('[role="cell"]')[state.columnIndex];
const leftValue = leftCell ? leftCell.textContent : '';
const rightValue = rightCell ? rightCell.textContent : '';
return compareValues(leftValue, rightValue, direction);
return compareValues(leftValue, rightValue, state.direction);
});
sortedRows.forEach((row) => {
table.appendChild(row);
row.hidden = !rowMatchesQuery(row, state.query);
});
setHeaderState(columnIndex, direction);
setHeaderState(state.columnIndex, state.direction);
}
headerButtons.forEach((button, index) => {
@@ -280,14 +305,21 @@
state.columnIndex = index;
state.direction = direction;
sortRows(index, direction);
renderRows();
});
});
if (searchInput) {
searchInput.addEventListener('input', () => {
state.query = searchInput.value.trim().toLowerCase();
renderRows();
});
}
if (headerRow) {
setHeaderState(state.columnIndex, state.direction);
}
sortRows(state.columnIndex, state.direction);
renderRows();
})();
</script>