@konce-pt/react 0.11.2 → 0.14.0

package/dist/data-table/data-table.js

@@ -1,10 +1,13 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { aggregate, isEmptyFilterValue, matchesColumnFilter, toText, } from '@konce-pt/table';
+import { useEffect, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { aggregate, columnOffsets, createGlobalFilter, cssLengthToPx, isEmptyFilterValue, matchesColumnFilter, sortRows, toText, virtualColumnRange, virtualRange, } from '@konce-pt/table';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptButton } from "../button/button.js";
+import { KptSpeechButton } from "../speech/speech-button.js";
+import { useKptSpeechRecognition } from "../speech/use-speech-recognition.js";
 import { KptDatepicker } from "../datepicker/datepicker.js";
 import { KptDateRange } from "../date-range/date-range.js";
 import { KptIcon } from "../icon/icon.js";
@@ -17,8 +20,31 @@ import { exportTableCsv } from "./export-csv.js";
 const REM_PX = 16;
 const CHECKBOX_FROZEN_W = 3; // rem
 const EXPANDER_FROZEN_W = 2.5; // rem
-const VIRTUAL_BUFFER = 6;
-/** Edytory z panelem w nakładce — otwierane od razu i zatwierdzane na zamknięciu panelu. */
+/** Wiersze dorenderowane nad i pod widocznym oknem. */
+const ROW_OVERSCAN = 6;
+/** Kolumny dorenderowane po obu stronach widocznego okna. */
+const COLUMN_OVERSCAN = 2;
+/** Powyżej tylu wierszy filtr globalny czeka na przerwę w pisaniu, zamiast liczyć co znak. */
+const FILTER_DEBOUNCE_ROWS = 2000;
+const FILTER_DEBOUNCE_MS = 150;
+/** Kawałek rozgrzewania indeksu wyszukiwania na jedno wywołanie w czasie bezczynności. */
+const WARMUP_SLICE_MS = 8;
+function scheduleIdle(fn) {
+    return typeof requestIdleCallback === 'function' ? { idle: requestIdleCallback(fn) } : { timer: setTimeout(fn, 16) };
+}
+function cancelIdle(handle) {
+    if (!handle)
+        return;
+    if ('idle' in handle)
+        cancelIdleCallback(handle.idle);
+    else
+        clearTimeout(handle.timer);
+}
+/** Okna równe, gdy obejmują te same elementy - przewinięcie w obrębie okna nie budzi renderu. */
+function sameWindow(a, b) {
+    return a.start === b.start && a.end === b.end && a.before === b.before && a.after === b.after;
+}
+/** Edytory z panelem w nakładce - otwierane od razu i zatwierdzane na zamknięciu panelu. */
 const OVERLAY_EDITORS = new Set(['date', 'select', 'multiselect']);
 /** Tablice (multiselect) porównujemy po zawartości, resztę po referencji. */
 function sameEditValue(a, b) {
@@ -28,6 +54,16 @@ function sameEditValue(a, b) {
         return a.length === b.length && a.every((v, i) => v === b[i]);
     return false;
 }
+/**
+ * Szerokość kolumny w px: z jednostki (`px`/`rem`/`em`), a gdy się nie da - w trybie wirtualnym
+ * `columnWidth`, poza nim pomiar z wyrenderowanego nagłówka, a do pierwszego pomiaru 8 rem.
+ */
+function columnPx(col, virtual, defaultPx, measured) {
+    const fromUnit = cssLengthToPx(col.width, REM_PX);
+    if (fromUnit !== null)
+        return fromUnit;
+    return virtual ? defaultPx : (measured.get(col.field) ?? 8 * REM_PX);
+}
 const EMPTY_ROWS = [];
 const EMPTY_FIELDS = [];
 /**
@@ -46,8 +82,14 @@ const EMPTY_FIELDS = [];
 function getValue(row, field) {
     return row[field];
 }
-export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, filterRowPosition = 'bottom', pageSize = 0, pageSizeOptions = [5, 10, 20, 50], selectable = 'none', loading = false, emptyMessage, rowKey = null, scrollHeight = null, virtualScroll = false, rowHeight = 41, reorderable = false, exportable = false, exportFilename = 'export.csv', lazy = false, totalRecords = null, expandable = false, multiExpand = true, summaryLabel, summaryValues = null, selection, defaultSelection = EMPTY_ROWS, onSelectionChange, expandedRows, defaultExpandedRows = EMPTY_ROWS, onExpandedRowsChange, hiddenFields, defaultHiddenFields = EMPTY_FIELDS, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }) {
-    const { t } = useKptMessages({ locale, dictionary });
+export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, filterSpeech = false, filterSpeechLang, filterSpeechColor, filterRowPosition = 'bottom', pageSize = 0, pageSizeOptions = [5, 10, 20, 50], selectable = 'none', loading = false, ariaLabel = null, caption = null, clickableRows, emptyMessage, rowKey = null, scrollHeight = null, virtualScroll = false, columnWidth = '10rem', rowHeight = 41, reorderable = false, frozenSystemColumns = false, exportable = false, exportFilename = 'export.csv', lazy = false, totalRecords = null, expandable = false, multiExpand = true, summaryLabel, summaryValues = null, selection, defaultSelection = EMPTY_ROWS, onSelectionChange, expandedRows, defaultExpandedRows = EMPTY_ROWS, onExpandedRowsChange, hiddenFields, defaultHiddenFields = EMPTY_FIELDS, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
+    const uid = useId();
+    const rowsClickable = clickableRows ?? onRowClick !== undefined;
+    /** Ogłoszenie po przestawieniu kolumny z klawiatury. */
+    const [moveAnnouncement, setMoveAnnouncement] = useState('');
+    /** Pole kolumny, której uchwyt ma dostać fokus po przerysowaniu (ustawiane w zdarzeniu, czytane w efekcie). */
+    const focusGrip = useRef(null);
     const [picked, setPicked] = useControllableState({
         value: selection,
         defaultValue: defaultSelection,
@@ -58,28 +100,54 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         defaultValue: defaultExpandedRows,
         onChange: onExpandedRowsChange,
     });
-    const [hidden, setHidden] = useControllableState({
+    const [hidden] = useControllableState({
         value: hiddenFields,
         defaultValue: defaultHiddenFields,
         onChange: onHiddenFieldsChange,
     });
     const [filterText, setFilterText] = useState('');
+    /** Treść pola wyszukiwania - przy dużych zbiorach wyprzedza `filterText` o czas debounce. */
+    const [filterInput, setFilterInput] = useState('');
+    // Filtr głosem: pole czyści się po kliknięciu, a fraza wchodzi przez `onChange` jak wpisana -
+    // z tym samym opóźnieniem dla dużych danych. Bez `filterSpeech` kontroler nie tworzy sesji.
+    const filterRef = useRef(null);
+    const filterMic = useKptSpeechRecognition({
+        enabled: filterable && filterSpeech,
+        target: filterRef,
+        lang: filterSpeechLang,
+        mode: 'replace',
+        continuous: false,
+    });
+    const filterSpeechState = filterable && filterSpeech && filterMic.available ? (filterMic.listening ? 'listening' : 'idle') : undefined;
+    const filterTimer = useRef(undefined);
     const [columnFilters, setColumnFilters] = useState({});
     const [sortField, setSortField] = useState(null);
     const [sortDir, setSortDir] = useState(null);
     const [pageIndex, setPageIndex] = useState(0);
     const [pageSizeState, setPageSizeState] = useState(pageSize || 10);
+    // Nowy `pageSize` od rodzica zastępuje rozmiar wybrany w paginatorze - jak `linkedSignal` w Angularze.
+    const [seenPageSize, setSeenPageSize] = useState(pageSize);
+    if (seenPageSize !== pageSize) {
+        setSeenPageSize(pageSize);
+        setPageSizeState(pageSize || 10);
+        setPageIndex(0);
+    }
     // Kolejność kolumn żyje w stanie (przestawianie), ale nowe `columns` z zewnątrz ją zastępują.
+    // Poprzednie `columns` trzymamy w stanie, nie w refie - wzorzec "zmiana propsa resetuje stan"
+    // z react.dev; ref zależałby od tego, czy React nie wyrzucił renderu (StrictMode, concurrent).
     const [order, setOrder] = useState(columns);
-    const columnsRef = useRef(columns);
-    if (columnsRef.current !== columns) {
-        columnsRef.current = columns;
-        if (order !== columns)
-            setOrder(columns);
+    const [seenColumns, setSeenColumns] = useState(columns);
+    if (seenColumns !== columns) {
+        setSeenColumns(columns);
+        setOrder(columns);
     }
+    /** Zmierzone szerokości kolumn zamrożonych bez szerokości liczalnej z jednostki (`%`, `ch`). */
+    const [measuredWidths, setMeasuredWidths] = useState(() => new Map());
     const [dragField, setDragField] = useState(null);
-    const [scrollTop, setScrollTop] = useState(0);
-    const [viewportHeight, setViewportHeight] = useState(400);
+    /** Przewinięcie zapisane wtedy, gdy zmienia okno wierszy albo kolumn - nie przy każdym pikselu. */
+    const [scroll, setScroll] = useState({ top: 0, left: 0 });
+    const [viewport, setViewport] = useState({ height: 400, width: 1200 });
+    const scrollFrame = useRef(0);
     const [theadOffset, setTheadOffset] = useState(0);
     const scrollRef = useRef(null);
     const theadRef = useRef(null);
@@ -91,12 +159,19 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
     const hasColumnFilters = columns.some((col) => col.filter);
     const hasRowDetail = expandable && !!renderRowDetail;
     const sameRow = (a, b) => rowKey ? getValue(a, rowKey) === getValue(b, rowKey) : a === b;
-    // ── Potok danych ──
+    /** Tożsamość wiersza: wartość `rowKey` albo sam wiersz - klucz zbiorów zaznaczenia i rozwinięcia. */
+    const keyOf = (row) => (rowKey ? getValue(row, rowKey) : row);
+    // -- Potok danych --
+    /**
+     * Filtr globalny z pamięcią złożonego tekstu wiersza (`@konce-pt/table`) - nowy przy zmianie
+     * kolumn, więc kolejne znaki frazy nie składają od nowa 20 000 x 100 komórek.
+     */
+    const globalFilter = useMemo(() => createGlobalFilter(columns.map((col) => col.field)), [columns]);
     const filtered = useMemo(() => {
-        const query = filterText.trim().toLowerCase();
         let rows = data;
-        if (query) {
-            rows = rows.filter((row) => columns.some((col) => toText(getValue(row, col.field)).toLowerCase().includes(query)));
+        if (filterText.trim()) {
+            // Bez diakrytyków i wielkości liter - "lodz" znajduje "Łódź" (`@konce-pt/table`).
+            rows = rows.filter((row) => globalFilter(row, filterText));
         }
         if (hasColumnFilters) {
             rows = rows.filter((row) => columns.every((col) => {
@@ -109,24 +184,38 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
             }));
         }
         return rows;
-    }, [columnFilters, columns, data, filterText, hasColumnFilters]);
+    }, [columnFilters, columns, data, filterText, globalFilter, hasColumnFilters]);
     const sorted = useMemo(() => {
         if (!sortField || !sortDir)
             return filtered;
-        const sign = sortDir === 'asc' ? 1 : -1;
-        return [...filtered].sort((a, b) => {
-            const av = getValue(a, sortField);
-            const bv = getValue(b, sortField);
-            // Puste komórki lądują na końcu niezależnie od kierunku — sortowanie ma pokazywać dane.
-            if (av == null)
-                return 1;
-            if (bv == null)
-                return -1;
-            if (typeof av === 'number' && typeof bv === 'number')
-                return (av - bv) * sign;
-            return toText(av).localeCompare(toText(bv)) * sign;
-        });
-    }, [filtered, sortDir, sortField]);
+        // Kolator dla aktywnego języka, klucze liczone raz na wiersz; puste komórki na końcu.
+        return sortRows(filtered, sortField, sortDir, activeLocale);
+    }, [activeLocale, filtered, sortDir, sortField]);
+    // Duży zbiór z wyszukiwaniem: tekst wierszy składamy w tle, kawałkami po kilka ms w czasie
+    // bezczynności - inaczej pierwszy znak frazy blokowałby stronę na cały zbiór naraz.
+    useEffect(() => {
+        if (!filterable || lazy)
+            return;
+        const rows = data;
+        if (rows.length <= FILTER_DEBOUNCE_ROWS)
+            return;
+        let index = 0;
+        let handle = null;
+        const step = () => {
+            const until = performance.now() + WARMUP_SLICE_MS;
+            while (index < rows.length && performance.now() < until)
+                globalFilter.prepare(rows[index++]);
+            if (index < rows.length)
+                handle = scheduleIdle(step);
+        };
+        handle = scheduleIdle(step);
+        return () => cancelIdle(handle);
+    }, [data, filterable, globalFilter, lazy]);
+    // Odmontowanie: porzucona klatka odczytu przewinięcia i czekający debounce filtra.
+    useEffect(() => () => {
+        cancelAnimationFrame(scrollFrame.current);
+        clearTimeout(filterTimer.current);
+    }, []);
     const paged = useMemo(() => {
         if (lazy)
             return data;
@@ -136,56 +225,77 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         return sorted.slice(start, start + pageSizeState);
     }, [data, lazy, pageIndex, pageSize, pageSizeState, sorted]);
     const filteredCount = lazy ? (totalRecords ?? data.length) : filtered.length;
-    // Tryb lazy: każda zmiana stanu to prośba do rodzica o dane.
+    // Tryb lazy: każda zmiana stanu to prośba do rodzica o dane. `onLazyLoad` czytamy przez
+    // `useEffectEvent`: nowa referencja funkcji przy każdym renderze rodzica nie może restartować
+    // efektu, bo wywołałaby pętlę żądań.
+    const requestLazyLoad = useEffectEvent((state) => onLazyLoad?.(state));
     useEffect(() => {
         if (!lazy)
             return;
-        onLazyLoad?.({ pageIndex, pageSize: pageSizeState, sortField, sortDir, filter: filterText, columnFilters });
-        // `onLazyLoad` celowo poza zależnościami: nowa referencja funkcji przy każdym renderze
-        // rodzica wywołałaby pętlę żądań.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        requestLazyLoad({ pageIndex, pageSize: pageSizeState, sortField, sortDir, filter: filterText, columnFilters });
     }, [lazy, pageIndex, pageSizeState, sortField, sortDir, filterText, columnFilters]);
     // Offset sticky drugiego wiersza nagłówka = wysokość pierwszego.
     useLayoutEffect(() => {
         const first = theadRef.current?.rows?.[0];
+        // Dokładna wysokość, nie `offsetHeight`: ten zaokrągla (46,5 -> 47) i przy skali ekranu innej
+        // niż 100% między wierszami nagłówka zostawała szpara, przez którą prześwitywały wiersze.
         if (first)
-            setTheadOffset(first.offsetHeight);
+            setTheadOffset(first.getBoundingClientRect().height);
     }, [filterRowPosition, hasColumnFilters, visibleColumns]);
+    // Rozmiar viewportu dla wirtualizacji - także po zmianie rozmiaru kontenera bez przewinięcia.
     useLayoutEffect(() => {
         const el = scrollRef.current;
-        if (el)
-            setViewportHeight(el.clientHeight);
+        if (!el)
+            return;
+        const measure = () => setViewport((prev) => prev.height === el.clientHeight && prev.width === el.clientWidth
+            ? prev
+            : { height: el.clientHeight, width: el.clientWidth });
+        measure();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
     }, []);
-    // Wejście w edycję → fokus na kontrolce edytora.
+    // Szerokości kolumn zamrożonych, których nie da się policzyć z jednostki - mierzone z nagłówków.
+    // Stan zmienia się tylko przy innej wartości, więc pomiar nie zapętla renderu.
+    useLayoutEffect(() => {
+        const head = theadRef.current;
+        if (!head)
+            return;
+        const next = new Map();
+        for (const col of visibleColumns) {
+            if (!col.frozen)
+                break;
+            if (cssLengthToPx(col.width, REM_PX) !== null)
+                continue;
+            const th = head.querySelector(`th[data-field="${CSS.escape(col.field)}"]`);
+            if (th)
+                next.set(col.field, th.offsetWidth);
+        }
+        setMeasuredWidths((prev) => prev.size === next.size && [...next].every(([key, value]) => prev.get(key) === value) ? prev : next);
+    }, [visibleColumns]);
+    // Po przestawieniu kolumny z klawiatury uchwyt jest przerysowany w nowym miejscu - fokus idzie za nim.
+    useLayoutEffect(() => {
+        const field = focusGrip.current;
+        if (field === null)
+            return;
+        focusGrip.current = null;
+        theadRef.current
+            ?.querySelector(`th[data-field="${CSS.escape(field)}"] .kpt-data-table__grip`)
+            ?.focus();
+    }, [order]);
+    // Wejście w edycję -> fokus na kontrolce edytora.
     useEffect(() => {
         if (!editingCell)
             return;
         editorHostRef.current?.querySelector('input, .kpt-select, [tabindex]')?.focus();
     }, [editingCell]);
-    // ── Wirtualizacja ──
-    const virtualStart = Math.max(0, Math.floor(scrollTop / rowHeight) - VIRTUAL_BUFFER);
-    const virtualEnd = Math.min(sorted.length, virtualStart + Math.ceil(viewportHeight / rowHeight) + VIRTUAL_BUFFER * 2);
-    const virtualRows = sorted.slice(virtualStart, virtualEnd);
-    const topPad = virtualStart * rowHeight;
-    const bottomPad = (sorted.length - virtualEnd) * rowHeight;
-    const onScroll = (event) => {
-        if (!virtualScroll)
-            return;
-        const el = event.currentTarget;
-        setScrollTop(el.scrollTop);
-        setViewportHeight(el.clientHeight);
-    };
-    // ── Kolumny zamrożone ──
-    const parseWidthPx = (width) => {
-        if (!width)
-            return 8 * REM_PX;
-        const n = Number.parseFloat(width);
-        if (Number.isNaN(n))
-            return 8 * REM_PX;
-        return width.trim().endsWith('px') ? n : n * REM_PX;
-    };
+    // -- Kolumny zamrożone --
     const leadingCells = (selectable !== 'none' ? 1 : 0) + (hasRowDetail ? 1 : 0);
     const leadingStickyWidth = (hasRowDetail ? EXPANDER_FROZEN_W * REM_PX : 0) + (selectable !== 'none' ? CHECKBOX_FROZEN_W * REM_PX : 0);
+    /** `columnWidth` w px; nieliczalna jednostka wraca do 10 rem. */
+    const defaultColumnPx = cssLengthToPx(columnWidth, REM_PX) ?? 10 * REM_PX;
     const frozenOffsets = useMemo(() => {
         const map = new Map();
         let acc = leadingStickyWidth;
@@ -193,15 +303,108 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
             if (!col.frozen)
                 break; // tylko wiodące, sąsiadujące
             map.set(col.field, acc);
-            acc += parseWidthPx(col.width);
+            acc += columnPx(col, virtualScroll, defaultColumnPx, measuredWidths);
         }
         return map;
-    }, [leadingStickyWidth, visibleColumns]);
-    const hasFrozen = frozenOffsets.size > 0;
-    const frozenLeft = (field) => frozenOffsets.get(field);
+    }, [defaultColumnPx, leadingStickyWidth, measuredWidths, virtualScroll, visibleColumns]);
+    /** Czy cokolwiek jest przyklejone do lewej - kolumny `frozen` albo same systemowe. */
+    const hasFrozen = frozenOffsets.size > 0 || (frozenSystemColumns && leadingCells > 0);
     const expanderStickyLeft = hasFrozen ? 0 : undefined;
     const checkboxStickyLeft = hasFrozen ? (hasRowDetail ? EXPANDER_FROZEN_W * REM_PX : 0) : undefined;
