Implement global table sorting, dashboard UI enhancements, and secret cloud access
This commit is contained in:
46
src/core/tableHandler.ts
Normal file
46
src/core/tableHandler.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* 공통 테이블 핸들러
|
||||
*/
|
||||
|
||||
export type SortDirection = 'asc' | 'desc';
|
||||
|
||||
export interface SortState {
|
||||
key: string;
|
||||
direction: SortDirection;
|
||||
}
|
||||
|
||||
/**
|
||||
* 테이블 헤더에 정렬 이벤트를 바인딩합니다.
|
||||
* @param table 대상 테이블 요소
|
||||
* @param currentState 현재 정렬 상태
|
||||
* @param onSort 정렬 변경 시 호출될 콜백
|
||||
*/
|
||||
export function setupTableSorting(
|
||||
table: HTMLTableElement,
|
||||
currentState: SortState,
|
||||
onSort: (key: string, direction: SortDirection) => void
|
||||
) {
|
||||
const headers = table.querySelectorAll('th[data-sort]');
|
||||
|
||||
headers.forEach(th => {
|
||||
const key = th.getAttribute('data-sort')!;
|
||||
th.classList.add('sortable');
|
||||
|
||||
// 현재 정렬 상태 표시
|
||||
if (currentState.key === key) {
|
||||
th.classList.add(currentState.direction);
|
||||
} else {
|
||||
th.classList.remove('asc', 'desc');
|
||||
}
|
||||
|
||||
th.onclick = () => {
|
||||
let nextDirection: SortDirection = 'asc';
|
||||
|
||||
if (currentState.key === key) {
|
||||
nextDirection = currentState.direction === 'asc' ? 'desc' : 'asc';
|
||||
}
|
||||
|
||||
onSort(key, nextDirection);
|
||||
};
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user