tp-react-elements 1.3.10 → 1.3.12

package/README.md

@@ -165,9 +165,51 @@ The library provides a comprehensive set of form components that integrate seaml
 - **RadioGroup** - Radio button selection groups
 - **Switch** - Toggle switches for boolean values
 - **Form** - Container component with built-in validation
+- **GenericPaginatedGrid** - Server-paginated data grid with dynamic filter chips (see Storybook **Docs → Paginated Grid**)
 
 Refer to our Storybook documentation for detailed API documentation and examples.
 
+### Paginated grid (Storybook)
+
+```bash
+npm run storybook
+```
+
+- **Docs → Paginated Grid** — API reference plus **four copy-paste examples** (embedded panel, wrapped headers, typography, invoice filters)
+- **Components → PaginatedGrid → Sample Grids** — mock grids (no API): header wrap, compact layout, viewport fill
+- **Components → PaginatedGrid → Example Grid** — live invoice API demo
+
+**Example — compact embedded grid with smaller fonts:**
+
+```tsx
+<GenericPaginatedGrid
+  tableHeight="calc(100vh - 240px)"
+  autoFillViewport={false}
+  uiDensity="compact"
+  headerBgColor="#f5f5f5"
+  headerMaxHeight={64}
+  headerFontSize={11}
+  bodyFontSize={10}
+  {...gridProps}
+/>
+```
+
+**Example — wrapped header “Department / Business Unit”:**
+
+```tsx
+<GenericPaginatedGrid
+  headerBgColor="#e8eaf6"
+  headerMinHeight="48px"
+  headerMaxHeight="96px"
+  headerFontSize={12}
+  bodyFontSize={12}
+  layoutMode="grid"
+  {...gridProps}
+/>
+```
+
+Full examples: Storybook **Docs → Paginated Grid → Examples**.
+
 ## 🏗️ Best Practices for Code Structure and Organization
 
 ### Component Organization

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

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

@@ -82,6 +82,10 @@ export interface DynamicFilterBarProps {
     availableColumns: AvailableColumn[];
     /** Maximum number of chips that may be visible at once. Default: 4. */
     maxVisibleFilters?: number;
+    uiDensity?: 'default' | 'compact';
+    filterChipFontSize?: number;
+    filterChipMinHeight?: number;
+    filterLabelFontSize?: number;
 }
-declare const DynamicFilterBar: ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element;
+declare const DynamicFilterBar: ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, uiDensity, filterChipFontSize, filterChipMinHeight, filterLabelFontSize, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element;
 export default DynamicFilterBar;

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

