@seedgrid/fe-components 2026.10.3 → 2026.11.1

package/dist/inputs/SgDatatable.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { createPortal } from "react-dom";
 import { ArrowDown, ArrowUp, Check, ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, ChevronsUpDown, GripVertical, MoreHorizontal, SlidersHorizontal } from "lucide-react";
@@ -7,6 +7,9 @@ import { SgButton } from "../buttons/SgButton";
 import { useHasSgEnvironmentProvider, useSgPersistence } from "../environment/SgEnvironmentProvider";
 import { SgGroupBox } from "../layout/SgGroupBox";
 import { t, useComponentsI18n } from "../i18n";
+import { useSgContainerWidth } from "./useSgContainerWidth";
+/** Largura (px) do container abaixo da qual o modo `cards` entra. Igual ao corte do Flutter. */
+export const SG_DATATABLE_MOBILE_BREAKPOINT = 600;
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
@@ -223,7 +226,7 @@ function SgDatatableBase(props, imperativeRef) {
     const i18n = useComponentsI18n();
     const hasEnvironmentProvider = useHasSgEnvironmentProvider();
     const persistence = useSgPersistence();
-    const { id, title, value, columns, dataKey, lazy = false, totalRecords: controlledTotalRecords, paginator = false, rows = 10, first, rowsPerPageOptions, onPage, sortField, sortOrder, onSort, removableSort = true, selectionMode, selection, onSelectionChange, showGlobalFilter = false, globalFilter, globalFilterPlaceholder, onGlobalFilterChange, showColumnFilters = false, filters, onFilter, showClearFiltersButton = false, stripedRows = false, showGridlines = false, hoverableRows = true, loading = false, emptyMessage, className = "", style, tableClassName = "", rowClassName, groupBoxProps = {}, showColumnManager = true, columnManagerLabel, columnManagerMaxHeight = 320 } = props;
+    const { id, title, value, columns, dataKey, lazy = false, totalRecords: controlledTotalRecords, paginator = false, rows = 10, first, rowsPerPageOptions, onPage, infiniteScroll, onLoadMore, sortField, sortOrder, onSort, removableSort = true, selectionMode, selection, onSelectionChange, showGlobalFilter = false, globalFilter, globalFilterPlaceholder, onGlobalFilterChange, showColumnFilters = false, filters, onFilter, showClearFiltersButton = false, stripedRows = false, showGridlines = false, hoverableRows = true, loading = false, emptyMessage, className = "", style, tableClassName = "", rowClassName, groupBoxProps = {}, showColumnManager = true, columnManagerLabel, columnManagerMaxHeight = 320, mobileMode } = props;
     const isFirstControlled = first !== undefined;
     const isSortFieldControlled = sortField !== undefined;
     const isSortOrderControlled = sortOrder !== undefined;
@@ -237,6 +240,12 @@ function SgDatatableBase(props, imperativeRef) {
     const [internalSelection, setInternalSelection] = React.useState(null);
     const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(globalFilter ?? "");
     const [internalFilters, setInternalFilters] = React.useState(() => normalizeFilters(filters));
+    const rootRef = React.useRef(null);
+    const containerWidth = useSgContainerWidth(rootRef, mobileMode === undefined);
+    const cardsActive = mobileMode === "cards" ||
+        (mobileMode === undefined && containerWidth !== null && containerWidth < SG_DATATABLE_MOBILE_BREAKPOINT);
+    const infiniteActive = paginator && (infiniteScroll ?? cardsActive);
+    const [isCardFiltersOpen, setIsCardFiltersOpen] = React.useState(false);
     const columnManagerRef = React.useRef(null);
     const columnManagerButtonRef = React.useRef(null);
     const columnManagerPanelRef = React.useRef(null);
@@ -480,13 +489,22 @@ function SgDatatableBase(props, imperativeRef) {
     const pageCount = Math.max(1, Math.ceil(Math.max(resolvedTotalRecords, 1) / currentRows));
     const maxFirst = Math.max(0, (pageCount - 1) * currentRows);
     const safeFirst = Math.min(currentFirst, maxFirst);
+    const [loadedPages, setLoadedPages] = React.useState(1);
     const pagedRows = React.useMemo(() => {
         if (!paginator)
             return sortedRows;
         if (lazy)
             return sortedRows;
+        if (infiniteActive)
+            return sortedRows.slice(0, loadedPages * currentRows);
         return sortedRows.slice(safeFirst, safeFirst + currentRows);
-    }, [paginator, lazy, sortedRows, safeFirst, currentRows]);
+    }, [paginator, lazy, infiniteActive, loadedPages, sortedRows, safeFirst, currentRows]);
+    const infiniteHasMore = infiniteActive && (lazy ? value.length < resolvedTotalRecords : sortedRows.length > loadedPages * currentRows);
+    // Ordenar/filtrar/mudar o tamanho da pagina recomeca a rolagem infinita na primeira pagina.
+    const infiniteResetKey = JSON.stringify([currentSortField, currentSortOrder, currentGlobalFilter, currentFilters, currentRows]);
+    React.useEffect(() => {
+        setLoadedPages(1);
+    }, [infiniteResetKey]);
     const currentPage = Math.floor(safeFirst / currentRows) + 1;
     const paginatorRef = React.useRef(null);
     const [maxPageButtons, setMaxPageButtons] = React.useState(5);
@@ -547,6 +565,49 @@ function SgDatatableBase(props, imperativeRef) {
         lastReconciledFirstRef.current = safeFirst;
         commitPage(safeFirst, currentRows);
     }, [safeFirst, currentFirst, commitPage, currentRows]);
