tp-react-elements 3.0.26 → 3.0.27

package/dist/_virtual/index.esm11.js

@@ -1,3 +1,3 @@
-var DayCell = {};
+var InputRangeField = {};
 
-export { DayCell as __exports };
+export { InputRangeField as __exports };

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var Month = {};
+var DayCell = {};
 
-export { Month as __exports };
+export { DayCell as __exports };

package/dist/_virtual/index.esm13.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var Month = {};
 
-export { InputRangeField as __exports };
+export { Month as __exports };

package/dist/_virtual/index.esm4.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var DefinedRange = {};
 
-export { DateRangePicker as __exports };
+export { DefinedRange as __exports };

package/dist/_virtual/index.esm5.js

@@ -1,3 +1,3 @@
-var DateRange = {};
+var DateRangePicker = {};
 
-export { DateRange as __exports };
+export { DateRangePicker as __exports };

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DateRange = {};
 
-export { Calendar as __exports };
+export { DateRange as __exports };

package/dist/_virtual/index.esm7.js

@@ -1,3 +1,3 @@
-var DefinedRange = {};
+var Calendar = {};
 
-export { DefinedRange as __exports };
+export { Calendar as __exports };

package/dist/components/Form/FormRender.esm.js

@@ -1,5 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import require$$0__default, { lazy, Suspense } from 'react';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -11,14 +19,6 @@ import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEdit
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import MultiSelectSearchApi from '../FormComponents/Select/MultiSelectSearchApi.esm.js';
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
-import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
-import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
-import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
-import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
-import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>

package/dist/components/FormComponents/index.esm.js

@@ -1,3 +1,9 @@
+export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
+export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
+export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
+export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as SingleSelect } from './Select/SingleSelect.esm.js';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
@@ -5,22 +11,33 @@ export { default as MultiSelectSearchApi } from './Select/MultiSelectSearchApi.e
 export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
-export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
-export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
-export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
-export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
-export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
 export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
+export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
+export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@mui/material';
+import '@mui/icons-material/CalendarToday';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import 'react-hook-form';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
+export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+import '@mui/icons-material/Visibility';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/NavigateBefore';
+import '@mui/icons-material/NavigateNext';
+import '@mui/icons-material/Delete';
+import '@mui/icons-material/UploadFile';
+import '@mui/icons-material/PictureAsPdf';
+import '@mui/icons-material/TableChart';
+import '@mui/icons-material/Description';
+export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';
-export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
-export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
-export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
-export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';

package/dist/components/PaginatedGrid/DynamicFilterBar.d.ts

@@ -213,6 +213,7 @@ export interface DynamicFilterBarProps {
     uiDensity?: 'default' | 'compact';
     filterChipFontSize?: number;
     filterChipMinHeight?: number;
+    /** @deprecated No longer used — the "Filter by:" label was removed. Kept for backward compatibility; now a no-op. */
     filterLabelFontSize?: number;
     /**
      * Current value of MRT's global filter (free-text search across every
@@ -227,5 +228,5 @@ export interface DynamicFilterBarProps {
     /** ID prefix for all interactive elements — passed down to chips and ManageFilters. */
     gridId?: string;
 }
-declare const _default: import("react").MemoExoticComponent<({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, uiDensity, filterChipFontSize, filterChipMinHeight, filterLabelFontSize, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, gridId, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, uiDensity, filterChipFontSize, filterChipMinHeight, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, gridId, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/components/PaginatedGrid/DynamicFilterBar.esm.js

@@ -11,7 +11,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import MultiSelectSearchApi from '../FormComponents/Select/MultiSelectSearchApi.esm.js';
-import { TextField, InputAdornment, IconButton, Box, Typography, Tooltip, Button, Popover, Stack, List, ListItemButton, ListItemText, Checkbox, Divider } from '@mui/material';
+import { TextField, InputAdornment, IconButton, Box, Tooltip, Button, Popover, Typography, Stack, List, ListItemButton, ListItemText, Checkbox, Divider } from '@mui/material';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import TuneIcon from '@mui/icons-material/Tune';
 import CloseIcon from '@mui/icons-material/Close';
@@ -566,12 +566,11 @@ const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, o
                                                                 } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }) }) }, col.id));
                                         }) })] }))] })] })] }));
 };
-const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters = 4, uiDensity = 'default', filterChipFontSize, filterChipMinHeight, filterLabelFontSize, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, gridId, }) => {
+const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters = 4, uiDensity = 'default', filterChipFontSize, filterChipMinHeight, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, gridId, }) => {
     const chipStyle = {
         fontSize: filterChipFontSize ?? (uiDensity === 'compact' ? 11 : 12),
         minHeight: filterChipMinHeight ?? (uiDensity === 'compact' ? 26 : 30),
     };
-    const labelFontSize = filterLabelFontSize ?? (uiDensity === 'compact' ? 11 : 12);
     // ── Single-value column filter helpers ──────────────────────────────────────
     const getColValue = (id) => columnFilters.find((f) => f.id === id)?.value ?? '';
     const applyColFilter = useCallback((id, value) => {
@@ -621,7 +620,7 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
             }
         }
     }, [filterValues, serverFilterDefs, availableColumns, onFilterValuesChange, applyColFilter, applyColMultiFilter]);
