kunkun-extensions-mirror/kunkunsh-kunkun-ext-neohtop
1
0
Fork 0
mirror of https://github.com/kunkunsh/kunkun-ext-neohtop.git synced 2025-04-03 17:36:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

TableHeader component

Browse Source
This commit is contained in:
Abdenasser 2024-11-13 13:56:49 +01:00
parent 73ada67432
commit bbe778e120
2 changed files with 81 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/lib/components/process/ProcessTable.svelte
View File

@ -7,6 +7,7 @@
import Fa from "svelte-fa";
import type { Process, Column } from "$lib/types";
import ProcessIcon from "./ProcessIcon.svelte";
import TableHeader from "./TableHeader.svelte";
export let processes: Process[];
export let columns: Column[];
@ -18,33 +19,11 @@
export let onTogglePin: (command: string) => void;
export let onShowDetails: (process: Process) => void;
export let onKillProcess: (process: Process) => void;
function getSortIndicator(field: keyof Process) {
if (sortConfig.field !== field) return "↕";
return sortConfig.direction === "asc" ? "↑" : "↓";
}
</script>
<div class="table-container">
<table>
<thead>
<tr>
{#each columns.filter((col) => col.visible) as column}
<th class="sortable" on:click={() => onToggleSort(column.id)}>
<div class="th-content">
{column.label}
<span
class="sort-indicator"
class:active={sortConfig.field === column.id}
>
{getSortIndicator(column.id)}
</span>
</div>
</th>
{/each}
<th>Actions</th>
</tr>
</thead>
<TableHeader {columns} {sortConfig} {onToggleSort} />
<tbody>
{#each processes as process (process.pid)}
<tr
@ -147,19 +126,6 @@
font-size: 13px;
}
th {
position: sticky;
top: 0;
background: var(--mantle);
text-align: left;
padding: 8px 12px;
font-weight: 500;
color: var(--subtext0);
border-bottom: 1px solid var(--surface0);
transition: background-color 0.2s ease;
z-index: 3;
}
td {
padding: 6px 12px;
border-bottom: 1px solid var(--surface0);
@ -178,33 +144,6 @@
max-width: 0;
}
.sortable {
cursor: pointer;
user-select: none;
}
.th-content {
display: flex;
align-items: center;
gap: 8px;
}
.sort-indicator {
color: var(--overlay0);
font-size: 12px;
opacity: 0.5;
transition: all 0.2s ease;
}
.sort-indicator.active {
color: var(--blue);
opacity: 1;
}
.sortable:hover .sort-indicator {
opacity: 1;
}
.high-usage {
background-color: color-mix(in srgb, var(--red) 10%, transparent);
}
@ -221,12 +160,6 @@
background-color: color-mix(in srgb, var(--blue) 15%, transparent);
}
th:last-child {
width: 120px;
min-width: 120px;
max-width: 120px;
}
td:last-child {
width: 120px;
min-width: 120px;

79
src/lib/components/process/TableHeader.svelte
View File

@ -0,0 +1,79 @@
<script lang="ts">
import type { Process, Column } from "$lib/types";
export let columns: Column[];
export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
export let onToggleSort: (field: keyof Process) => void;
function getSortIndicator(field: keyof Process) {
if (sortConfig.field !== field) return "↕";
return sortConfig.direction === "asc" ? "↑" : "↓";
}
</script>
<thead>
<tr>
{#each columns.filter((col) => col.visible) as column}
<th class="sortable" on:click={() => onToggleSort(column.id)}>
<div class="th-content">
{column.label}
<span
class="sort-indicator"
class:active={sortConfig.field === column.id}
>
{getSortIndicator(column.id)}
</span>
</div>
</th>
{/each}
<th>Actions</th>
</tr>
</thead>
<style>
th {
position: sticky;
top: 0;
background: var(--mantle);
text-align: left;
padding: 8px 12px;
font-weight: 500;
color: var(--subtext0);
border-bottom: 1px solid var(--surface0);
transition: background-color 0.2s ease;
z-index: 3;
}
th:last-child {
width: 120px;
min-width: 120px;
max-width: 120px;
}
.sortable {
cursor: pointer;
user-select: none;
}
.th-content {
display: flex;
align-items: center;
gap: 8px;
}
.sort-indicator {
color: var(--overlay0);
font-size: 12px;
opacity: 0.5;
transition: all 0.2s ease;
}
.sort-indicator.active {
color: var(--blue);
opacity: 1;
}
.sortable:hover .sort-indicator {
opacity: 1;
}
</style>