-    // ── Przestawianie kolumn ──
+    // -- Kolumny do renderowania (metadane + okno wirtualizacji) --
+    /** Widoczne kolumny z cechami policzonymi raz - nie przy każdej komórce każdego wiersza. */
+    const columnMeta = useMemo(() => visibleColumns.map((col, index) => ({
+        col,
+        index,
+        editable: !!col.edit || !!cellEditors?.[col.field],
+        frozen: frozenOffsets.has(col.field),
+        left: frozenOffsets.get(col.field),
+        align: col.align ?? 'start',
+        width: columnPx(col, virtualScroll, defaultColumnPx, measuredWidths),
+    })), [cellEditors, defaultColumnPx, frozenOffsets, measuredWidths, virtualScroll, visibleColumns]);
+    /** Kolumny przewijalne (za wiodącymi zamrożonymi) i ich sumy prefiksowe szerokości. */
+    const scrollable = useMemo(() => {
+        const pinned = columnMeta.filter((m) => m.frozen);
+        const rest = columnMeta.slice(pinned.length);
+        // Kolumny systemowe zasłaniają lewą krawędź okna tylko wtedy, gdy są przyklejone.
+        const leading = hasFrozen ? leadingStickyWidth : 0;
+        const pinnedWidth = leading + pinned.reduce((sum, m) => sum + m.width, 0);
+        return { pinned, rest, pinnedWidth, offsets: columnOffsets(rest.map((m) => m.width)) };
+    }, [columnMeta, hasFrozen, leadingStickyWidth]);
+    // -- Wirtualizacja --
+    const rowWindowAt = (top) => virtualRange({
+        offset: top,
+        viewport: viewport.height,
+        itemSize: rowHeight,
+        count: sorted.length,
+        overscan: ROW_OVERSCAN,
+    });
+    const columnWindowAt = (left) => virtualScroll
+        ? virtualColumnRange({
+            offsets: scrollable.offsets,
+            scrollLeft: left,
+            viewport: viewport.width,
+            overscan: COLUMN_OVERSCAN,
+            pinnedWidth: scrollable.pinnedWidth,
+        })
+        : { start: 0, end: scrollable.rest.length, before: 0, after: 0 };
+    const rowWindow = rowWindowAt(scroll.top);
+    const columnWindow = columnWindowAt(scroll.left);
+    const virtualRows = sorted.slice(rowWindow.start, rowWindow.end);
+    const topPad = rowWindow.before;
+    const bottomPad = rowWindow.after;
+    // Odczyt przewinięcia w `requestAnimationFrame` porównuje okna z tymi z ostatniego renderu -
+    // obie strony muszą widzieć bieżące dane, więc odświeżamy je po każdym renderze.
+    const windowsAt = useRef(null);
+    const shownWindows = useRef(null);
+    useLayoutEffect(() => {
+        windowsAt.current = (top, left) => ({ row: rowWindowAt(top), col: columnWindowAt(left) });
+        shownWindows.current = { row: rowWindow, col: columnWindow };
+    });
+    /** Jedna klatka na odczyt przewinięcia, a render tylko wtedy, gdy zmienia się okno wierszy lub kolumn. */
+    const onScroll = (event) => {
+        if (!virtualScroll || scrollFrame.current)
+            return;
+        const el = event.currentTarget;
+        scrollFrame.current = requestAnimationFrame(() => {
+            scrollFrame.current = 0;
+            const top = el.scrollTop;
+            const left = el.scrollLeft;
+            const next = windowsAt.current?.(top, left);
+            const shown = shownWindows.current;
+            if (next && shown && sameWindow(next.row, shown.row) && sameWindow(next.col, shown.col))
+                return;
+            setScroll({ top, left });
+        });
+    };
+    /** Nowy wynik filtra lub sortowania zaczyna się od góry - stare przewinięcie wskazywałoby w środek innego zbioru. */
+    const scrollToTop = () => {
+        const el = scrollRef.current;
+        if (virtualScroll && el)
+            el.scrollTop = 0;
+    };
+    /** Pozycje wiersza: kolumny zamrożone, dystansownik, okno kolumn, dystansownik. */
+    const slots = scrollable.pinned.map((m) => ({ key: m.col.field, meta: m, width: m.width, upTo: m.index }));
+    {
+        const { rest } = scrollable;
+        const { start, end, before, after } = columnWindow;
+        const firstIndex = rest[start]?.index ?? scrollable.pinned.length;
+        if (before > 0)
+            slots.push({ key: '\u0000before', meta: null, width: before, upTo: firstIndex });
+        for (let i = start; i < end; i++)
+            slots.push({ key: rest[i].col.field, meta: rest[i], width: rest[i].width, upTo: rest[i].index });
+        if (after > 0)
+            slots.push({ key: '\u0000after', meta: null, width: after, upTo: columnMeta.length });
+    }
+    /** Pełna szerokość tabeli w trybie wirtualnym (`table-layout: fixed`). */
+    const tableWidth = virtualScroll
+        ? scrollable.pinnedWidth + scrollable.offsets[scrollable.offsets.length - 1]
+        : undefined;
+    /** Liczba wierszy nagłówka (etykiety + ewentualnie filtry) - przesunięcie `aria-rowindex`. */
+    const headerRowCount = hasColumnFilters ? 2 : 1;
+    /** `aria-colindex` komórki kolumny (od 1, z kolumnami systemowymi) - tylko w trybie wirtualnym. */
+    const colIndex = (meta) => virtualScroll ? leadingCells + meta.index + 1 : undefined;
+    // -- Przestawianie kolumn --
     const frozenLeadCount = (() => {
         let n = 0;
         for (const col of visibleColumns) {
@@ -230,10 +433,31 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         setOrder(cols);
         setDragField(null);
     };
-    // ── Sortowanie ──
+    /** Strzałki na uchwycie przestawiają kolumnę o jedno miejsce - alternatywa dla przeciągania. */
+    const onGripKeyDown = (field, event) => {
+        const delta = event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0;
+        if (!delta)
+            return;
+        event.preventDefault();
+        const from = visibleColumns.findIndex((col) => col.field === field);
+        const to = from + delta;
+        // Kolumny zamrożone zostają wiodące - nie wolno ich minąć ani wyjechać poza tabelę.
+        if (from === -1 || to < frozenLeadCount || to >= visibleColumns.length)
+            return;
+        const cols = [...order];
+        const fromIdx = cols.findIndex((col) => col.field === field);
+        const toIdx = cols.findIndex((col) => col.field === visibleColumns[to].field);
+        const [moved] = cols.splice(fromIdx, 1);
+        cols.splice(toIdx, 0, moved);
+        setOrder(cols);
+        setMoveAnnouncement(t('dataTable.columnMoved', { column: moved.header, position: to + 1, count: visibleColumns.length }));
+        focusGrip.current = field;
+    };
+    // -- Sortowanie --
     const toggleSort = (col) => {
         if (!col.sortable)
             return;
+        scrollToTop();
         if (sortField !== col.field) {
             setSortField(col.field);
             setSortDir('asc');
@@ -253,10 +477,26 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
             return 'none';
         return sortDir === 'asc' ? 'ascending' : 'descending';
     };
-    // ── Filtry kolumn ──
+    // -- Filtry kolumn --
     const setColumnFilter = (field, value) => {
         setColumnFilters((current) => ({ ...current, [field]: value }));
         setPageIndex(0);
+        scrollToTop();
+    };
+    // -- Filtr globalny --
+    const applyFilter = (value) => {
+        setFilterText(value);
+        setPageIndex(0);
+        scrollToTop();
+    };
+    /** Przy dużych zbiorach filtr czeka na przerwę w pisaniu; pole pokazuje tekst od razu. */
+    const onFilterInput = (value) => {
+        setFilterInput(value);
+        clearTimeout(filterTimer.current);
+        if (data.length > FILTER_DEBOUNCE_ROWS)
+            filterTimer.current = setTimeout(() => applyFilter(value), FILTER_DEBOUNCE_MS);
+        else
+            applyFilter(value);
     };
     const rangeVal = (field) => {
         const value = columnFilters[field];
@@ -267,8 +507,10 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         const max = col.filter?.max ?? 100;
         return columnFilters[col.field] ?? [min, max];
     };
-    // ── Zaznaczanie ──
-    const isSelected = (row) => picked.some((r) => sameRow(r, row));
+    // -- Zaznaczanie --
+    /** Klucze zaznaczonych wierszy - przy "zaznacz wszystko" na 20 000 wierszach `some()` dawałoby O(n^2). */
+    const selectedKeys = useMemo(() => new Set(picked.map((r) => (rowKey ? getValue(r, rowKey) : r))), [picked, rowKey]);
+    const isSelected = (row) => selectedKeys.has(keyOf(row));
     const toggleRow = (row) => {
         if (selectable === 'none')
             return;
@@ -281,20 +523,24 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
     const pageAllSelected = paged.length > 0 && paged.every((row) => isSelected(row));
     const pageSomeSelected = paged.some((row) => isSelected(row)) && !pageAllSelected;
     const toggleAllOnPage = () => {
-        if (pageAllSelected)
-            setPicked(picked.filter((r) => !paged.some((pr) => sameRow(pr, r))));
+        if (pageAllSelected) {
+            const pageKeys = new Set(paged.map(keyOf));
+            setPicked(picked.filter((r) => !pageKeys.has(keyOf(r))));
+        }
         else
             setPicked([...picked, ...paged.filter((row) => !isSelected(row))]);
     };
-    // ── Rozwijane wiersze ──
-    const isExpanded = (row) => expanded.some((r) => sameRow(r, row));
+    // -- Rozwijane wiersze --
+    /** Klucze rozwiniętych wierszy - `isExpanded` w O(1) zamiast przeszukiwania listy dla każdego wiersza. */
+    const expandedKeys = useMemo(() => new Set(expanded.map((r) => (rowKey ? getValue(r, rowKey) : r))), [expanded, rowKey]);
+    const isExpanded = (row) => expandedKeys.has(keyOf(row));
     const toggleExpand = (row) => {
         if (isExpanded(row))
             setExpanded(expanded.filter((r) => !sameRow(r, row)));
         else
             setExpanded(multiExpand ? [...expanded, row] : [row]);
     };
-    // ── Edycja inline ──
+    // -- Edycja inline --
     const isEditable = (col) => !!col.edit || !!cellEditors?.[col.field];
     const isEditingCell = (row, field) => !!editingCell && editingCell.field === field && sameRow(editingCell.row, row);
     const startEdit = (row, col, event) => {
@@ -324,7 +570,7 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
     /**
      * Edytory bez panelu (text/number, własne) zatwierdza dopiero wyjście fokusu poza CAŁY edytor:
      * `KptInputNumber` ma fokusowalne strzałki obok pola, więc reakcja na blur samej kontrolki
-     * zamykałaby edycję przy każdym kliknięciu w „+".
+     * zamykałaby edycję przy każdym kliknięciu w "+".
      */
     const onEditorFocusOut = (event) => {
         if (editorPanelOpen)
@@ -340,7 +586,7 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         if (!open)
             commitEdit();
     };
-    // ── Wiersz podsumowania ──
+    // -- Wiersz podsumowania --
     const summarySource = lazy ? EMPTY_ROWS : filtered;
     const overrides = summaryValues ?? {};
     const summaryFields = visibleColumns
@@ -348,22 +594,61 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         .map((col) => col.field);
     const hasSummary = summaryFields.length > 0;
     const summaryStartIndex = summaryFields[0] === undefined ? -1 : visibleColumns.findIndex((col) => col.field === summaryFields[0]);
-    const summaryLabelSpan = leadingCells + summaryStartIndex;
-    const formatSummary = (raw, format) => format ? format(raw) : toText(raw);
-    const summaryText = (col) => {
-        if (col.field in overrides)
-            return formatSummary(overrides[col.field], col.summary?.format);
-        if (!col.summary)
-            return '';
-        const raw = typeof col.summary.fn === 'function'
-            ? col.summary.fn(summarySource)
-            : aggregate(summarySource, col.field, col.summary.fn);
-        return formatSummary(raw, col.summary.format);
-    };
-    const colspan = visibleColumns.length + leadingCells;
+    /**
+     * Komórki wiersza podsumowania: etykieta scala kolumny systemowe, kolumny przed pierwszą
+     * podsumowywaną i dystansownik, o ile ten też stoi przed nią; reszta jak w `slots`.
+     * Przy kolumnach zamrożonych etykieta kończy się na ich granicy - jest przyklejona do lewej,
+     * więc scalona z kolumnami przewijanymi zasłaniałaby je przy przewijaniu w poziomie, a jej
+     * szerokość skakałaby przy każdym przestawieniu kolumny. Kolumny za granicą dostają puste komórki.
+     * Gdy przyklejone są same kolumny systemowe (`frozenSystemColumns`), są za wąskie na etykietę:
+     * dostają pustą przyklejoną komórkę (`systemSpan`), a etykieta staje za nimi, nad kolumnami
+     * przed pierwszą liczoną, i przewija się razem z nimi.
+     * `labelSpan` równe zero (pierwsza widoczna kolumna jest liczona) = etykieta nie ma się gdzie
+     * zmieścić i nie renderuje się wcale.
+     */
+    const summaryLayout = (() => {
+        const isBeforeStart = (slot) => slot.meta ? slot.meta.index < summaryStartIndex : slot.upTo <= summaryStartIndex;
+        let frozenSpan = 0;
+        const restSlots = [];
+        for (const slot of slots) {
+            const fitsLabel = !hasFrozen || slot.meta?.frozen === true;
+            if (restSlots.length === 0 && isBeforeStart(slot) && fitsLabel)
+                frozenSpan++;
+            else
+                restSlots.push(slot);
+        }
+        if (hasFrozen && frozenSpan === 0 && leadingCells > 0) {
+            let free = 0;
+            while (free < restSlots.length && isBeforeStart(restSlots[free]))
+                free++;
+            if (free > 0)
+                return { systemSpan: leadingCells, labelSpan: free, labelSticky: false, slots: restSlots.slice(free) };
+        }
+        return { systemSpan: 0, labelSpan: leadingCells + frozenSpan, labelSticky: hasFrozen, slots: restSlots };
+    })();
+    /** Gotowe teksty komórek podsumowania (pole -> tekst) - agregacja całego zbioru raz, nie przy każdym renderze. */
+    const summaryTexts = useMemo(() => {
+        const values = summaryValues ?? {};
+        const format = (raw, fmt) => (fmt ? fmt(raw) : toText(raw));
+        const map = new Map();
+        for (const col of visibleColumns) {
+            if (col.field in values)
+                map.set(col.field, format(values[col.field], col.summary?.format));
+            else if (col.summary) {
+                const raw = typeof col.summary.fn === 'function'
+                    ? col.summary.fn(summarySource)
+                    : aggregate(summarySource, col.field, col.summary.fn);
+                map.set(col.field, format(raw, col.summary.format));
+            }
+        }
+        return map;
+    }, [summarySource, summaryValues, visibleColumns]);
+    /** Komórki faktycznie renderowane w wierszu (w trybie wirtualnym okno kolumn + dystansowniki). */
+    const colspan = slots.length + leadingCells;
     const displayCount = virtualScroll ? sorted.length : paged.length;
     const rowsToRender = virtualScroll ? virtualRows : paged;
-    // ── Renderowanie ──
+    // -- Renderowanie --
+    const hspacer = (slot) => (_jsx("td", { className: "kpt-data-table__hspacer", "aria-hidden": "true" }, slot.key));
     const filterCell = (col) => {
         const filter = col.filter;
         if (!filter)
@@ -386,7 +671,8 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
                 return null;
         }
     };
-    const filterRow = (_jsxs("tr", { className: "kpt-data-table__filter-row", children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable !== 'none' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft } })) : null, visibleColumns.map((col) => (_jsx("th", { style: { width: col.width, left: frozenLeft(col.field) }, "data-align": col.align ?? 'start', className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen'), children: filterCell(col) }, col.field)))] }));
+    const filterRowIndex = filterRowPosition === 'top' ? 1 : 2;
+    const filterRow = (_jsxs("tr", { className: "kpt-data-table__filter-row", "aria-rowindex": virtualScroll ? filterRowIndex : undefined, children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable !== 'none' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft } })) : null, slots.map((slot) => slot.meta ? (_jsx("th", { style: { width: virtualScroll ? undefined : slot.meta.col.width, left: slot.meta.left }, "data-align": slot.meta.align, "aria-colindex": colIndex(slot.meta), className: cn(slot.meta.frozen && 'kpt-data-table__cell--frozen'), children: filterCell(slot.meta.col) }, slot.key)) : (hspacer(slot)))] }));
     const editor = (row, col) => {
         const custom = cellEditors?.[col.field];
         if (custom) {
@@ -425,37 +711,58 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
                 return null;
         }
     };
-    const renderRow = (row, index) => (_jsxs("tbody", { style: { display: 'contents' }, children: [_jsxs("tr", { className: cn(isSelected(row) && 'kpt-data-table__row--selected', hasRowDetail && isExpanded(row) && 'kpt-data-table__row--expanded'), style: { height: virtualScroll ? rowHeight : undefined }, onClick: () => onRowClick?.(row), children: [hasRowDetail ? (_jsx("td", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft }, children: _jsx("button", { type: "button", className: cn('kpt-data-table__expander-btn', isExpanded(row) && 'kpt-data-table__expander-btn--open'), "aria-expanded": isExpanded(row), "aria-label": t('dataTable.expandRow'), onClick: (event) => {
+    const renderRow = (row, index, ariaRowIndex) => (_jsxs("tbody", { style: { display: 'contents' }, children: [_jsxs("tr", { "aria-rowindex": ariaRowIndex, className: cn(isSelected(row) && 'kpt-data-table__row--selected', hasRowDetail && isExpanded(row) && 'kpt-data-table__row--expanded', rowsClickable && 'kpt-data-table__row--clickable'), style: { height: virtualScroll ? rowHeight : undefined }, tabIndex: rowsClickable ? 0 : undefined, onClick: () => onRowClick?.(row), onKeyDown: rowsClickable
+                    ? (event) => {
+                        // Tylko na samym wierszu - Enter w kontrolce komórki należy do niej.
+                        if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' '))
+                            return;
+                        event.preventDefault();
+                        onRowClick?.(row);
+                    }
+                    : undefined, children: [hasRowDetail ? (_jsx("td", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft }, children: _jsx("button", { type: "button", className: cn('kpt-data-table__expander-btn', isExpanded(row) && 'kpt-data-table__expander-btn--open'), "aria-expanded": isExpanded(row), "aria-label": t('dataTable.expandRow'), onClick: (event) => {
                                 event.stopPropagation();
                                 toggleExpand(row);
-                            }, children: _jsx(KptIcon, { name: "chevron-right" }) }) })) : null, selectable !== 'none' ? (_jsx("td", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft }, children: _jsx("input", { type: "checkbox", checked: isSelected(row), "aria-label": t('dataTable.selectRow'), onClick: (event) => event.stopPropagation(), onChange: () => toggleRow(row) }) })) : null, visibleColumns.map((col) => {
-                        const editing = isEditingCell(row, col.field);
-                        const editable = isEditable(col) && !editing;
-                        return (_jsx("td", { "data-align": col.align ?? 'start', style: { left: frozenLeft(col.field) }, className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen', editable && 'kpt-data-table__cell--editable'), tabIndex: editable ? 0 : undefined, "aria-label": editable ? t('dataTable.editCell', { column: col.header }) : undefined, onClick: (event) => {
-                                if (isEditable(col))
+                            }, children: _jsx(KptIcon, { name: "chevron-right" }) }) })) : null, selectable !== 'none' ? (_jsx("td", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft }, children: _jsx("input", { type: selectable === 'single' ? 'radio' : 'checkbox', name: selectable === 'single' ? `${uid}-select` : undefined, checked: isSelected(row), "aria-label": t('dataTable.selectRow'), onClick: (event) => {
+                                event.stopPropagation();
+                                toggleRow(row);
+                            }, onChange: () => {
+                                // Zmianę obsługuje `onClick` (radio nie zgłasza `change` przy odznaczaniu).
+                            } }) })) : null, slots.map((slot) => {
+                        const m = slot.meta;
+                        if (!m)
+                            return hspacer(slot);
+                        const col = m.col;
+                        // Edytor sprawdzamy tylko, gdy jakakolwiek komórka jest w edycji - reszta to odczyt gotowych cech kolumny.
+                        const editing = m.editable && editingCell !== null && isEditingCell(row, col.field);
+                        const editable = m.editable && !editing;
+                        return (_jsx("td", { "data-align": m.align, style: { left: m.left }, "aria-colindex": colIndex(m), className: cn(m.frozen && 'kpt-data-table__cell--frozen', editable && 'kpt-data-table__cell--editable'), tabIndex: editable ? 0 : undefined, "aria-describedby": editable ? `${uid}-edit-${m.index}` : undefined, onClick: (event) => {
+                                if (m.editable)
                                     startEdit(row, col, event);
                             }, onKeyDown: (event) => {
                                 if (event.key === 'Enter' && editable)
                                     startEdit(row, col, event);
-                            }, children: editing ? (_jsx("div", { ref: editorHostRef, className: "kpt-data-table__editor", onClick: (event) => event.stopPropagation(), onBlur: onEditorFocusOut, children: editor(row, col) })) : cells?.[col.field] ? (cells[col.field](row, getValue(row, col.field))) : getValue(row, col.field) }, col.field));
+                            }, children: editing ? (_jsx("div", { ref: editorHostRef, className: "kpt-data-table__editor", onClick: (event) => event.stopPropagation(), onBlur: onEditorFocusOut, children: editor(row, col) })) : cells?.[col.field] ? (cells[col.field](row, getValue(row, col.field))) : getValue(row, col.field) }, slot.key));
                     })] }), hasRowDetail && isExpanded(row) && !virtualScroll ? (_jsx("tr", { className: "kpt-data-table__detail-row", children: _jsx("td", { className: "kpt-data-table__detail", colSpan: colspan, children: renderRowDetail?.(row) }) })) : null] }, rowKey ? String(getValue(row, rowKey)) : index));