@@ -38,19 +38,17 @@ const COLUMN_TYPE_PILL = {
     'searchable-select': { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
     number: { label: 'Number', color: '#e65100', bg: '#fff3e0' },
 };
-// ─── Chip shared style ────────────────────────────────────────────────────────
-const chipSx = (active) => ({
+const chipSx = (active, opts) => ({
     borderRadius: 5,
     textTransform: 'none',
-    fontSize: 12,
+    fontSize: opts.fontSize,
     fontWeight: active ? 600 : 400,
     borderColor: active ? 'primary.main' : 'divider',
     color: active ? 'primary.main' : 'text.secondary',
     bgcolor: active ? 'rgba(25,118,210,0.08)' : 'transparent',
     whiteSpace: 'nowrap',
-    px: 1.5,
-    minHeight: 30,
-    // Cap chip width so long option labels don't break the filter bar layout
+    px: opts.px ?? (opts.fontSize <= 11 ? 1 : 1.5),
+    minHeight: opts.minHeight,
     maxWidth: 260,
     overflow: 'hidden',
     '&:hover': { borderColor: 'primary.main', bgcolor: 'rgba(25,118,210,0.08)' },
@@ -78,7 +76,7 @@ const fmtDate = (iso) => {
     const yearSuffix = y !== thisYear ? ` '${y.slice(2)}` : '';
     return `${Number(d)} ${months[Number(m) - 1]}${yearSuffix}`;
 };
-const DateRangeChip = ({ label, fromDate, toDate, onApply, onRemove }) => {
+const DateRangeChip = ({ label, fromDate, toDate, onApply, onRemove, chipStyle }) => {
     // Inject react-date-range CSS via JS (not CSS import) to prevent it from being
     // bundled into the library's extracted CSS file and leaking into consumer apps.
     useRdrStyles();
@@ -120,14 +118,14 @@ const DateRangeChip = ({ label, fromDate, toDate, onApply, onRemove }) => {
             setAnchor(null);
         }
     };
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipLabel : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: openPicker, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: jsx(ChipLabel, { text: chipLabel }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, overflow: 'hidden' } }, children: [jsx(distExports.DateRange, { editableDateInputs: false, onChange: handleRangeChange, moveRangeOnFirstSelection: false, ranges: selRange, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#1976d2'] }), active && (jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', px: 2, pb: 1.5 }, children: jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply('', ''); setAnchor(null); }, children: "Clear" }) }))] })] }));
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipLabel : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: openPicker, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipLabel }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, overflow: 'hidden' } }, children: [jsx(distExports.DateRange, { editableDateInputs: false, onChange: handleRangeChange, moveRangeOnFirstSelection: false, ranges: selRange, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#1976d2'] }), active && (jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', px: 2, pb: 1.5 }, children: jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply('', ''); setAnchor(null); }, children: "Clear" }) }))] })] }));
 };
-const TextFilterChip = ({ label, value, onApply, onRemove, placeholder }) => {
+const TextFilterChip = ({ label, value, onApply, onRemove, placeholder, chipStyle }) => {
     const [anchor, setAnchor] = useState(null);
     const [draft, setDraft] = useState('');
     const active = Boolean(value);
     const chipText = active ? `${label}: ${value}` : label;
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: (e) => { setDraft(value); setAnchor(e.currentTarget); }, endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, minWidth: 240 } }, children: jsxs(Box, { sx: { p: 2 }, children: [jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", display: "block", mb: 1.5, children: label }), jsx(TextField, { value: draft, onChange: (e) => setDraft(e.target.value), placeholder: placeholder, size: "small", fullWidth: true, autoFocus: true, onKeyDown: (e) => {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: (e) => { setDraft(value); setAnchor(e.currentTarget); }, endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, minWidth: 240 } }, children: jsxs(Box, { sx: { p: 2 }, children: [jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", display: "block", mb: 1.5, children: label }), jsx(TextField, { value: draft, onChange: (e) => setDraft(e.target.value), placeholder: placeholder, size: "small", fullWidth: true, autoFocus: true, onKeyDown: (e) => {
                                 if (e.key === 'Enter') {
                                     onApply(draft);
                                     setAnchor(null);
@@ -136,7 +134,7 @@ const TextFilterChip = ({ label, value, onApply, onRemove, placeholder }) => {
                                     setAnchor(null);
                             } }), jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", mt: 1.5, children: [active && (jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply(''); setAnchor(null); }, children: "Clear" })), jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: () => { onApply(draft); setAnchor(null); }, children: "Apply" })] })] }) })] }));
 };
-const DatePickerChip = ({ label, value, onApply, onRemove }) => {
+const DatePickerChip = ({ label, value, onApply, onRemove, chipStyle }) => {
     const [open, setOpen] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const active = Boolean(value);
@@ -160,7 +158,7 @@ const DatePickerChip = ({ label, value, onApply, onRemove }) => {
     // LocalizationProvider must wrap DatePicker — scoped here so it only
     // loads when the chip is actually used (DatePickerChip is tree-shaken
     // if the 'date' filter type is never included in serverFilterDefs).
-    jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: handleChipClick, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(DatePicker, { value: dayjsValue, open: open, onClose: () => setOpen(false), onChange: handleChange, slotProps: {
+    jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: handleChipClick, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(DatePicker, { value: dayjsValue, open: open, onClose: () => setOpen(false), onChange: handleChange, slotProps: {
                     textField: { sx: { display: 'none' }, size: 'small' },
                     popper: {
                         anchorEl,
@@ -168,7 +166,7 @@ const DatePickerChip = ({ label, value, onApply, onRemove }) => {
                     },
                 } })] }));
 };
-const DropdownFilterChip = ({ label, value, options, onApply, onRemove }) => {
+const DropdownFilterChip = ({ label, value, options, onApply, onRemove, chipStyle }) => {
     const [anchor, setAnchor] = useState(null);
     const active = Boolean(value);
     const selectedLabel = options.find((o) => o.value === value)?.label ?? '';
@@ -199,7 +197,7 @@ const DropdownFilterChip = ({ label, value, options, onApply, onRemove }) => {
         ],
     };
     const chipText = active ? `${label}: ${selectedLabel}` : label;
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(ArrowDropDownIcon, { sx: { fontSize: '15px !important', mr: -0.5 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, p: 1.5, minWidth: 240 } }, children: jsx(SingleSelectNonAutoComplete, { props: {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(ArrowDropDownIcon, { sx: { fontSize: '15px !important', mr: -0.5 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, p: 1.5, minWidth: 240 } }, children: jsx(SingleSelectNonAutoComplete, { props: {
                         item,
                         register,
                         control,
@@ -210,7 +208,7 @@ const DropdownFilterChip = ({ label, value, options, onApply, onRemove }) => {
                         watch,
                     }, variant: "outlined" }) })] }));
 };
-const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeholder = 'Search…', }) => {
+const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeholder = 'Search…', chipStyle, }) => {
     const [anchor, setAnchor] = useState(null);
     const [search, setSearch] = useState('');
     const active = Boolean(value);
@@ -228,7 +226,7 @@ const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeh
         ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
         : options;
     const chipText = active ? `${label}: ${selectedLabel}` : label;
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: open, startIcon: jsx(SearchIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: jsx(ChipLabel, { text: chipText }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: open, startIcon: jsx(SearchIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: {
                     sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 280, display: 'flex', flexDirection: 'column' },
                 }, children: [jsx(Box, { sx: { px: 1.5, pt: 1.5, pb: 0.75 }, children: jsx(TextField, { size: "small", fullWidth: true, autoFocus: true, placeholder: placeholder, value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => { if (e.key === 'Escape')
                                 setAnchor(null); }, InputProps: {
@@ -246,7 +244,7 @@ const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeh
                                             } }), isSelected && (jsx(CheckIcon, { sx: { fontSize: 15, color: 'primary.main', flexShrink: 0 } }))] }, opt.value));
                             }))] })] })] }));
 };
-const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, maxVisible = 4, }) => {
+const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, maxVisible = 4, chipStyle, }) => {
     const [anchor, setAnchor] = useState(null);
     const atLimit = visibleIds.length >= maxVisible;
     // Shared pill box renderer
@@ -262,9 +260,9 @@ const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, o
             lineHeight: 1.6,
         }, children: label }));
     return (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Add or remove filter chips", children: jsx(Button, { size: "small", variant: "outlined", startIcon: jsx(TuneIcon, { sx: { fontSize: 14 } }), onClick: (e) => setAnchor(e.currentTarget), sx: {
-                        borderRadius: 5, textTransform: 'none', fontSize: 12,
+                        borderRadius: 5, textTransform: 'none', fontSize: chipStyle.fontSize,
                         borderColor: 'divider', color: 'text.secondary',
-                        px: 1.5, minHeight: 30,
+                        px: chipStyle.px ?? 1.5, minHeight: chipStyle.minHeight,
                         '&:hover': { borderColor: 'primary.main', color: 'primary.main' },
                     }, children: "Manage Filters" }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 280 } }, children: [atLimit && (jsx(Box, { sx: {
                             px: 2, py: 0.75,
@@ -292,7 +290,12 @@ 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, }) => {
+const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters = 4, uiDensity = 'default', filterChipFontSize, filterChipMinHeight, filterLabelFontSize, }) => {
+    const chipStyle = {
+        fontSize: filterChipFontSize ?? (uiDensity === 'compact' ? 11 : 12),
+        minHeight: filterChipMinHeight ?? (uiDensity === 'compact' ? 26 : 30),
+    };
+    const labelFontSize = filterLabelFontSize ?? (uiDensity === 'compact' ? 11 : 12);
     const getColValue = (id) => columnFilters.find((f) => f.id === id)?.value ?? '';
     const applyColFilter = (id, value) => {
         const rest = columnFilters.filter((f) => f.id !== id);
@@ -316,36 +319,36 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
         }
         onToggleFilter(id);
     };
-    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: 15, color: 'text.disabled' } }), jsx(Typography, { variant: "body2", fontSize: 12, 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: [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) => {
                 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: () => removeFilter(id) }, id));