+    const sentinelRef = React.useRef(null);
+    const onLoadMoreRef = React.useRef(onLoadMore);
+    onLoadMoreRef.current = onLoadMore;
+    const requestedLengthRef = React.useRef(-1);
+    const loadMore = React.useCallback(() => {
+        if (!infiniteHasMore || loading)
+            return;
+        const total = resolvedTotalRecordsRef.current;
+        const pageCountNow = Math.max(1, Math.ceil(Math.max(total, 1) / currentRows));
+        let nextFirst;
+        if (lazy) {
+            if (requestedLengthRef.current === value.length)
+                return;
+            requestedLengthRef.current = value.length;
+            nextFirst = value.length;
+        }
+        else {
+            nextFirst = loadedPages * currentRows;
+            setLoadedPages(loadedPages + 1);
+        }
+        const event = {
+            first: nextFirst,
+            rows: currentRows,
+            page: Math.floor(nextFirst / currentRows) + 1,
+            pageCount: pageCountNow,
+            totalRecords: total
+        };
+        onPageRef.current?.(event);
+        onLoadMoreRef.current?.(event);
+    }, [infiniteHasMore, loading, lazy, value.length, loadedPages, currentRows]);
+    React.useEffect(() => {
+        if (!infiniteHasMore)
+            return;
+        const element = sentinelRef.current;
+        if (!element || typeof IntersectionObserver === "undefined")
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                loadMore();
+        }, { rootMargin: "200px" });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [infiniteHasMore, loadMore, pagedRows.length]);
     const commitSort = React.useCallback((nextSortField, nextSortOrder) => {
         if (!isSortFieldControlled)
             setInternalSortField(nextSortField);
@@ -603,6 +664,8 @@ function SgDatatableBase(props, imperativeRef) {
     }), [sortedRows, pagedRows, clearFilters, clearSelection, resetSort, commitPage, currentRows, goToPage]);
     const emptyLabel = emptyMessage ?? t(i18n, "components.datatable.empty");
     const loadingLabel = t(i18n, "components.datatable.loading");
+    const loadingMoreLabel = t(i18n, "components.datatable.loadingMore");
+    const endOfListLabel = t(i18n, "components.datatable.endOfList");
     const globalFilterLabel = globalFilterPlaceholder ?? t(i18n, "components.datatable.globalFilterPlaceholder");
     const clearFiltersLabel = t(i18n, "components.datatable.clearFilters");
     const firstLabel = t(i18n, "components.datatable.first");