-    return (_jsxs("div", { className: cn('kpt-data-table', className), style: { ['--kpt-thead-offset']: `${theadOffset}px`, ...style }, ...rest, children: [filterable || exportable ? (_jsxs("div", { className: "kpt-data-table__toolbar", children: [filterable ? (_jsx("input", { className: "kpt-data-table__filter", type: "search", placeholder: t('dataTable.search'), value: filterText, onChange: (event) => {
-                            setFilterText(event.target.value);
-                            setPageIndex(0);
-                        } })) : null, exportable ? (_jsx(KptButton, { variant: "outline", size: "sm", onClick: () => exportTableCsv(visibleColumns, (lazy ? data : sorted), exportFilename), children: t('dataTable.exportCsv') })) : null] })) : null, _jsx("div", { ref: scrollRef, className: "kpt-data-table__scroll", style: { maxHeight: scrollHeight ?? undefined }, onScroll: onScroll, children: _jsxs("table", { className: cn('kpt-data-table__table', hasFrozen && 'kpt-data-table__table--frozen', virtualScroll && 'kpt-data-table__table--virtual'), children: [_jsxs("thead", { ref: theadRef, children: [hasColumnFilters && filterRowPosition === 'top' ? filterRow : null, _jsxs("tr", { children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable === 'multiple' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft }, children: _jsx("input", { type: "checkbox", checked: pageAllSelected, ref: (el) => {
+    return (_jsxs("div", { className: cn('kpt-data-table', className), style: { ['--kpt-thead-offset']: `${theadOffset}px`, ...style }, ...rest, children: [filterable || exportable ? (_jsxs("div", { className: "kpt-data-table__toolbar", children: [filterable ? (_jsxs("div", { className: "kpt-data-table__search", "data-speech": filterSpeechState, children: [_jsx("input", { ref: filterRef, className: "kpt-data-table__filter", type: "search", placeholder: t('dataTable.search'), "aria-label": t('dataTable.search'), value: filterInput, onChange: (event) => onFilterInput(event.target.value) }), filterSpeech ? (_jsx(KptSpeechButton, { listeningColor: filterSpeechColor, speech: filterMic, size: "sm", unsupported: "hide", hostProps: { className: 'kpt-data-table__speech' } })) : null] })) : null, exportable ? (_jsx(KptButton, { variant: "outline", size: "sm", onClick: () => exportTableCsv(visibleColumns, (lazy ? data : sorted), exportFilename), children: t('dataTable.exportCsv') })) : null] })) : null, _jsx("div", { ref: scrollRef, className: "kpt-data-table__scroll", style: { maxHeight: scrollHeight ?? undefined }, onScroll: onScroll, children: _jsxs("table", { className: cn('kpt-data-table__table', hasFrozen && 'kpt-data-table__table--frozen', virtualScroll && 'kpt-data-table__table--virtual'), style: { width: tableWidth }, "aria-label": ariaLabel ?? undefined, "aria-busy": loading || undefined, "aria-rowcount": virtualScroll ? headerRowCount + sorted.length + (hasSummary ? 1 : 0) : undefined, "aria-colcount": virtualScroll ? leadingCells + visibleColumns.length : undefined, children: [caption ? _jsx("caption", { className: "kpt-data-table__caption", children: _jsx("span", { className: "kpt-data-table__caption-text", children: caption }) }) : null, virtualScroll ? (_jsxs("colgroup", { children: [hasRowDetail ? _jsx("col", { className: "kpt-data-table__col-expander" }) : null, selectable !== 'none' ? _jsx("col", { className: "kpt-data-table__col-checkbox" }) : null, slots.map((slot) => (_jsx("col", { style: { width: slot.width } }, slot.key)))] })) : null, _jsxs("thead", { ref: theadRef, children: [hasColumnFilters && filterRowPosition === 'top' ? filterRow : null, _jsxs("tr", { "aria-rowindex": virtualScroll ? (hasColumnFilters && filterRowPosition === 'top' ? 2 : 1) : undefined, children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable === 'multiple' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft }, children: _jsx("input", { type: "checkbox", checked: pageAllSelected, ref: (el) => {
                                                     if (el)
                                                         el.indeterminate = pageSomeSelected;
-                                                }, "aria-label": t('dataTable.selectAll'), onChange: toggleAllOnPage }) })) : selectable === 'single' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft } })) : null, visibleColumns.map((col) => (_jsxs("th", { draggable: isColDraggable(col) || undefined, style: { width: col.width, left: frozenLeft(col.field) }, "data-align": col.align ?? 'start', className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen', col.sortable && 'kpt-data-table__th--sortable', isColDraggable(col) && 'kpt-data-table__th--draggable', dragField !== null && dragField !== col.field && !col.frozen && 'kpt-data-table__th--dragover'), "aria-sort": ariaSort(col), onClick: () => toggleSort(col), onDragStart: (event) => {
-                                                if (col.frozen)
-                                                    return;
-                                                setDragField(col.field);
-                                                event.dataTransfer.setData('text/plain', col.field);
-                                                event.dataTransfer.effectAllowed = 'move';
-                                            }, onDragOver: (event) => {
-                                                if (!reorderable)
-                                                    return;
-                                                const visIndex = visibleColumns.findIndex((c) => c.field === col.field);
-                                                if (dragField !== null && visIndex >= frozenLeadCount)
-                                                    event.preventDefault();
-                                            }, onDrop: (event) => reorderable && onColDrop(col.field, event), onDragEnd: () => setDragField(null), children: [isColDraggable(col) ? (_jsx(KptIcon, { className: "kpt-data-table__grip", name: "grip-vertical" })) : null, _jsx("span", { children: col.header }), col.sortable ? (_jsx(KptIcon, { className: cn('kpt-data-table__sort', ariaSort(col) !== 'none' && 'kpt-data-table__sort--active'), name: sortField === col.field && sortDir === 'asc' ? 'chevron-up' : 'chevron-down' })) : null] }, col.field)))] }), hasColumnFilters && filterRowPosition === 'bottom' ? filterRow : null] }), loading ? (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "kpt-data-table__state", colSpan: colspan, children: t('dataTable.loading') }) }) })) : displayCount === 0 ? (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "kpt-data-table__state", colSpan: colspan, children: emptyMessage ?? t('dataTable.empty') }) }) })) : (_jsxs(_Fragment, { children: [virtualScroll && topPad > 0 ? (_jsx("tbody", { children: _jsx("tr", { className: "kpt-data-table__spacer", "aria-hidden": "true", children: _jsx("td", { colSpan: colspan, style: { height: topPad } }) }) })) : null, rowsToRender.map((row, index) => renderRow(row, index)), virtualScroll && bottomPad > 0 ? (_jsx("tbody", { children: _jsx("tr", { className: "kpt-data-table__spacer", "aria-hidden": "true", children: _jsx("td", { colSpan: colspan, style: { height: bottomPad } }) }) })) : null] })), hasSummary && !loading && displayCount > 0 ? (_jsx("tfoot", { children: _jsxs("tr", { className: "kpt-data-table__summary", children: [summaryLabelSpan > 0 ? (_jsx("th", { className: cn('kpt-data-table__summary-label', hasFrozen && 'kpt-data-table__cell--frozen'), colSpan: summaryLabelSpan, style: { left: hasFrozen ? 0 : undefined }, children: summaryLabel ?? t('dataTable.total') })) : null, visibleColumns.map((col, index) => index >= summaryStartIndex ? (_jsx("td", { "data-align": col.align ?? 'end', style: { width: col.width, left: frozenLeft(col.field) }, className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen'), children: summaryText(col) }, col.field)) : null)] }) })) : null] }) }), pageSize > 0 && !virtualScroll ? (_jsxs("div", { className: "kpt-data-table__pager", children: [paginatorActions, _jsx(KptPaginator, { length: filteredCount, pageIndex: pageIndex, onPageIndexChange: setPageIndex, pageSize: pageSizeState, onPageSizeChange: setPageSizeState, pageSizeOptions: pageSizeOptions })] })) : null] }));
+                                                }, "aria-label": t('dataTable.selectAll'), onChange: toggleAllOnPage }) })) : selectable === 'single' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft } })) : null, slots.map((slot) => {
+                                            if (!slot.meta)
+                                                return hspacer(slot);
+                                            const m = slot.meta;
+                                            const col = m.col;
+                                            return (_jsxs("th", { draggable: isColDraggable(col) || undefined, style: { width: virtualScroll ? undefined : col.width, left: m.left }, "data-align": m.align, "aria-colindex": colIndex(m), className: cn(m.frozen && 'kpt-data-table__cell--frozen', col.sortable && 'kpt-data-table__th--sortable', isColDraggable(col) && 'kpt-data-table__th--draggable', dragField !== null && dragField !== col.field && !col.frozen && 'kpt-data-table__th--dragover'), "data-field": col.field, "aria-sort": col.sortable ? ariaSort(col) : undefined, onDragStart: (event) => {
+                                                    if (col.frozen)
+                                                        return;
+                                                    setDragField(col.field);
+                                                    event.dataTransfer.setData('text/plain', col.field);
+                                                    event.dataTransfer.effectAllowed = 'move';
+                                                }, onDragOver: (event) => {
+                                                    if (!reorderable)
+                                                        return;
+                                                    const visIndex = visibleColumns.findIndex((c) => c.field === col.field);
+                                                    if (dragField !== null && visIndex >= frozenLeadCount)
+                                                        event.preventDefault();
+                                                }, onDrop: (event) => reorderable && onColDrop(col.field, event), onDragEnd: () => setDragField(null), children: [isColDraggable(col) ? (_jsx("button", { type: "button", className: "kpt-data-table__grip", "aria-label": t('dataTable.moveColumn', { column: col.header }), "aria-keyshortcuts": "ArrowLeft ArrowRight", onKeyDown: (event) => onGripKeyDown(col.field, event), children: _jsx(KptIcon, { name: "grip-vertical" }) })) : null, col.sortable ? (_jsxs("button", { type: "button", className: "kpt-data-table__sort-btn", onClick: () => toggleSort(col), children: [_jsx("span", { children: col.header }), _jsx(KptIcon, { className: cn('kpt-data-table__sort', ariaSort(col) !== 'none' && 'kpt-data-table__sort--active'), name: sortField !== col.field || !sortDir ? 'selector' : sortDir === 'asc' ? 'chevron-up' : 'chevron-down' })] })) : (_jsx("span", { children: col.header }))] }, slot.key));
+                                        })] }), hasColumnFilters && filterRowPosition === 'bottom' ? filterRow : null] }), loading ? (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "kpt-data-table__state", colSpan: colspan, children: t('dataTable.loading') }) }) })) : displayCount === 0 ? (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "kpt-data-table__state", colSpan: colspan, children: emptyMessage ?? t('dataTable.empty') }) }) })) : (_jsxs(_Fragment, { children: [virtualScroll && topPad > 0 ? (_jsx("tbody", { children: _jsx("tr", { className: "kpt-data-table__spacer", "aria-hidden": "true", children: _jsx("td", { colSpan: colspan, style: { height: topPad } }) }) })) : null, rowsToRender.map((row, index) => renderRow(row, index, virtualScroll ? headerRowCount + rowWindow.start + index + 1 : undefined)), virtualScroll && bottomPad > 0 ? (_jsx("tbody", { children: _jsx("tr", { className: "kpt-data-table__spacer", "aria-hidden": "true", children: _jsx("td", { colSpan: colspan, style: { height: bottomPad } }) }) })) : null] })), hasSummary && !loading && displayCount > 0 ? (_jsx("tfoot", { children: _jsxs("tr", { className: "kpt-data-table__summary", "aria-rowindex": virtualScroll ? headerRowCount + sorted.length + 1 : undefined, children: [summaryLayout.systemSpan > 0 ? (_jsx("td", { className: "kpt-data-table__cell--frozen", colSpan: summaryLayout.systemSpan, style: { left: 0 } })) : null, summaryLayout.labelSpan > 0 ? (_jsx("th", { className: cn('kpt-data-table__summary-label', summaryLayout.labelSticky && 'kpt-data-table__cell--frozen'), colSpan: summaryLayout.labelSpan, style: { left: summaryLayout.labelSticky ? 0 : undefined }, children: summaryLabel ?? t('dataTable.total') })) : null, summaryLayout.slots.map((slot) => slot.meta ? (_jsx("td", { "data-align": slot.meta.col.align ?? 'end', style: { width: virtualScroll ? undefined : slot.meta.col.width, left: slot.meta.left }, "aria-colindex": colIndex(slot.meta), className: cn(slot.meta.frozen && 'kpt-data-table__cell--frozen'), children: summaryTexts.get(slot.meta.col.field) ?? '' }, slot.key)) : (hspacer(slot)))] }) })) : null] }) }), _jsx("div", { className: "kpt-data-table__live", "aria-live": "polite", children: moveAnnouncement }), _jsx("div", { hidden: true, children: visibleColumns.map((col, colIndex) => isEditable(col) ? (_jsx("span", { id: `${uid}-edit-${colIndex}`, children: t('dataTable.editCell', { column: col.header }) }, col.field)) : null) }), pageSize > 0 && !virtualScroll ? (_jsxs("div", { className: "kpt-data-table__pager", children: [paginatorActions, _jsx(KptPaginator, { length: filteredCount, pageIndex: pageIndex, onPageIndexChange: setPageIndex, pageSize: pageSizeState, onPageSizeChange: setPageSizeState, pageSizeOptions: pageSizeOptions })] })) : null] }));
 }