+                    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: () => removeFilter(id), chipStyle: chipStyle }, id));
                 }
                 if (def?.type === 'text') {
-                    return (jsx(TextFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder }, id));
+                    return (jsx(TextFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder, chipStyle: chipStyle }, id));
                 }
                 if (def?.type === 'dropdown') {
-                    return (jsx(DropdownFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id) }, id));
+                    return (jsx(DropdownFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
                 }
                 if (def?.type === 'searchableDropdown') {
-                    return (jsx(SearchableSelectChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder ?? 'Search…' }, id));
+                    return (jsx(SearchableSelectChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder ?? 'Search…', chipStyle: chipStyle }, id));
                 }
                 if (def?.type === 'date') {
-                    return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => removeFilter(id) }, id));
+                    return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
                 }
                 // Column filter chip — render the variant that matches the column's filterType
                 const col = availableColumns.find((c) => c.id === id);
                 if (!col)
                     return null;
                 if (col.filterType === 'date') {
-                    return (jsx(DatePickerChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id) }, id));
+                    return (jsx(DatePickerChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
                 }
                 if (col.filterType === 'select' || col.filterType === 'searchable-select') {
-                    return (jsx(SearchableSelectChip, { label: col.label, value: getColValue(id), options: col.filterOptions ?? [], onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id) }, id));
+                    return (jsx(SearchableSelectChip, { label: col.label, value: getColValue(id), options: col.filterOptions ?? [], onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
                 }
                 // Default: free-text input
-                return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), placeholder: `Filter by ${col.label}` }, id));
-            }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter, maxVisible: maxVisibleFilters })] }));
+                return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), placeholder: `Filter by ${col.label}`, chipStyle: chipStyle }, id));
+            }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter, maxVisible: maxVisibleFilters, chipStyle: chipStyle })] }));
 };
 
 export { DynamicFilterBar as default };

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

@@ -7,6 +7,25 @@ export interface PagedResult<TData> {
     data: TData[];
     totalRecords: number;
 }
+/** Preset for toolbar, filter chips, and pagination footer sizing. */
+export type GridUiDensity = 'default' | 'compact';
+/** Fine-grained UI sizing overrides (merged on top of `uiDensity` preset). */
+export interface GridUiDensityOptions {
+    footerMinHeight?: number;
+    footerFontSize?: number;
+    footerIconSize?: number;
+    footerPaddingY?: number;
+    filterChipFontSize?: number;
+    filterChipMinHeight?: number;
+    filterLabelFontSize?: number;
+    toolbarIconFontSize?: number | string;
+    /** Header column title font size (px number). */
+    headerFontSize?: number;
+    /** Body cell data font size (px number). */
+    bodyFontSize?: number;
+    /** MRT built-in toolbar control density (show/hide columns, density toggle, etc.). */
+    mrtDensity?: 'comfortable' | 'compact' | 'spacious';
+}
 export interface GenericPaginatedGridProps<TData extends object> {
     /**
      * Column definitions. Use `TPColumnDef<TData>` (a superset of `MRT_ColumnDef`)
@@ -36,11 +55,35 @@ export interface GenericPaginatedGridProps<TData extends object> {
     /**
      * Height of the entire grid component.
      * When omitted (default) the grid auto-sizes to fill the remaining viewport
-     * height from its top position — the page never needs to scroll.
-     * Pass an explicit CSS value only when you need to override
-     * (e.g. "600px", "calc(100vh - 300px)").
+     * height from its top position on mount and window resize only (not on scroll).
+     * Pass an explicit CSS value to pin height (e.g. "600px", "calc(100vh - 300px)").
      */
     tableHeight?: string;
+    /**
+     * Minimum height of the grid wrapper (CSS length).
+     * Used in auto-height `clamp()` and as `minHeight` when `tableHeight` is set.
+     * Default: `300px`.
+     */
+    tableMinHeight?: string;
+    /**
+     * Maximum height of the grid wrapper (CSS length).
+     * Caps auto-calculated viewport height. Default: none (only viewport clamp).
+     */
+    tableMaxHeight?: string;
+    /**
+     * When false, disables viewport auto-height; use `tableHeight` or `tableMinHeight` only.
+     * Default: true (unless `tableHeight` is provided).
+     */
+    autoFillViewport?: boolean;
+    /**
+     * MRT column layout. Default `grid` — columns grow to fill width (no trailing spacer column).
+     * Use `grid-no-grow` only when you need fixed column widths with horizontal scroll.
+     */
+    layoutMode?: 'grid' | 'semantic' | 'grid-no-grow';
+    /** Compact toolbar, filter chips, and footer. Default: `default`. */
+    uiDensity?: GridUiDensity;
+    /** Override individual sizes from the `uiDensity` preset. */
+    uiDensityOptions?: GridUiDensityOptions;
     /** Choices shown in the "Rows per page" footer dropdown. Default: [1 000, 5 000, 10 000]. */
     pageSizeOptions?: number[];
     /**
@@ -48,6 +91,31 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Accepts any valid CSS colour string.
      */
     headerBgColor?: string;
+    /**
+     * Minimum height of every header cell (CSS length or px number).
+     * Default: `40px` (`34px` when `uiDensity="compact"`).
+     */
+    headerMinHeight?: string | number;
+    /**
+     * Maximum height of the header row — **all columns use the same height**.
+     * Long titles wrap inside this box. Default: `72px` (`56px` compact).
+     */
+    headerMaxHeight?: string | number;
+    /**
+     * Optional max lines for header text (`-webkit-line-clamp`).
+     * Omit to allow text to use the full `headerMaxHeight` (recommended for tall headers).
+     */
+    headerMaxLines?: number;
+    /**
+     * Font size for header column titles (CSS length or px number).
+     * Default: `12px` (`11px` when `uiDensity="compact"`). Overridden by `uiDensityOptions.headerFontSize`.
+     */
+    headerFontSize?: string | number;
+    /**
+     * Font size for body/data cells (CSS length or px number).
+     * Default: `12px` (`11px` compact). Overridden by `uiDensityOptions.bodyFontSize`.
+     */
+    bodyFontSize?: string | number;
     /**
      * Maximum number of filter chips that can be visible at once.
      * Prevents the filter bar from wrapping to a second row on typical screens.
@@ -55,5 +123,5 @@ export interface GenericPaginatedGridProps<TData extends object> {
      */
     maxVisibleFilters?: number;
 }
-declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, pageSizeOptions, headerBgColor, maxVisibleFilters, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, pageSizeOptions, headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useLayoutEffect, useMemo } from 'react';
+import { useMemo, useState, useRef, useLayoutEffect } from 'react';
 import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import { Box, Tooltip, IconButton, GlobalStyles, Typography, Select, MenuItem, CircularProgress } from '@mui/material';
@@ -11,6 +11,178 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import DynamicFilterBar from './DynamicFilterBar.esm.js';
 
+const UI_DENSITY_PRESETS = {
+    default: {
+        footerMinHeight: 48,
+        footerFontSize: 14,
+        footerIconSize: 20,
+        footerPaddingY: 0.75,
+        filterChipFontSize: 12,
+        filterChipMinHeight: 30,
+        filterLabelFontSize: 12,
+        toolbarIconFontSize: 'small',
+        headerFontSize: 12,
+        bodyFontSize: 12,
+        mrtDensity: 'comfortable',
+    },
+    compact: {
+        footerMinHeight: 32,
+        footerFontSize: 12,
+        footerIconSize: 18,
+        footerPaddingY: 0.25,
+        filterChipFontSize: 11,
+        filterChipMinHeight: 26,
+        filterLabelFontSize: 11,
+        toolbarIconFontSize: 'inherit',
+        headerFontSize: 11,
+        bodyFontSize: 11,
+        mrtDensity: 'compact',
+    },
+};
+const toCssSize = (value, fallback) => {
+    if (value === undefined)
+        return fallback;
+    return typeof value === 'number' ? `${value}px` : value;
+};
+/**
+ * Header overrides applied via GlobalStyles (literal prop values).
+ * MRT sets `backgroundColor: 'inherit'` and fixed density padding — must use !important.
+ */
+const buildBodyGlobalStyles = (bodyFont) => ({
+    '.tp-gpg-root .MuiTableBody-root .MuiTableCell-root': {
+        fontSize: `${bodyFont} !important`,
+        lineHeight: 1.35,
+    },
+});
+const buildHeaderGlobalStyles = (headerMin, headerMax, headerFont, headerBgColor) => {
+    const headCell = {
+        height: `${headerMax} !important`,
+        minHeight: `${headerMin} !important`,
+        maxHeight: `${headerMax} !important`,
+        boxSizing: 'border-box !important',
+        alignSelf: 'stretch !important',
+        whiteSpace: 'normal !important',
+        verticalAlign: 'middle !important',
+        pt: '8px !important',
+        pb: '8px !important',
+        px: '14px !important',
+    };
+    if (headerBgColor) {
+        headCell.backgroundColor = `${headerBgColor} !important`;
+        headCell.backgroundImage = 'none !important';
+    }
+    return {
+        '.tp-gpg-root .MuiTableHead-root .MuiTableRow-root': {
+            height: `${headerMax} !important`,
+            minHeight: `${headerMin} !important`,
+            maxHeight: `${headerMax} !important`,
+            alignItems: 'stretch !important',
+            ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
+        },
+        '.tp-gpg-root .MuiTableHead-root .MuiTableCell-head': {
+            ...headCell,
+            fontSize: `${headerFont} !important`,
+        },
+        '.tp-gpg-root .MuiTableHead-root .Mui-TableHeadCell-Content': {
+            height: '100% !important',
+            width: '100% !important',
+            minHeight: '0 !important',
+            alignItems: 'center !important',
+        },
+        '.tp-gpg-root .MuiTableHead-root .Mui-TableHeadCell-Content-Labels': {
+            overflow: 'visible !important',
+            flexWrap: 'wrap !important',
+            whiteSpace: 'normal !important',
+            textOverflow: 'clip !important',
+            width: '100% !important',
+            maxWidth: '100% !important',
+        },
+        '.tp-gpg-root .MuiTableHead-root .Mui-TableHeadCell-Content-Wrapper': {
+            overflow: 'visible !important',
+            whiteSpace: 'normal !important',
+            textOverflow: 'clip !important',
+            wordBreak: 'break-word !important',
+            overflowWrap: 'anywhere !important',
+            width: '100% !important',
+            maxWidth: '100% !important',
+            fontSize: `${headerFont} !important`,
+            display: 'block !important',
+            WebkitLineClamp: 'unset !important',
+            WebkitBoxOrient: 'unset !important',
+        },
+        '.tp-gpg-root .MuiTableHead-root .MuiTableSortLabel-root': {
+            whiteSpace: 'normal !important',
+            wordBreak: 'break-word !important',
+            overflowWrap: 'anywhere !important',
+            width: '100% !important',
+            fontSize: `${headerFont} !important`,
+        },
+    };
+};
+/** Per-cell sx merged into MRT (via muiTableHeadCellProps). */
+const buildHeaderCellSx = (align, headerMin, headerMax, headerFont, headerBgColor, headerMaxLines) => {
+    const textAlign = align;
+    const flexJustify = align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start';
+    const wrapperClamp = headerMaxLines != null && headerMaxLines > 0
+        ? {
+            display: '-webkit-box',
+            WebkitLineClamp: headerMaxLines,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+        }
+        : {
+            display: 'block',
+            WebkitLineClamp: 'unset',
+            overflow: 'visible',
+        };
+    return {
+        ...(headerBgColor
+            ? { backgroundColor: `${headerBgColor} !important`, backgroundImage: 'none' }
+            : {}),
+        height: `${headerMax} !important`,
+        minHeight: `${headerMin} !important`,
+        maxHeight: `${headerMax} !important`,
+        fontSize: headerFont,
+        boxSizing: 'border-box',
+        borderRight: '1px solid rgba(224,224,224,1)',
+        borderBottom: '2px solid rgba(0,0,0,0.15)',
+        '& button[aria-label="Move"]': { display: 'none !important' },
+        '& .MuiTableSortLabel-icon': { display: 'none !important' },
+        '& .Mui-TableHeadCell-ResizeHandle-Wrapper': { height: '100%', top: 0 },
+        '& .Mui-TableHeadCell-ResizeHandle-Divider': { borderRight: 'none' },
+        '& .Mui-TableHeadCell-Content': {
+            alignItems: 'center',
+            justifyContent: flexJustify,
+            height: '100%',
+            width: '100%',
+        },
+        '& .Mui-TableHeadCell-Content-Labels': {
+            flexWrap: 'wrap',
+            whiteSpace: 'normal',
+            textAlign,
+            width: '100%',
+            justifyContent: flexJustify,
+            overflow: 'visible',
+        },
+        '& .Mui-TableHeadCell-Content-Wrapper': {
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+            overflowWrap: 'anywhere',
+            lineHeight: 1.25,
+            fontSize: headerFont,
+            width: '100%',
+            textAlign,
+            ...wrapperClamp,
+        },
+        '& .MuiTableSortLabel-root': {
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+            fontSize: headerFont,
+            width: '100%',
+            margin: 0,
+        },
+    };
+};
 // ─── Internal: overlay loader ─────────────────────────────────────────────────
 const OverlayLoader = ({ message }) => (jsxs(Box, { sx: {
         position: 'absolute', inset: 0,
@@ -19,31 +191,52 @@ const OverlayLoader = ({ message }) => (jsxs(Box, { sx: {
         bgcolor: 'rgba(255,255,255,0.80)', backdropFilter: 'blur(2px)',
         zIndex: 10, gap: 1.5,
     }, children: [jsx(CircularProgress, { size: 50, thickness: 4 }), jsx(Typography, { variant: "body2", color: "text.secondary", fontWeight: 500, children: message })] }));
-const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, }) => {
+const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, density, }) => {
+    const fs = density.footerFontSize;
+    const selectH = density.footerMinHeight - 8;
     const startRow = totalRecords === 0 ? 0 : pageIndex * pageSize + 1;
     const endRow = Math.min((pageIndex + 1) * pageSize, totalRecords);
     return (jsxs(Box, { sx: {
             display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
-            gap: { xs: 1.5, md: 3 }, px: 2, py: 0.75,
+            gap: { xs: 1, md: 2 }, px: 1.5, py: density.footerPaddingY,
             borderTop: '1px solid', borderColor: 'divider',
-            bgcolor: 'background.paper', flexWrap: 'wrap', minHeight: 48,
-        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), size: "small", variant: "outlined", sx: {
-                            height: 28, fontSize: 13, minWidth: 80,
-                            '.MuiSelect-select': { py: '3px !important' },
+            bgcolor: 'background.paper', flexWrap: 'wrap',
+            minHeight: density.footerMinHeight,
+            flexShrink: 0,
+        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.75 }, children: [jsx(Typography, { sx: { fontSize: fs }, color: "text.secondary", noWrap: true, children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), size: "small", variant: "outlined", sx: {
+                            height: selectH, fontSize: fs - 1, minWidth: 72,
+                            '.MuiSelect-select': { py: '2px !important' },
                             '.MuiOutlinedInput-notchedOutline': { borderColor: 'divider' },
-                        }, children: pageSizeOptions.map((opt) => (jsx(MenuItem, { value: opt, sx: { fontSize: 13 }, children: opt.toLocaleString() }, opt))) })] }), jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: isLoading || (isFetching && totalRecords === 0)
+                        }, children: pageSizeOptions.map((opt) => (jsx(MenuItem, { value: opt, sx: { fontSize: fs - 1 }, children: opt.toLocaleString() }, opt))) })] }), jsx(Typography, { sx: { fontSize: fs }, color: "text.secondary", noWrap: true, children: isLoading || (isFetching && totalRecords === 0)
                     ? 'Loading…'
                     : totalRecords === 0
                         ? 'No records'
-                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onFirst, disabled: !canPrev, children: jsx(FirstPageIcon, { sx: { fontSize: 20 } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onPrev, disabled: !canPrev, children: jsx(ChevronLeftIcon, { sx: { fontSize: 20 } }) }) }) }), jsx(Typography, { variant: "body2", fontWeight: 600, sx: {
-                            mx: 0.5, minWidth: 28, height: 28,
+                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onFirst, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(FirstPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onPrev, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(ChevronLeftIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Typography, { fontWeight: 600, sx: {
+                            mx: 0.5,
+                            minWidth: density.footerMinHeight - 12,
+                            height: density.footerMinHeight - 12,
                             display: 'flex', alignItems: 'center', justifyContent: 'center',
                             borderRadius: 1, border: '1px solid', borderColor: 'primary.main',
-                            color: 'primary.main', bgcolor: 'rgba(25,118,210,0.07)', fontSize: 13,
-                        }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onNext, disabled: !canNext, children: jsx(ChevronRightIcon, { sx: { fontSize: 20 } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onLast, disabled: !canNext, children: jsx(LastPageIcon, { sx: { fontSize: 20 } }) }) }) })] })] }));
+                            color: 'primary.main', bgcolor: 'rgba(25,118,210,0.07)', fontSize: fs - 1,
+                        }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { 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, { 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', tableHeight, pageSizeOptions = [1000, 5000, 10000], headerBgColor, maxVisibleFilters = 4, }) {
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, }) {
+    const densityTokens = useMemo(() => ({ ...UI_DENSITY_PRESETS[uiDensity], ...uiDensityOptions }), [uiDensity, uiDensityOptions]);
+    const resolvedHeaderMinHeight = toCssSize(headerMinHeight, uiDensity === 'compact' ? '34px' : '40px');
+    const resolvedHeaderMaxHeight = toCssSize(headerMaxHeight, uiDensity === 'compact' ? '56px' : '72px');
+    const resolvedHeaderFontSize = toCssSize(headerFontSize ?? densityTokens.headerFontSize, uiDensity === 'compact' ? '11px' : '12px');
+    const resolvedBodyFontSize = toCssSize(bodyFontSize ?? densityTokens.bodyFontSize, uiDensity === 'compact' ? '11px' : '12px');
+    const tableStyleOverrides = useMemo(() => ({
+        ...buildHeaderGlobalStyles(resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor),
+        ...buildBodyGlobalStyles(resolvedBodyFontSize),
+    }), [
+        resolvedHeaderMinHeight,
+        resolvedHeaderMaxHeight,
+        resolvedHeaderFontSize,
+        resolvedBodyFontSize,
+        headerBgColor,
+    ]);
     const defaultVisible = defaultVisibleFilterIds
         ?? (serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : []);
     // ── State ──────────────────────────────────────────────────────────────────
@@ -57,58 +250,35 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     const [columnFilters, setColumnFilters] = useState([]);
     const [globalFilter, setGlobalFilter] = useState('');
     const [columnPinning, setColumnPinning] = useState({});
-    // ── Viewport-fill: measure this component's top offset and derive height ──────
-    //
-    // When tableHeight is not provided, we measure how far the wrapper sits from
-    // the top of the viewport and set height = 100vh − topOffset − 8px (tiny
-    // bottom margin).  A ResizeObserver on <html> keeps the value in sync if the
-    // layout shifts (sidebar collapses, font loads, etc.).
+    // ── Viewport-fill height (mount + resize only — never on scroll) ─────────────
     //
-    // The MRT Paper + TableContainer flex chain distributes that height between
-    // the toolbar, sticky column headers, scrollable rows, and pagination footer —
-    // so the grid fills the window exactly and the page never needs to scroll.
+    // Previously a scroll listener recalculated height as the grid moved within the
+    // viewport, which grew the grid while scrolling and caused double scrollbars.
     const containerRef = useRef(null);
     const [autoHeight, setAutoHeight] = useState('');
+    const shouldAutoFill = autoFillViewport && !tableHeight;
     useLayoutEffect(() => {
-        if (tableHeight)
-            return; // explicit prop — skip auto calculation
+        if (!shouldAutoFill)
+            return;
         const el = containerRef.current;
         if (!el)
             return;
         const update = () => {
             const top = el.getBoundingClientRect().top;
-            // CSS max() guarantees a minimum visible height (300px) when the grid
-            // starts below the fold or when little viewport space remains — both
-            // cases produce a negative/tiny calc() that would otherwise collapse
-            // the grid to zero height.
-            setAutoHeight(`max(300px, calc(100vh - ${Math.ceil(top) + 8}px))`);
+            const preferred = `calc(100vh - ${Math.ceil(top) + 8}px)`;
+            const maxPart = tableMaxHeight ?? preferred;
+            setAutoHeight(`clamp(${tableMinHeight}, ${preferred}, ${maxPart})`);
         };
         update();
-        // Re-measure on any document resize (window resize, sidebar toggle, etc.)
         const ro = new ResizeObserver(update);
-        ro.observe(document.documentElement);
-        // Re-measure when the scroll container scrolls — the grid's
-        // viewport-relative top offset shifts with scroll position, so the
-        // height must be recalculated to fill the remaining visible space.
-        const findScrollParent = (node) => {
-            let p = node.parentElement;
-            while (p && p !== document.documentElement) {
-                const { overflow, overflowY } = window.getComputedStyle(p);
-                if (/auto|scroll/.test(overflow) || /auto|scroll/.test(overflowY))
-                    return p;
-                p = p.parentElement;
-            }
-            return window;
-        };
-        const scrollParent = findScrollParent(el);
-        scrollParent.addEventListener('scroll', update, { passive: true });
+        ro.observe(el);
+        window.addEventListener('resize', update, { passive: true });
         return () => {
             ro.disconnect();
-            scrollParent.removeEventListener('scroll', update);
+            window.removeEventListener('resize', update);
         };
-    }, [tableHeight]);
-    // Resolved height: explicit prop › auto-calculated › safe fallback
-    const resolvedHeight = tableHeight || autoHeight || '60vh';
+    }, [shouldAutoFill, tableMinHeight, tableMaxHeight]);
+    const resolvedHeight = tableHeight || (shouldAutoFill ? autoHeight : undefined) || tableMinHeight;
     // ── Data fetching ──────────────────────────────────────────────────────────
     const { data, isLoading, isError, isFetching, refetch } = useQuery({
         queryKey: [...queryKey, filterValues, pagination.pageIndex],
@@ -124,9 +294,13 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     // 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.
     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, ...mrtCol } = col;
+            if (allowGrow && mrtCol.grow === undefined) {
+                mrtCol.grow = true;
+            }
             // Auto-inject filterFn only when the user hasn't already supplied one.
             if (!mrtCol.filterFn && filterType) {
                 if (filterType === 'date') {
@@ -145,7 +319,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             }
             return mrtCol;
         });
