Column Settings

Column Settings открывает Dialog со списком колонок в порядке показа: каждую можно перетащить за рукоятку, скрываемые — снять чекбоксом. Сверху опционально переключатель компактного вида и режим ширины «по ширине / по содержимому». Подтверждение пишет порядок и флаги в bindable columns и зовёт onsave; отмена откатывает черновик. Те же настройки подходят сериям графика.

Статус: experimental · в системе с 2026-09 · интерактивность: always (всегда)

Когда использовать

Отчёт с десятками колонок: пользователь оставляет нужные и меняет порядок.
Серии графика: какие показывать и в каком порядке.

Не использовать:

Одна-две колонки — переключатель прямо в шапке проще диалога.

Альтернативы:

table — сама таблица с widths и size
checkbox-group — показ без порядка

Колонки отчёта

Компактный вид, режим ширины и восемь колонок с перестановкой; первая колонка без чекбокса.

Показаны: Кампания, Показы, Клики, Расход; обычно, auto

<!--
  🟢

  Колонки отчёта (эталон: Vue-легаси modal/settingsTable): компактный вид,
  режим ширины и колонки с перестановкой; «Кампания» без чекбокса.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ColumnSettings from "$lib/ui/ColumnSettings.svelte";

let columns = $state([
	{ key: "name", label: t("Кампания"), show: true, hideable: false },
	{ key: "impressions", label: t("Показы"), show: true },
	{ key: "clicks", label: t("Клики"), show: true },
	{ key: "ctr", label: "CTR", show: false },
	{ key: "spend", label: t("Расход"), show: true },
	{ key: "cpa", label: "CPA", show: false },
]);
let compact = $state(false);
let fit = $state("auto");
</script>

<div style="display: flex; align-items: center; gap: var(--sp-2);">
	<ColumnSettings bind:columns bind:compact bind:fit />
	<span aria-live="polite">
		{t("Показаны:")} {columns.filter((c) => c.show).map((c) => c.label).join(", ")}; {compact ? t("компактно") : t("обычно")}, {fit}
	</span>
</div>