@seedgrid/fe-components 2026.3.9 → 2026.3.11

package/dist/inputs/SgDatatable.js

@@ -0,0 +1,441 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SgButton } from "../buttons/SgButton";
+import { SgGroupBox } from "../layout/SgGroupBox";
+import { t, useComponentsI18n } from "../i18n";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function toCssSize(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+function normalizeFilters(filters) {
+    if (!filters)
+        return {};
+    return Object.entries(filters).reduce((acc, [field, value]) => {
+        const text = String(value ?? "").trim();
+        if (!text)
+            return acc;
+        acc[field] = text;
+        return acc;
+    }, {});
+}
+function getFieldValue(row, field) {
+    if (!field)
+        return undefined;
+    if (!field.includes("."))
+        return row[field];
+    const chunks = field.split(".");
+    let current = row;
+    for (const chunk of chunks) {
+        if (current === null || current === undefined)
+            return undefined;
+        if (typeof current !== "object")
+            return undefined;
+        current = current[chunk];
+    }
+    return current;
+}
+function normalizeText(value) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string")
+        return value.toLowerCase();
+    if (typeof value === "number" || typeof value === "bigint")
+        return String(value);
+    if (typeof value === "boolean")
+        return value ? "true" : "false";
+    if (value instanceof Date)
+        return value.toISOString().toLowerCase();
+    return String(value).toLowerCase();
+}
+function matchesFilter(value, query, mode) {
+    const search = query.trim().toLowerCase();
+    if (!search)
+        return true;
+    const source = normalizeText(value);
+    if (mode === "startsWith")
+        return source.startsWith(search);
+    if (mode === "endsWith")
+        return source.endsWith(search);
+    if (mode === "equals")
+        return source === search;
+    return source.includes(search);
+}
+function compareValues(a, b) {
+    if (a === b)
+        return 0;
+    if (a === null || a === undefined)
+        return -1;
+    if (b === null || b === undefined)
+        return 1;
+    if (typeof a === "number" && typeof b === "number")
+        return a - b;
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() - b.getTime();
+    return String(a).localeCompare(String(b), undefined, {
+        sensitivity: "base",
+        numeric: true
+    });
+}
+function resolveMessage(translated, key, fallback) {
+    return translated === key ? fallback : translated;
+}
+function buildPageWindow(currentPage, pageCount, maxButtons = 5) {
+    if (pageCount <= 0)
+        return [];
+    if (pageCount <= maxButtons)
+        return Array.from({ length: pageCount }, (_, index) => index + 1);
+    const half = Math.floor(maxButtons / 2);
+    let start = Math.max(1, currentPage - half);
+    let end = start + maxButtons - 1;
+    if (end > pageCount) {
+        end = pageCount;
+        start = end - maxButtons + 1;
+    }
+    const pages = [];
+    for (let page = start; page <= end; page += 1) {
+        pages.push(page);
+    }
+    return pages;
+}
+function getRowIdentity(rowData, dataKey) {
+    if (!dataKey)
+        return rowData;
+    return getFieldValue(rowData, dataKey);
+}
+function rowsAreEqual(rowA, rowB, dataKey) {
+    if (!dataKey)
+        return rowA === rowB;
+    return getRowIdentity(rowA, dataKey) === getRowIdentity(rowB, dataKey);
+}
+function resolveAlignmentClass(align) {
+    if (align === "center")
+        return "text-center";
+    if (align === "right")
+        return "text-right";
+    return "text-left";
+}
+function SgDatatableBase(props, imperativeRef) {
+    const i18n = useComponentsI18n();
+    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 = {} } = props;
+    const isFirstControlled = first !== undefined;
+    const isSortFieldControlled = sortField !== undefined;
+    const isSortOrderControlled = sortOrder !== undefined;
+    const isSelectionControlled = selection !== undefined;
+    const isGlobalFilterControlled = globalFilter !== undefined;
+    const isFiltersControlled = filters !== undefined;
+    const [internalFirst, setInternalFirst] = React.useState(Math.max(0, first ?? 0));
+    const [internalRows, setInternalRows] = React.useState(Math.max(1, rows));
+    const [internalSortField, setInternalSortField] = React.useState(sortField ?? null);
+    const [internalSortOrder, setInternalSortOrder] = React.useState(sortOrder ?? 0);
+    const [internalSelection, setInternalSelection] = React.useState(null);
+    const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(globalFilter ?? "");
+    const [internalFilters, setInternalFilters] = React.useState(() => normalizeFilters(filters));
+    React.useEffect(() => {
+        if (!isFirstControlled)
+            return;
+        setInternalFirst(Math.max(0, first ?? 0));
+    }, [isFirstControlled, first]);
+    React.useEffect(() => {
+        setInternalRows(Math.max(1, rows));
+    }, [rows]);
+    React.useEffect(() => {
+        if (!isSortFieldControlled)
+            return;
+        setInternalSortField(sortField ?? null);
+    }, [isSortFieldControlled, sortField]);
+    React.useEffect(() => {
+        if (!isSortOrderControlled)
+            return;
+        setInternalSortOrder(sortOrder ?? 0);
+    }, [isSortOrderControlled, sortOrder]);
+    React.useEffect(() => {
+        if (!isSelectionControlled)
+            return;
+        setInternalSelection(selection ?? null);
+    }, [isSelectionControlled, selection]);
+    React.useEffect(() => {
+        if (!isGlobalFilterControlled)
+            return;
+        setInternalGlobalFilter(globalFilter ?? "");
+    }, [isGlobalFilterControlled, globalFilter]);
+    React.useEffect(() => {
+        if (!isFiltersControlled)
+            return;
+        setInternalFilters(normalizeFilters(filters));
+    }, [isFiltersControlled, filters]);
+    const visibleColumns = React.useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const currentFirst = isFirstControlled ? Math.max(0, first ?? 0) : internalFirst;
+    const currentRows = Math.max(1, internalRows);
+    const currentSortField = isSortFieldControlled ? sortField ?? null : internalSortField;
+    const currentSortOrder = isSortOrderControlled ? sortOrder ?? 0 : internalSortOrder;
+    const currentSelection = isSelectionControlled ? selection ?? null : internalSelection;
+    const currentGlobalFilter = isGlobalFilterControlled ? globalFilter ?? "" : internalGlobalFilter;
+    const currentFilters = isFiltersControlled ? normalizeFilters(filters) : internalFilters;
+    const globalFilterColumns = React.useMemo(() => visibleColumns.filter((column) => column.field && !column.excludeGlobalFilter), [visibleColumns]);
+    const filteredRows = React.useMemo(() => {
+        if (lazy)
+            return value;
+        return value.filter((rowData) => {
+            const matchesGlobal = !currentGlobalFilter.trim()
+                ? true
+                : globalFilterColumns.some((column) => {
+                    const columnField = column.filterField ?? column.field;
+                    return matchesFilter(getFieldValue(rowData, columnField), currentGlobalFilter, "contains");
+                });
+            if (!matchesGlobal)
+                return false;
+            const columnFilterEntries = Object.entries(currentFilters);
+            if (columnFilterEntries.length === 0)
+                return true;
+            for (const [field, query] of columnFilterEntries) {
+                const column = visibleColumns.find((item) => (item.filterField ?? item.field) === field);
+                if (!column)
+                    continue;
+                const matchMode = column.filterMatchMode ?? "contains";
+                const fieldValue = getFieldValue(rowData, field);
+                if (!matchesFilter(fieldValue, query, matchMode))
+                    return false;
+            }
+            return true;
+        });
+    }, [lazy, value, currentGlobalFilter, currentFilters, globalFilterColumns, visibleColumns]);
+    const sortedRows = React.useMemo(() => {
+        if (lazy)
+            return filteredRows;
+        if (!currentSortField || currentSortOrder === 0)
+            return filteredRows;
+        const sortColumn = visibleColumns.find((column) => (column.sortField ?? column.field) === currentSortField);
+        const direction = currentSortOrder === -1 ? -1 : 1;
+        return [...filteredRows].sort((rowA, rowB) => {
+            if (sortColumn?.sortFunction) {
+                return sortColumn.sortFunction(rowA, rowB) * direction;
+            }
+            const sortFieldName = sortColumn?.sortField ?? sortColumn?.field ?? currentSortField;
+            const aValue = getFieldValue(rowA, sortFieldName);
+            const bValue = getFieldValue(rowB, sortFieldName);
+            return compareValues(aValue, bValue) * direction;
+        });
+    }, [lazy, currentSortField, currentSortOrder, filteredRows, visibleColumns]);
+    const resolvedTotalRecords = lazy ? Math.max(0, controlledTotalRecords ?? value.length) : sortedRows.length;
+    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 pagedRows = React.useMemo(() => {
+        if (!paginator)
+            return sortedRows;
+        if (lazy)
+            return sortedRows;
+        return sortedRows.slice(safeFirst, safeFirst + currentRows);
+    }, [paginator, lazy, sortedRows, safeFirst, currentRows]);
+    const currentPage = Math.floor(safeFirst / currentRows) + 1;
+    const pageWindow = React.useMemo(() => buildPageWindow(currentPage, pageCount, 5), [currentPage, pageCount]);
+    const commitPage = React.useCallback((nextFirst, nextRows) => {
+        const normalizedRows = Math.max(1, nextRows);
+        const normalizedFirst = Math.max(0, nextFirst);
+        if (!isFirstControlled)
+            setInternalFirst(normalizedFirst);
+        setInternalRows(normalizedRows);
+        const nextPageCount = Math.max(1, Math.ceil(Math.max(resolvedTotalRecords, 1) / normalizedRows));
+        const page = Math.floor(normalizedFirst / normalizedRows) + 1;
+        onPage?.({
+            first: normalizedFirst,
+            rows: normalizedRows,
+            page,
+            pageCount: nextPageCount,
+            totalRecords: resolvedTotalRecords
+        });
+    }, [isFirstControlled, onPage, resolvedTotalRecords]);
+    React.useEffect(() => {
+        if (safeFirst === currentFirst)
+            return;
+        commitPage(safeFirst, currentRows);
+    }, [safeFirst, currentFirst, commitPage, currentRows]);
+    const commitSort = React.useCallback((nextSortField, nextSortOrder) => {
+        if (!isSortFieldControlled)
+            setInternalSortField(nextSortField);
+        if (!isSortOrderControlled)
+            setInternalSortOrder(nextSortOrder);
+        onSort?.({ sortField: nextSortField, sortOrder: nextSortOrder });
+    }, [isSortFieldControlled, isSortOrderControlled, onSort]);
+    const commitSelection = React.useCallback((nextSelection) => {
+        if (!isSelectionControlled)
+            setInternalSelection(nextSelection);
+        onSelectionChange?.(nextSelection);
+    }, [isSelectionControlled, onSelectionChange]);
+    const commitFilters = React.useCallback((nextFilters, nextGlobalFilter) => {
+        if (!isFiltersControlled)
+            setInternalFilters(nextFilters);
+        if (!isGlobalFilterControlled)
+            setInternalGlobalFilter(nextGlobalFilter);
+        onGlobalFilterChange?.(nextGlobalFilter);
+        onFilter?.({ filters: nextFilters, globalFilter: nextGlobalFilter });
+        commitPage(0, currentRows);
+    }, [
+        isFiltersControlled,
+        isGlobalFilterControlled,
+        onGlobalFilterChange,
+        onFilter,
+        commitPage,
+        currentRows
+    ]);
+    const clearFilters = React.useCallback(() => {
+        commitFilters({}, "");
+    }, [commitFilters]);
+    const resetSort = React.useCallback(() => {
+        commitSort(null, 0);
+    }, [commitSort]);
+    const clearSelection = React.useCallback(() => {
+        if (selectionMode === "multiple") {
+            commitSelection([]);
+            return;
+        }
+        commitSelection(null);
+    }, [selectionMode, commitSelection]);
+    const goToPage = React.useCallback((page) => {
+        const normalizedPage = Math.max(1, Math.min(page, pageCount));
+        commitPage((normalizedPage - 1) * currentRows, currentRows);
+    }, [commitPage, currentRows, pageCount]);
+    React.useImperativeHandle(imperativeRef, () => ({
+        getProcessedRows: () => sortedRows,
+        getPagedRows: () => pagedRows,
+        clearFilters,
+        clearSelection,
+        resetSort,
+        resetPage: () => commitPage(0, currentRows),
+        goToPage
+    }), [sortedRows, pagedRows, clearFilters, clearSelection, resetSort, commitPage, currentRows, goToPage]);
+    const emptyLabel = emptyMessage ?? resolveMessage(t(i18n, "components.datatable.empty"), "components.datatable.empty", "No records found.");
+    const loadingLabel = resolveMessage(t(i18n, "components.datatable.loading"), "components.datatable.loading", "Loading data...");
+    const globalFilterLabel = globalFilterPlaceholder ?? resolveMessage(t(i18n, "components.datatable.globalFilterPlaceholder"), "components.datatable.globalFilterPlaceholder", "Search in all columns");
+    const clearFiltersLabel = resolveMessage(t(i18n, "components.datatable.clearFilters"), "components.datatable.clearFilters", "Clear filters");
+    const prevLabel = resolveMessage(t(i18n, "components.datatable.prev"), "components.datatable.prev", "Prev");
+    const nextLabel = resolveMessage(t(i18n, "components.datatable.next"), "components.datatable.next", "Next");
+    const rowsPerPageLabel = resolveMessage(t(i18n, "components.datatable.rowsPerPage"), "components.datatable.rowsPerPage", "Rows per page");
+    const pageReport = resolveMessage(t(i18n, "components.datatable.pageReport", {
+        first: resolvedTotalRecords === 0 ? 0 : safeFirst + 1,
+        last: Math.min(safeFirst + currentRows, resolvedTotalRecords),
+        total: resolvedTotalRecords
+    }), "components.datatable.pageReport", `${resolvedTotalRecords === 0 ? 0 : safeFirst + 1} - ${Math.min(safeFirst + currentRows, resolvedTotalRecords)} of ${resolvedTotalRecords}`);
+    const shouldShowToolbar = showGlobalFilter || showClearFiltersButton;
+    const shouldShowFiltersRow = showColumnFilters && visibleColumns.some((column) => column.filter);
+    const hasFooter = visibleColumns.some((column) => column.footer !== undefined);
+    const handleHeaderSort = (column) => {
+        if (!column.sortable)
+            return;
+        const nextSortField = column.sortField ?? column.field;
+        if (!nextSortField)
+            return;
+        if (currentSortField !== nextSortField) {
+            commitSort(nextSortField, 1);
+            return;
+        }
+        if (currentSortOrder === 1) {
+            commitSort(nextSortField, -1);
+            return;
+        }
+        if (currentSortOrder === -1) {
+            if (removableSort) {
+                commitSort(null, 0);
+            }
+            else {
+                commitSort(nextSortField, 1);
+            }
+            return;
+        }
+        commitSort(nextSortField, 1);
+    };
+    const isRowSelected = React.useCallback((rowData) => {
+        if (!selectionMode)
+            return false;
+        if (selectionMode === "single") {
+            return currentSelection !== null && !Array.isArray(currentSelection)
+                ? rowsAreEqual(currentSelection, rowData, dataKey)
+                : false;
+        }
+        const list = Array.isArray(currentSelection) ? currentSelection : [];
+        return list.some((entry) => rowsAreEqual(entry, rowData, dataKey));
+    }, [selectionMode, currentSelection, dataKey]);
+    const handleRowSelection = React.useCallback((rowData) => {
+        if (!selectionMode)
+            return;
+        if (selectionMode === "single") {
+            if (currentSelection !== null && !Array.isArray(currentSelection) && rowsAreEqual(currentSelection, rowData, dataKey)) {
+                commitSelection(null);
+            }
+            else {
+                commitSelection(rowData);
+            }
+            return;
+        }
+        const previous = Array.isArray(currentSelection) ? currentSelection : [];
+        const exists = previous.some((entry) => rowsAreEqual(entry, rowData, dataKey));
+        const next = exists
+            ? previous.filter((entry) => !rowsAreEqual(entry, rowData, dataKey))
+            : [...previous, rowData];
+        commitSelection(next);
+    }, [selectionMode, currentSelection, dataKey, commitSelection]);
+    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-white px-3 py-2 text-sm 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, _jsx("div", { className: "relative", children: _jsx("div", { className: "overflow-x-auto rounded-lg border border-[rgb(var(--sg-border))] bg-white", 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;
+                                                    const sortIcon = !column.sortable
+                                                        ? null
+                                                        : isSorted
+                                                            ? currentSortOrder === 1
+                                                                ? " ^"
+                                                                : currentSortOrder === -1
+                                                                    ? " v"
+                                                                    : " <>"
+                                                            : " <>";
+                                                    return (_jsx("th", { className: cn("px-3 py-2 font-semibold 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.headerClassName, column.className), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => handleHeaderSort(column), className: cn("inline-flex items-center gap-1 font-semibold", resolveAlignmentClass(column.align), "text-[rgb(var(--sg-text))] hover:text-[rgb(var(--sg-primary-600))]"), children: [_jsx("span", { children: column.header }), _jsx("span", { "aria-hidden": "true", children: sortIcon })] })) : (_jsx("span", { children: column.header })) }, `head-${column.field ?? columnIndex}`));
+                                                }) }), shouldShowFiltersRow ? (_jsx("tr", { children: visibleColumns.map((column, columnIndex) => {
+                                                    const filterField = column.filterField ?? column.field;
+                                                    const filterValue = filterField ? currentFilters[filterField] ?? "" : "";
+                                                    return (_jsx("th", { className: cn("px-3 py-2 align-top", showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]"), children: column.filter && filterField ? (_jsx("input", { value: filterValue, onChange: (event) => {
+                                                                const nextFilters = {
+                                                                    ...currentFilters,
+                                                                    [filterField]: event.target.value
+                                                                };
+                                                                const normalized = normalizeFilters(nextFilters);
+                                                                commitFilters(normalized, currentGlobalFilter);
+                                                            }, placeholder: column.filterPlaceholder ?? `Filter ${String(column.header ?? "")}`, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-white px-2 py-1 text-xs outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null }, `filter-${column.field ?? columnIndex}`));
+                                                }) })) : null] }), _jsx("tbody", { children: loading ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(1, visibleColumns.length), className: "px-4 py-6 text-center text-sm text-[rgb(var(--sg-muted))]", children: loadingLabel }) })) : pagedRows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(1, visibleColumns.length), className: "px-4 py-6 text-center text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel }) })) : (pagedRows.map((rowData, rowIndex) => {
+                                            const absoluteRowIndex = safeFirst + rowIndex;
+                                            const selected = isRowSelected(rowData);
+                                            const customRowClass = typeof rowClassName === "function" ? rowClassName(rowData, absoluteRowIndex) : rowClassName;
+                                            return (_jsx("tr", { "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(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) }));
+                                                    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-${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.field ?? columnIndex}`));
+                                            }) }) })) : null] }) }) }), paginator ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: currentPage <= 1, onClick: () => goToPage(currentPage - 1), children: prevLabel }), pageWindow.map((pageNumber) => (_jsx(SgButton, { size: "sm", appearance: pageNumber === currentPage ? "solid" : "outline", onClick: () => goToPage(pageNumber), children: String(pageNumber) }, `page-${pageNumber}`))), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: currentPage >= pageCount, onClick: () => goToPage(currentPage + 1), children: nextLabel }), _jsx("span", { className: "min-w-[180px] text-xs text-[rgb(var(--sg-muted))] md:ml-auto", children: pageReport }), rowsPerPageOptions && rowsPerPageOptions.length > 0 ? (_jsxs("label", { className: "ml-auto inline-flex items-center gap-2 text-xs text-[rgb(var(--sg-muted))] md:ml-0", children: [_jsx("span", { children: rowsPerPageLabel }), _jsx("select", { value: currentRows, onChange: (event) => {
+                                            const nextRows = Number(event.target.value) || currentRows;
+                                            commitPage(0, nextRows);
+                                        }, className: "rounded-md border border-[rgb(var(--sg-border))] bg-white px-2 py-1 text-xs", children: rowsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })) : null] })) : null] }) }) }));
+}
+export const SgDatatable = React.forwardRef(SgDatatableBase);

package/dist/layout/SgCard.d.ts

@@ -1,11 +1,18 @@
 import * as React from "react";
 export type SgCardVariant = "default" | "outlined" | "flat" | "elevated";
 export type SgCardSize = "sm" | "md" | "lg";
+export type SgCardPosition = {
+    x: number;
+    y: number;
+};
 export type SgCardProps = Omit<React.HTMLAttributes<HTMLElement>, "title" | "onClick"> & {
     className?: string;
     headerClassName?: string;
     bodyClassName?: string;
     footerClassName?: string;
+    bgColor?: string;
+    bgColorTitle?: string;
+    bgColorFooter?: string;
     cardStyle?: SgCardVariant;
     size?: SgCardSize;
     leading?: React.ReactNode;
@@ -23,8 +30,13 @@ export type SgCardProps = Omit<React.HTMLAttributes<HTMLElement>, "title" | "onC
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     collapseIcon?: React.ReactNode;
+    collapseIconSize?: number;
     collapseToggleAlign?: "left" | "right";
     toggleOnHeaderClick?: boolean;
+    draggable?: boolean;
+    defaultPosition?: SgCardPosition;
+    dragPersistKey?: string;
+    onPositionChange?: (position: SgCardPosition) => void;
     onClick?: React.MouseEventHandler<HTMLElement>;
     children?: React.ReactNode;
 };

package/dist/layout/SgCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgCard.d.ts","sourceRoot":"","sources":["../../src/layout/SgCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA0BF,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA4OlD;yBA5Oe,MAAM"}
+{"version":3,"file":"SgCard.d.ts","sourceRoot":"","sources":["../../src/layout/SgCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAEtD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAiEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CAielD;yBAjee,MAAM"}