-    }, [columns]);
+    }, [columns, layoutMode]);
     // ── Derive column list for filter chip picker ──────────────────────────────
     //
     // A column is excluded from the "Column Filters" section of Manage Filters
@@ -211,6 +385,22 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     const table = useMaterialReactTable({
         columns: processedColumns,
         data: rows,
+        layoutMode,
+        displayColumnDefOptions: {
+            'mrt-row-spacer': {
+                size: 0,
+                minSize: 0,
+                maxSize: 0,
+                grow: false,
+                enableResizing: false,
+                muiTableHeadCellProps: {
+                    sx: { display: 'none !important', width: 0, maxWidth: 0, p: 0, border: 'none' },
+                },
+                muiTableBodyCellProps: {
+                    sx: { display: 'none !important', width: 0, maxWidth: 0, p: 0, border: 'none' },
+                },
+            },
+        },
         manualPagination: true,
         rowCount: totalRecords,
         manualSorting: false,
@@ -246,95 +436,122 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         enableHiding: true,
         enableStickyHeader: true,
         enableRowVirtualization: true,
-        // The container fills whatever height is left after the top toolbar and
-        // pagination footer.  minHeight ensures a visible body even when there are
-        // no records; flex: '1 1 0' lets it grow to fill the remaining space.
+        initialState: {
+            density: densityTokens.mrtDensity,
+        },
+        muiTableProps: {
+            sx: { width: '100%' },
+        },
         muiTableContainerProps: {
             sx: {
                 flex: '1 1 0',
-                minHeight: '150px',
+                minHeight: 0,
+                maxHeight: '100%',
+                overflow: 'auto',
             },
         },
-        // Paper fills the wrapper Box height and acts as the flex column host for
-        // toolbar → table-container → pagination.
         muiTablePaperProps: {
             sx: {
                 height: '100%',
+                minHeight: 0,
                 display: 'flex',
                 flexDirection: 'column',
+                overflow: 'hidden',
+                boxShadow: 'none',
             },
         },
         muiTopToolbarProps: {
             sx: {
                 alignItems: 'center',
                 flexWrap: 'nowrap',
+                minHeight: densityTokens.filterChipMinHeight + 12,
+                py: uiDensity === 'compact' ? 0.25 : 0.5,
+                '& .MuiIconButton-root': { p: uiDensity === 'compact' ? 0.35 : 0.5 },
+                '& .MuiIconButton-root svg': { fontSize: densityTokens.toolbarIconFontSize === 'small' ? 18 : 20 },
+            },
+        },
+        muiTableHeadProps: {
+            sx: {
+                position: 'sticky',
+                top: 0,
+                zIndex: 2,
+                ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
+            },
+        },
+        muiTableHeadRowProps: {
+            sx: {
+                height: resolvedHeaderMaxHeight,
+                minHeight: resolvedHeaderMinHeight,
+                maxHeight: resolvedHeaderMaxHeight,
+                alignItems: 'stretch',
+                ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
             },
         },
         muiTableHeadCellProps: ({ column }) => {
             const colProps = column.columnDef.muiTableHeadCellProps;
-            const align = colProps && typeof colProps !== 'function'
-                ? colProps.align
-                : undefined;
-            const justifyContent = align === 'right' ? 'flex-start'
-                : align === 'center' ? 'center'
-                    : 'flex-end';
+            let align = 'left';
+            let colSx;
+            if (typeof colProps === 'function') {
+                const resolved = colProps({ column });
+                align = resolved?.align ?? 'left';
+                colSx = resolved?.sx;
+            }
+            else if (colProps) {
+                align = colProps.align ?? 'left';
+                colSx = colProps.sx;
+            }
             return {
-                align: (align ?? 'left'),
-                sx: {
-                    ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
-                    verticalAlign: 'bottom',
-                    whiteSpace: 'normal',
-                    borderRight: '1px solid rgba(224,224,224,1)',
-                    borderBottom: '2px solid rgba(0,0,0,0.15)',
-                    '& button[aria-label="Move"]': { display: 'none !important' },
-                    '& .MuiTableSortLabel-icon': { display: 'none !important' },
-                    '& .Mui-TableHeadCell-ResizeHandle-Wrapper': {
-                        height: '100%',
-                        top: 0,
-                    },
-                    '& .Mui-TableHeadCell-ResizeHandle-Divider': {
-                        borderRight: 'none',
-                    },
-                    '& .Mui-TableHeadCell-Content': {
-                        alignItems: 'flex-end',
-                        justifyContent,
-                    },
-                    '& .Mui-TableHeadCell-Content-Labels': {
-                        flexWrap: 'wrap',
-                        whiteSpace: 'normal',
-                        overflowWrap: 'normal',
-                        lineHeight: 1.3,
-                        justifyContent,
-                    },
-                    '& .Mui-TableHeadCell-Content-Wrapper': {
-                        whiteSpace: 'normal',
-                        overflow: 'visible',
-                    },
-                },
+                align,
+                sx: [
+                    buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor, headerMaxLines),
+                    ...(colSx ? [colSx] : []),
+                ],
             };
         },
-        muiTableBodyCellProps: {
-            sx: {
-                whiteSpace: 'nowrap',
-                borderRight: '1px solid rgba(224,224,224,1)',
-            },
+        muiTableBodyCellProps: ({ column }) => {
+            const colProps = column.columnDef.muiTableBodyCellProps;
+            let colSx;
+            if (typeof colProps === 'function') {
+                const resolved = colProps({ column });
+                colSx = resolved?.sx;
+            }
+            else if (colProps) {
+                colSx = colProps.sx;
+            }
+            return {
+                sx: [
+                    {
+                        whiteSpace: 'nowrap',
+                        fontSize: resolvedBodyFontSize,
+                        lineHeight: 1.35,
+                        borderRight: '1px solid rgba(224,224,224,1)',
+                    },
+                    ...(colSx ? [colSx] : []),
+                ],
+            };
         },
         muiToolbarAlertBannerProps: isError
             ? { color: 'error', children: 'Failed to load data. Please try again.' }
             : undefined,
-        renderTopToolbarCustomActions: () => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, pr: 1, gap: 0.5 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Clear filters & refresh", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: () => { handleClearAll(); refetch(); }, disabled: isFetching, children: jsx(RefreshIcon, { fontSize: "small" }) }) }) }), jsx(Tooltip, { title: "Export batch as CSV", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, children: jsx(FileDownloadIcon, { fontSize: "small" }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: maxVisibleFilters }) })] })),
-        renderBottomToolbar: ({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions })),
+        renderTopToolbarCustomActions: () => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, pr: 1, gap: 0.5 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Clear filters & refresh", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: () => { handleClearAll(); refetch(); }, disabled: isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(RefreshIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) }), jsx(Tooltip, { title: "Export batch as CSV", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(FileDownloadIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: maxVisibleFilters, uiDensity: uiDensity, filterChipFontSize: densityTokens.filterChipFontSize, filterChipMinHeight: densityTokens.filterChipMinHeight, filterLabelFontSize: densityTokens.filterLabelFontSize }) })] })),
+        renderBottomToolbar: ({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions, density: densityTokens })),
     });
     return (jsxs(Box, { ref: containerRef, className: "tp-gpg-root", sx: {
             position: 'relative',
             height: resolvedHeight,
+            minHeight: tableMinHeight,
+            maxHeight: tableMaxHeight,
             display: 'flex',
             flexDirection: 'column',
+            overflow: 'hidden',
         }, children: [jsx(GlobalStyles, { styles: {
                     'button[aria-label="Pin to right"]': { display: 'none' },
                     '.tp-gpg-root .MuiTableSortLabel-icon': { display: 'none !important' },
                     '.tp-gpg-root button[aria-label="Move"]': { display: 'none !important' },
-                } }), isLoading && jsx(OverlayLoader, { message: "Loading data\u2026" }), !isLoading && isFetching && jsx(OverlayLoader, { message: "Updating data\u2026" }), jsx(MaterialReactTable, { table: table })] }));
+                    '.tp-gpg-root [data-column-id="mrt-row-spacer"]': { display: 'none !important' },
+                    '.tp-gpg-root .Mui-TableHeadCell-ColumnSpacer': { display: 'none !important' },
+                    ...tableStyleOverrides,
+                } }), isLoading && jsx(OverlayLoader, { message: "Loading data\u2026" }), !isLoading && isFetching && jsx(OverlayLoader, { message: "Updating data\u2026" }), jsx(Box, { sx: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: jsx(MaterialReactTable, { table: table }) })] }));
 }
 
 export { GenericPaginatedGrid as default };

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