-    return (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0.75 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.4, mr: 0.25 }, children: [jsx(FilterListIcon, { sx: { fontSize: labelFontSize + 3, color: 'text.disabled' } }), jsx(Typography, { sx: { fontSize: labelFontSize }, color: "text.secondary", fontWeight: 500, noWrap: true, children: "Filter by:" })] }), visibleFilterIds.map((id) => {
+    return (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0.75 }, children: [visibleFilterIds.map((id) => {
                 const def = serverFilterDefs.find((d) => d.id === id);
                 if (def?.type === 'dateRange') {
                     return (jsx(DateRangeChip, { label: def.label, fromDate: filterValues[def.fromKey] ?? '', toDate: filterValues[def.toKey] ?? '', onApply: (from, to) => onFilterValuesChange({ ...filterValues, [def.fromKey]: from, [def.toKey]: to }), onRemove: () => clearFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));

package/dist/components/PaginatedGrid/GenericPaginatedGrid.d.ts

@@ -329,6 +329,34 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Default: false.
      */
     enableExpanding?: boolean;
+    /**
+     * Show a totals row summing every column whose `TPColumnDef` has
+     * `showTotal: true`. Computed client-side over the rows currently loaded
+     * on this page only — this grid never holds more than one page of data in
+     * memory (`manualPagination: true`, no accumulation), so the total always
+     * reflects "this page's rows," not a grand total across the full
+     * server-side dataset. Columns without `showTotal` render a blank footer
+     * cell; the leading column shows a "Total" label when it isn't itself
+     * summed. Default: `false`.
+     */
+    displayTotals?: boolean;
+    /**
+     * Where the totals row appears when `displayTotals` is true.
+     *
+     * Only `'bottom'` is implemented: a native sticky footer row (the same
+     * mechanism `enableStickyHeader` uses for the header), pinned to the
+     * bottom of the grid's own scroll area — body rows scroll underneath it,
+     * it never scrolls away.
+     *
+     * `'top'` (a row directly under the header, scrolling normally with the
+     * body) is accepted by the type for forward compatibility but not yet
+     * implemented — it requires injecting a synthetic row into the data model
+     * itself, which isn't built yet. Passing `'top'` falls back to `'bottom'`
+     * behaviour with a one-time console warning in dev.
+     *
+     * Default: `'bottom'`.
+     */
+    totalsPosition?: 'top' | 'bottom';
 }
-declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive, pageSizeOptions, pageSize, showGlobalSearchByDefault, showDensityToggle, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive, pageSizeOptions, pageSize, showGlobalSearchByDefault, showDensityToggle, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding, displayTotals, totalsPosition, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

package/dist/components/PaginatedGrid/GenericPaginatedGrid.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useLayoutEffect, useCallback, useEffect } from 'react';
 import { MRT_ToggleGlobalFilterButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFullScreenButton, useMaterialReactTable, MaterialReactTable } from 'material-react-table';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
@@ -109,6 +109,16 @@ const buildBodyGlobalStyles = (bodyFont) => ({
         userSelect: 'text',
     },
 });
+/** Totals row: bold, subtly tinted, pinned above the body's bottom edge. */
+const buildFooterGlobalStyles = (bodyFont) => ({
+    '.tp-gpg-root .MuiTableFooter-root .MuiTableCell-root': {
+        fontSize: `${bodyFont} !important`,
+        fontWeight: 700,
+        backgroundColor: 'rgba(0,0,0,0.03)',
+        borderTop: '2px solid rgba(224,224,224,1)',
+        borderRight: '1px solid rgba(224,224,224,1)',
+    },
+});
 const buildHeaderGlobalStyles = (headerMin, headerMax, headerFont, headerBgColor) => {
     const headCell = {
         height: `${headerMax} !important`,
@@ -340,7 +350,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                         }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_next_page_icon`, size: "small", onClick: onNext, disabled: !canNext, sx: { p: 0.5 }, children: jsx(ChevronRightIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_last_page_icon`, size: "small", onClick: onLast, disabled: !canNext, sx: { p: 0.5 }, children: jsx(LastPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) })] })] }));
 };
 // ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
-function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive = false, pageSizeOptions = [1000, 5000, 10000], pageSize, showGlobalSearchByDefault = false, showDensityToggle = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive = false, pageSizeOptions = [1000, 5000, 10000], pageSize, showGlobalSearchByDefault = false, showDensityToggle = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding = !!renderDetailPanel, displayTotals = false, totalsPosition = 'bottom', }) {
     // ── Responsive tier detection ────────────────────────────────────────────────
     // Three tiers (desktop / tablet / mobile) drive auto density, a progressively
     // lower filter-chip cap, toolbar wrapping, and a stacked pagination footer —
@@ -384,6 +394,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         },
         ...buildHeaderGlobalStyles(resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor),
         ...buildBodyGlobalStyles(resolvedBodyFontSize),