@@ -718,8 +781,37 @@ function SgDatatableBase(props, imperativeRef) {
             return next;
         });
     }, [columnDescriptors]);
+    const renderCellContent = (column, rowData, absoluteRowIndex) => {
+        const cellField = column.field;
+        const cellValue = getFieldValue(rowData, cellField);
+        return column.body ? (column.body(rowData, {
+            rowData,
+            rowIndex: absoluteRowIndex,
+            field: cellField,
+            value: cellValue
+        })) : (_jsx("span", { children: cellValue === null || cellValue === undefined ? "-" : String(cellValue) }));
+    };
+    // Modo cartoes: o titulo e' a primeira coluna marcada com cardTitle; as demais viram "rotulo: valor",
+    // exceto as marcadas com cardHidden.
+    const cardTitleColumn = cardsActive ? visibleColumns.find((column) => column.cardTitle) : undefined;
+    const cardBodyColumns = cardsActive
+        ? visibleColumns.filter((column) => column !== cardTitleColumn && !column.cardHidden)
+        : [];
+    const cardFilterColumns = cardsActive
+        ? visibleColumns.filter((column) => column.filter && (column.filterField ?? column.field))
+        : [];
+    const cardSortColumns = cardsActive
+        ? visibleColumns.filter((column) => column.sortable && (column.sortField ?? column.field))
+        : [];
+    const cardHeaderLabel = (column) => typeof column.header === "string" || typeof column.header === "number"
+        ? String(column.header)
+        : column.field ?? "";
+    const sortByLabel = resolveMessage(t(i18n, "components.datatable.sortBy"), "components.datatable.sortBy", "Ordenar por");
+    const sortNoneLabel = resolveMessage(t(i18n, "components.datatable.sortNone"), "components.datatable.sortNone", "Sem ordem");
+    const sortDirectionLabel = resolveMessage(t(i18n, "components.datatable.sortDirection"), "components.datatable.sortDirection", "Inverter ordem");
+    const filtersPanelLabel = resolveMessage(t(i18n, "components.datatable.filters"), "components.datatable.filters", "Filtros");
     const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