@@ -1,4 +1,5 @@
 export { default as GenericPaginatedGrid } from './GenericPaginatedGrid';
-export type { GenericPaginatedGridProps, PagedResult } from './GenericPaginatedGrid';
+export type { GenericPaginatedGridProps, PagedResult, GridUiDensity, GridUiDensityOptions, } from './GenericPaginatedGrid';
 export { default as DynamicFilterBar } from './DynamicFilterBar';
 export type { ServerFilterDef } from './DynamicFilterBar';
+export type { TPColumnDef, ColumnFilterType } from './types';

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

@@ -0,0 +1,33 @@
+/**
+ * Mock data + fetch adapters for Storybook sample grids (no API required).
+ */
+import type { TPColumnDef } from './types';
+import type { PagedResult } from './GenericPaginatedGrid';
+import type { ServerFilterDef } from './DynamicFilterBar';
+export interface EmployeeRow {
+    id: number;
+    name: string;
+    department: string;
+    costCenter: string;
+    workLocation: string;
+    reportingManager: string;
+    employmentType: string;
+    status: string;
+    joinedOn: string;
+}
+/** Columns with long headers + narrow widths to exercise header wrapping in Storybook. */
+export declare const employeeColumns: TPColumnDef<EmployeeRow>[];
+export declare const employeeFilterDefs: ServerFilterDef[];
+export declare const employeeDefaultFilters: Record<string, string>;
+export declare function fetchEmployeePage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<EmployeeRow>>;
+export interface ProductRow {
+    sku: string;
+    title: string;
+    category: string;
+    price: number;
+    inStock: boolean;
+}
+export declare const productColumns: TPColumnDef<ProductRow>[];
+export declare const productFilterDefs: ServerFilterDef[];
+export declare const productDefaultFilters: Record<string, string>;
+export declare function fetchProductPage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<ProductRow>>;

package/dist/index.d.ts

@@ -15,3 +15,4 @@ export * as Theme from './theme';
 export type { FormRenderProps } from './utils';
 export type { FormRenderWrapperProps } from './components/Form/FormRenderWrapper';
 export type { FormSectionPropsItem, VariantProps } from './utils';
+export type { GenericPaginatedGridProps, GridUiDensity, GridUiDensityOptions, PagedResult, ServerFilterDef, TPColumnDef, } from './components/PaginatedGrid';

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.esm4.js';
 import React__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/DefinedRange/index.esm.js

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

package/package.json

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