+        ...buildFooterGlobalStyles(resolvedBodyFontSize),
     }), [
         resolvedHeaderMinHeight,
         resolvedHeaderMaxHeight,
@@ -496,14 +507,60 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     // `getSearchText`. MRT doesn't know these props, so we strip them here. We
     // also inject the appropriate `filterFn` automatically so callers never
     // have to write one.
+    // Sum each `showTotal` column's raw value across the currently loaded page.
+    // A ref (synced below) lets the per-column `Footer` below always read the
+    // latest totals without forcing `processedColumns` to rebuild on every
+    // page fetch — only `columns`/`layoutMode`/`displayTotals` do that.
+    const totalsByColumnId = useMemo(() => {
+        if (!displayTotals)
+            return {};
+        const totals = {};
+        for (const col of columns) {
+            if (!col.showTotal)
+                continue;
+            const colId = col.id ?? col.accessorKey;
+            if (!colId)
+                continue;
+            let sum = 0;
+            for (const row of rows) {
+                const raw = typeof col.accessorFn === 'function'
+                    ? col.accessorFn(row)
+                    : row[col.accessorKey];
+                const n = typeof raw === 'number' ? raw : parseFloat(raw);
+                if (!Number.isNaN(n))
+                    sum += n;
+            }
+            totals[colId] = sum;
+        }
+        return totals;
+    }, [columns, rows, displayTotals]);
+    const totalsRef = useRef(totalsByColumnId);
+    totalsRef.current = totalsByColumnId;
+    // The leading column gets a "Total" label when it isn't itself summed.
+    const leadingColumnId = columns[0]?.id ?? columns[0]?.accessorKey;
+    const topWarnedRef = useRef(false);
+    if (totalsPosition === 'top' && !topWarnedRef.current && process.env.NODE_ENV !== 'production') {
+        topWarnedRef.current = true;
+        // eslint-disable-next-line no-console
+        console.warn("GenericPaginatedGrid: totalsPosition 'top' is not implemented yet — falling back to 'bottom'.");
+    }
     const processedColumns = useMemo(() => {
         const allowGrow = layoutMode === 'grid' || layoutMode === 'semantic';
         return columns.map((col) => {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { filterType, options, getSearchText, exportExcel, ...mrtCol } = col;
+            const { filterType, options, getSearchText, exportExcel, showTotal, ...mrtCol } = col;
             if (allowGrow && mrtCol.grow === undefined) {
                 mrtCol.grow = true;
             }
+            if (displayTotals) {
+                const colId = mrtCol.id ?? mrtCol.accessorKey;
+                if (showTotal) {
+                    mrtCol.Footer = () => (jsx("span", { children: (totalsRef.current[colId] ?? 0).toLocaleString() }));
+                }
+                else if (colId === leadingColumnId) {
+                    mrtCol.Footer = () => jsx("span", { style: { fontWeight: 700 }, children: "Total" });
+                }
+            }
             // Auto-inject filterFn only when the user hasn't already supplied one.
             // Note: `filterType` omitted defaults to the same plain text-input chip
             // as `filterType: 'text'` (see `ColumnFilterType` doc comment), so the
@@ -543,7 +600,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             }
             return mrtCol;
         });
-    }, [columns, layoutMode]);
+    }, [columns, layoutMode, displayTotals, leadingColumnId]);
     // ── Global Search: match formatted `Cell` text, not just the raw value ───────
     //
     // MRT's built-in global filter always compares against `row.getValue(columnId)`
@@ -917,6 +974,8 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         columnResizeMode: 'onChange',
         enableExpanding,
         renderDetailPanel,
+        enableTableFooter: displayTotals,
+        enableStickyFooter: displayTotals,
         // Note: `enableFilters` is the master switch for column AND global
         // filtering. Keep it enabled so the Global Search box (which relies on
         // `getCanGlobalFilter()`) actually filters rows. MRT's native per-column

package/dist/components/PaginatedGrid/types.d.ts

@@ -119,6 +119,16 @@ export type TPColumnDef<TData extends object = object, TValue = any> = MRT_Colum
      * explicitly opted out.
      */
     exportExcel?: boolean;
+    /**
+     * Include this column in the grid's totals row (see `displayTotals` on
+     * `GenericPaginatedGrid`). Sums the column's raw value across every row
+     * currently loaded on the page — the grid never holds more than one page
+     * of data in memory, so the total always reflects "this page's rows," not
+     * a grand total across the full server-side dataset. Only meaningful on
+     * numeric columns. Non-numeric/unparseable values are skipped (treated as
+     * 0), not coerced. Default: `false`.
+     */
+    showTotal?: boolean;
 };
 export interface InvoiceDetail {
     Data_from: string;

package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm6.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm6.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DayCell/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
+import { __exports as DayCell } from '../../../../../_virtual/index.esm12.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm4.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm13.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm11.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm12.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm13.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "3.0.26",
+  "version": "3.0.27",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",