-    return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, showClearFiltersButton ? (_jsx(SgButton, { size: "sm", appearance: "outline", onClick: clearFilters, children: clearFiltersLabel })) : null] })) : null, _jsxs("div", { className: "relative", ref: columnManagerRef, children: [showColumnManager ? (_jsx("div", { className: "mb-2 flex items-center justify-start", children: _jsx("button", { ref: columnManagerButtonRef, type: "button", "aria-label": resolvedColumnManagerLabel, title: resolvedColumnManagerLabel, onClick: () => setIsColumnManagerOpen((prev) => !prev), className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] text-[rgb(var(--sg-primary-600))] shadow-sm transition hover:bg-[rgb(var(--sg-primary-50))] hover:text-[rgb(var(--sg-primary-700))]", children: _jsx(SlidersHorizontal, { size: 18 }) }) })) : null, showColumnManager && isColumnManagerOpen && columnManagerPosition && typeof document !== "undefined"
+    return (_jsx("div", { ref: rootRef, className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, showClearFiltersButton ? (_jsx(SgButton, { size: "sm", appearance: "outline", onClick: clearFilters, children: clearFiltersLabel })) : null] })) : null, _jsxs("div", { className: "relative", ref: columnManagerRef, children: [showColumnManager ? (_jsx("div", { className: "mb-2 flex items-center justify-start", children: _jsx("button", { ref: columnManagerButtonRef, type: "button", "aria-label": resolvedColumnManagerLabel, title: resolvedColumnManagerLabel, onClick: () => setIsColumnManagerOpen((prev) => !prev), className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] text-[rgb(var(--sg-primary-600))] shadow-sm transition hover:bg-[rgb(var(--sg-primary-50))] hover:text-[rgb(var(--sg-primary-700))]", children: _jsx(SlidersHorizontal, { size: 18 }) }) })) : null, showColumnManager && isColumnManagerOpen && columnManagerPosition && typeof document !== "undefined"
                                 ? createPortal(_jsxs("div", { ref: columnManagerPanelRef, className: "fixed z-[1400] w-[300px] rounded-xl border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] shadow-xl", style: {
                                         top: columnManagerPosition.top,
                                         left: columnManagerPosition.left
@@ -749,7 +841,40 @@ function SgDatatableBase(props, imperativeRef) {
                                                                     ? "text-[rgb(var(--sg-muted))]"
                                                                     : "text-[rgb(var(--sg-text))]", !canHideThisColumn ? "cursor-not-allowed" : ""), children: columnLabel }), _jsx("div", { className: cn("inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[rgb(var(--sg-muted))]", isReorderable ? "cursor-grab active:cursor-grabbing" : "opacity-40"), title: dragHandleLabel, children: _jsx(GripVertical, { size: 16 }) })] }, `manager-${item.key}`));
                                                 }) }) }), _jsxs("div", { className: "flex items-center gap-2 border-t border-[rgb(var(--sg-border))] px-3 py-3", children: [_jsx(SgButton, { size: "sm", appearance: "outline", onClick: restoreDefaultColumns, children: restoreColumnsLabel }), _jsx(SgButton, { size: "sm", appearance: "outline", onClick: showAllColumns, children: showAllColumnsLabel })] })] }), document.body)
-                                : null, _jsx("div", { className: "overflow-x-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))]", children: _jsxs("table", { id: id, className: cn("min-w-full border-collapse text-sm", tableClassName), children: [_jsxs("thead", { children: [_jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
+                                : null, cardsActive ? (_jsxs("div", { "data-sg-datatable-cards": "true", className: "space-y-2", children: [cardSortColumns.length > 0 || (showColumnFilters && cardFilterColumns.length > 0) ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [cardSortColumns.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("select", { "aria-label": sortByLabel, value: currentSortOrder === 0 || !currentSortField ? "" : currentSortField, onChange: (event) => {
+                                                            const next = event.target.value;
+                                                            if (!next)
+                                                                commitSort(null, 0);
+                                                            else
+                                                                commitSort(next, 1);
+                                                        }, className: "min-w-0 flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))]", children: [_jsx("option", { value: "", children: sortNoneLabel }), cardSortColumns.map((column, columnIndex) => {
+                                                                const key = (column.sortField ?? column.field);
+                                                                return (_jsx("option", { value: key, children: cardHeaderLabel(column) }, `sort-${column.columnId ?? key}-${columnIndex}`));
+                                                            })] }), _jsx(SgButton, { size: "sm", appearance: "outline", iconOnly: true, "aria-label": sortDirectionLabel, title: sortDirectionLabel, disabled: !currentSortField || currentSortOrder === 0, onClick: () => {
+                                                            if (!currentSortField)
+                                                                return;
+                                                            commitSort(currentSortField, currentSortOrder === 1 ? -1 : 1);
+                                                        }, leftIcon: currentSortOrder === -1 ? _jsx(ArrowDown, { size: 16 }) : _jsx(ArrowUp, { size: 16 }) })] })) : null, showColumnFilters && cardFilterColumns.length > 0 ? (_jsx(SgButton, { size: "sm", appearance: "outline", "aria-expanded": isCardFiltersOpen, onClick: () => setIsCardFiltersOpen((prev) => !prev), children: filtersPanelLabel })) : null] })) : null, showColumnFilters && isCardFiltersOpen && cardFilterColumns.length > 0 ? (_jsx("div", { "data-sg-datatable-filters-panel": "true", className: "space-y-2 rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] p-3", children: cardFilterColumns.map((column, columnIndex) => {
+                                            const filterField = (column.filterField ?? column.field);
+                                            const filterValue = currentFilters[filterField] ?? "";
+                                            return (_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: "text-xs font-semibold text-[rgb(var(--sg-muted))]", children: column.header }), _jsx("input", { value: filterValue, onChange: (event) => {
+                                                            const normalized = normalizeFilters({ ...currentFilters, [filterField]: event.target.value });
+                                                            commitFilters(normalized, currentGlobalFilter);
+                                                        }, placeholder: column.filterPlaceholder ?? t(i18n, "components.datatable.columnFilterPlaceholder", { column: String(column.header ?? "") }), className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })] }, `cardfilter-${column.columnId ?? filterField}-${columnIndex}`));
+                                        }) })) : null, loading && !(infiniteActive && pagedRows.length > 0) ? (_jsx("p", { "data-sg-card-state": "loading", className: "px-4 py-6 text-center text-sm text-[rgb(var(--sg-muted))]", children: loadingLabel })) : pagedRows.length === 0 ? (_jsx("p", { "data-sg-card-state": "empty", className: "px-4 py-6 text-center text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel })) : (_jsx("ul", { role: "list", className: "space-y-2", children: pagedRows.map((rowData, rowIndex) => {
+                                            const absoluteRowIndex = safeFirst + rowIndex;
+                                            const selected = isRowSelected(rowData);
+                                            const customRowClass = typeof rowClassName === "function" ? rowClassName(rowData, absoluteRowIndex) : rowClassName;
+                                            return (_jsxs("li", { "data-sg-card": "true", "aria-selected": selected || undefined, onClick: (event) => {
+                                                    const target = event.target;
+                                                    if (target.closest("button,a,input,select,textarea,label,[data-sg-stop-row-select='true']")) {
+                                                        return;
+                                                    }
+                                                    handleRowSelection(rowData);
+                                                }, className: cn("rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] p-3", selectionMode ? "cursor-pointer" : "", stripedRows && absoluteRowIndex % 2 === 1 ? "bg-[rgb(var(--sg-primary-50))]" : "", selected ? "border-[rgb(var(--sg-primary-600))] bg-[rgb(var(--sg-primary-100))]" : "", customRowClass), children: [cardTitleColumn ? (_jsx("div", { "data-sg-card-title": "true", className: "mb-2 text-base font-semibold text-[rgb(var(--sg-text))]", children: renderCellContent(cardTitleColumn, rowData, absoluteRowIndex) })) : null, _jsx("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-sm", children: cardBodyColumns.map((column, columnIndex) => (_jsxs(React.Fragment, { children: [_jsx("dt", { className: "font-semibold text-[rgb(var(--sg-muted))]", children: column.header }), _jsx("dd", { className: cn("min-w-0 break-words text-[rgb(var(--sg-text))]", column.className), children: renderCellContent(column, rowData, absoluteRowIndex) })] }, `card-${column.columnId ?? column.field ?? columnIndex}-${absoluteRowIndex}`))) })] }, String(getRowIdentity(rowData, dataKey) ?? absoluteRowIndex)));
+                                        }) })), hasFooter ? (_jsx("dl", { "data-sg-card-footer": "true", className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 rounded-lg bg-[rgb(var(--sg-primary-50))] p-3 text-sm font-semibold text-[rgb(var(--sg-text))]", children: visibleColumns
+                                            .filter((column) => column.footer !== undefined && !column.cardHidden)
+                                            .map((column, columnIndex) => (_jsxs(React.Fragment, { children: [_jsx("dt", { children: column.header }), _jsx("dd", { children: typeof column.footer === "function" ? column.footer(sortedRows) : column.footer })] }, `cardfoot-${column.columnId ?? column.field ?? columnIndex}`))) })) : null] })) : (_jsx("div", { className: "overflow-x-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))]", children: _jsxs("table", { id: id, className: cn("min-w-full border-collapse text-sm", tableClassName), children: [_jsxs("thead", { children: [_jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
                                                         const sortCandidate = column.sortField ?? column.field;
                                                         const isSorted = Boolean(sortCandidate) && sortCandidate === currentSortField;
                                                         // O indicador de ordenacao era TEXTO literal (" ^", " v", " <>"), entao o
@@ -782,24 +907,16 @@ function SgDatatableBase(props, imperativeRef) {
                                                         handleRowSelection(rowData);
                                                     }, className: cn(selectionMode ? "cursor-pointer" : "", stripedRows && absoluteRowIndex % 2 === 1 ? "bg-[rgb(var(--sg-primary-50))]" : "", hoverableRows ? "hover:bg-[rgb(var(--sg-primary-100))]" : "", selected ? "bg-[rgb(var(--sg-primary-100))]" : "", customRowClass), children: visibleColumns.map((column, columnIndex) => {
                                                         const cellField = column.field;
-                                                        const cellValue = getFieldValue(rowData, cellField);
                                                         const customCellClass = typeof column.bodyClassName === "function"
                                                             ? column.bodyClassName(rowData, absoluteRowIndex)
                                                             : column.bodyClassName;
-                                                        const renderedValue = column.body
-                                                            ? column.body(rowData, {
-                                                                rowData,
-                                                                rowIndex: absoluteRowIndex,
-                                                                field: cellField,
-                                                                value: cellValue
-                                                            })
-                                                            : (_jsx("span", { children: cellValue === null || cellValue === undefined ? "-" : String(cellValue) }));
+                                                        const renderedValue = renderCellContent(column, rowData, absoluteRowIndex);
                                                         return (_jsx("td", { className: cn("px-3 py-2 text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]", column.className, customCellClass), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: renderedValue }, `cell-${column.columnId ?? cellField ?? columnIndex}-${absoluteRowIndex}`));
                                                     }) }, String(getRowIdentity(rowData, dataKey) ?? absoluteRowIndex)));
                                             })) }), hasFooter ? (_jsx("tfoot", { children: _jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
                                                     const footerValue = typeof column.footer === "function" ? column.footer(sortedRows) : column.footer;
                                                     return (_jsx("td", { className: cn("px-3 py-2 font-semibold text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-t border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-t border-[rgb(var(--sg-border))]", column.className), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: footerValue ?? null }, `foot-${column.columnId ?? column.field ?? columnIndex}`));
-                                                }) }) })) : null] }) })] }), paginator ? (_jsxs("div", { ref: paginatorRef, className: "flex flex-wrap items-center gap-1.5", children: [_jsxs("nav", { "aria-label": t(i18n, "components.datatable.pagination"), className: "flex flex-wrap items-center gap-1.5", children: [_jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": firstLabel, title: firstLabel, disabled: currentPage <= 1, onClick: () => goToPage(1), leftIcon: _jsx(ChevronFirst, { size: 16 }) }), _jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": prevLabel, title: prevLabel, disabled: currentPage <= 1, onClick: () => goToPage(currentPage - 1), leftIcon: _jsx(ChevronLeft, { size: 16 }) }), pageTokens.map((token, tokenIndex) => {
+                                                }) }) })) : null] }) }))] }), infiniteActive ? (_jsx("div", { ref: sentinelRef, "data-sg-infinite-sentinel": "true", role: "status", "aria-live": "polite", className: "px-4 py-3 text-center text-xs text-[rgb(var(--sg-muted))]", children: infiniteHasMore ? (loading ? loadingMoreLabel : "") : pagedRows.length > 0 ? endOfListLabel : "" })) : null, paginator && !infiniteActive ? (_jsxs("div", { ref: paginatorRef, className: "flex flex-wrap items-center gap-1.5", children: [_jsxs("nav", { "aria-label": t(i18n, "components.datatable.pagination"), className: "flex flex-wrap items-center gap-1.5", children: [_jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": firstLabel, title: firstLabel, disabled: currentPage <= 1, onClick: () => goToPage(1), leftIcon: _jsx(ChevronFirst, { size: 16 }) }), _jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": prevLabel, title: prevLabel, disabled: currentPage <= 1, onClick: () => goToPage(currentPage - 1), leftIcon: _jsx(ChevronLeft, { size: 16 }) }), pageTokens.map((token, tokenIndex) => {
                                         if (token.type === "ellipsis") {
                                             const ellipsisLabel = token.direction === "backward" ? jumpBackwardLabel : jumpForwardLabel;
                                             return (_jsx(SgButton, { size: "sm", appearance: "ghost", shape: "default", iconOnly: true, "aria-label": ellipsisLabel, title: ellipsisLabel, onClick: () => goToPage(token.target), leftIcon: _jsx(MoreHorizontal, { size: 16 }) }, `ellipsis-${token.direction}-${tokenIndex}`));

package/dist/inputs/SgDatatable.meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgDatatable.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgDatatable.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QA8BpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}
+{"version":3,"file":"SgDatatable.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgDatatable.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAiCpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAoBrB,CAAC"}

package/dist/inputs/SgDatatable.meta.js

@@ -7,9 +7,9 @@ export const sgMeta = {
     displayName: "SgDatatable",
     category: "data",
     subcategory: "datatable",
-    description: "Tabela de dados interativa com colunas configuraveis, paginacao, ordenacao, filtro, selecao e persistencia de layout de colunas.",
+    description: "Tabela de dados interativa com colunas configuraveis, paginacao, ordenacao, filtro, selecao e persistencia de layout de colunas. Em celular vira lista de cartoes automaticamente (mobileMode omitido = automatico).",
     tags: ["data", "table", "grid", "listing", "interactive"],
-    capabilities: ["pagination", "sorting", "filtering", "selection", "column-config", "column-layout-persistence", "row-actions"],
+    capabilities: ["pagination", "sorting", "filtering", "selection", "column-config", "column-layout-persistence", "row-actions", "mobile-cards"],
     fieldSemantics: ["tabularData", "dataGrid", "listing", "collectionView"],
     props: [
         { name: "id", type: "string", description: "Identificador da tabela usado para DOM e persistencia do layout de colunas.", semanticRole: "data", bindable: true },
@@ -17,6 +17,9 @@ export const sgMeta = {
         { name: "rows", type: "number", description: "Linhas por pagina quando a paginacao esta ativa (os dados vao em value).", semanticRole: "behavior", bindable: true },
         { name: "selectionMode", type: "\"single\" | \"multiple\"", description: "Modo de selecao de linhas.", semanticRole: "behavior", bindable: true },
         { name: "loading", type: "boolean", default: false, description: "Indica estado de carregamento.", semanticRole: "appearance", bindable: true },
+        { name: "mobileMode", type: "\"scroll\" | \"cards\"", default: "(omitido = automatico)", description: "Comportamento em tela estreita. Omitido (padrao): cartoes quando o container fica abaixo de 600 px, tabela acima; cards: forca cartoes em qualquer largura; scroll: forca a tabela com rolagem horizontal. Nos cartoes mantem ordenacao, selecao, acoes, rodape e paginacao.", semanticRole: "behavior", bindable: true },
+        { name: "infiniteScroll", type: "boolean", default: "(true nos cartoes, false na tabela)", description: "Rolagem infinita: sem paginador, ao chegar perto do fim da lista avanca a pagina (rows) e acrescenta os proximos registros, com indicador de carregando e de fim da lista. Padrao ligado quando a lista e exibida como cartoes (abaixo de 600 px no modo automatico) e desligado na tabela. Exige paginator. Com lazy, o pai acrescenta a proxima pagina a value (first/rows/page vem em onPage/onLoadMore).", semanticRole: "behavior", bindable: true },
+        { name: "onLoadMore", type: "(event: SgDatatablePageEvent) => void", description: "Chamado (alem de onPage) quando a rolagem infinita pede a proxima pagina.", semanticRole: "event", bindable: false },
         { name: "paginator", type: "boolean", default: false, description: "Ativa paginacao.", semanticRole: "behavior", bindable: true },
         { name: "onPage", type: "(event: SgDatatablePageEvent) => void", description: "Callback de paginacao.", semanticRole: "event", bindable: false },
         { name: "onSort", type: "(event: SgDatatableSortEvent) => void", description: "Callback de ordenacao.", semanticRole: "event", bindable: false }
@@ -34,14 +37,15 @@ export const aiHints = {
     preferredUseCases: [
         "Exibicao de colecoes tabulares com interacao.",
         "Listagens administrativas com filtro, ordenacao e pagina.",
-        "Tabelas com acoes por linha e selecao."
+        "Tabelas com acoes por linha e selecao.",
+        "Listagens que precisam funcionar em celular: por padrao (mobileMode omitido) a tabela vira cartoes abaixo de 600 px; use \"scroll\" para forcar a tabela."
     ],
     avoidUseCases: [
         "Formularios de entrada simples.",
         "Colecoes muito visuais em formato de cards.",
         "Dados pequenos onde uma lista simples basta."
     ],
-    synonyms: ["datatable", "data grid", "table", "listing grid"],
+    synonyms: ["datatable", "tabela no celular", "tabela responsiva", "data grid", "table", "listing grid", "tabela mobile", "lista de cartoes", "cards no celular", "responsive table", "mobile table"],
     relatedEntityFields: ["rows", "records", "items", "results", "tableData"],
     compositionHints: [
         "Combinar com filtros acima da tabela usando inputs de busca e selecao.",

package/dist/inputs/useSgContainerWidth.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+/**
+ * Mede a largura (px) do elemento observado e acompanha o redimensionamento.
+ *
+ * - Devolve `null` enquanto a largura nao e conhecida (SSR, antes da primeira medicao,
+ *   elemento oculto/sem layout). Quem consome deve tratar `null` como "nao estreito",
+ *   para nunca trocar o layout no servidor nem piscar na hidratacao.
+ * - Mede o CONTAINER (e nao a janela), como o `LayoutBuilder` do Flutter: a tabela dentro de
+ *   um painel estreito num desktop tambem e considerada estreita.
+ * - `enabled=false` nao observa nada (custo zero para quem nao usa).
+ */
+export declare function useSgContainerWidth(ref: React.RefObject<HTMLElement | null>, enabled?: boolean): number | null;
+//# sourceMappingURL=useSgContainerWidth.d.ts.map

package/dist/inputs/useSgContainerWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSgContainerWidth.d.ts","sourceRoot":"","sources":["../../src/inputs/useSgContainerWidth.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,OAAO,UAAO,GACb,MAAM,GAAG,IAAI,CAiCf"}

package/dist/inputs/useSgContainerWidth.js

@@ -0,0 +1,42 @@
+"use client";
+import React from "react";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+/**
+ * Mede a largura (px) do elemento observado e acompanha o redimensionamento.
+ *
+ * - Devolve `null` enquanto a largura nao e conhecida (SSR, antes da primeira medicao,
+ *   elemento oculto/sem layout). Quem consome deve tratar `null` como "nao estreito",
+ *   para nunca trocar o layout no servidor nem piscar na hidratacao.
+ * - Mede o CONTAINER (e nao a janela), como o `LayoutBuilder` do Flutter: a tabela dentro de
+ *   um painel estreito num desktop tambem e considerada estreita.
+ * - `enabled=false` nao observa nada (custo zero para quem nao usa).
+ */
+export function useSgContainerWidth(ref, enabled = true) {
+    const [width, setWidth] = React.useState(null);
+    useIsomorphicLayoutEffect(() => {
+        if (!enabled) {
+            setWidth((prev) => (prev === null ? prev : null));
+            return;
+        }
+        const element = ref.current;
+        if (!element)
+            return;
+        const measure = () => {
+            const next = element.getBoundingClientRect().width;
+            const resolved = next > 0 ? Math.round(next) : null;
+            setWidth((prev) => (prev === resolved ? prev : resolved));
+        };
+        measure();
+        if (typeof ResizeObserver !== "undefined") {
+            const observer = new ResizeObserver(measure);
+            observer.observe(element);
+            return () => observer.disconnect();
+        }
+        if (typeof window !== "undefined") {
+            window.addEventListener("resize", measure);
+            return () => window.removeEventListener("resize", measure);
+        }
+        return;
+    }, [ref, enabled]);
+    return width;
+}