@alaarab/ogrid-material 1.0.0

package/README.md

@@ -0,0 +1,59 @@
+# @alaarab/ogrid-material
+
+[OGrid](https://github.com/alaarab/ogrid) data table for [Material UI](https://mui.com/), powered by [MUI X DataGrid](https://mui.com/x/react-data-grid/). Sort, filter (text, multi-select, people), paginate, show/hide columns, and export to CSV. Use an in-memory array or plug in your own API.
+
+## Install
+
+```bash
+npm install @alaarab/ogrid-material
+```
+
+### Peer Dependencies
+
+```
+@mui/material ^6.0.0
+@mui/icons-material ^6.0.0
+@mui/x-data-grid ^7.0.0
+@emotion/react ^11.0.0
+@emotion/styled ^11.0.0
+react ^17.0.0 || ^18.0.0
+react-dom ^17.0.0 || ^18.0.0
+```
+
+## Quick Start
+
+```tsx
+import { OGrid, type IColumnDef } from '@alaarab/ogrid-material';
+
+const columns: IColumnDef<Product>[] = [
+  { columnId: 'name', name: 'Name', sortable: true, filterable: { type: 'text' }, renderCell: (item) => <span>{item.name}</span> },
+  { columnId: 'category', name: 'Category', sortable: true, filterable: { type: 'multiSelect', filterField: 'category' }, renderCell: (item) => <span>{item.category}</span> },
+];
+
+<OGrid<Product>
+  data={products}
+  columns={columns}
+  getRowId={(r) => r.id}
+  entityLabelPlural="products"
+/>
+```
+
+## Components
+
+- **`OGrid<T>`** -- Full table with column chooser, filters, and pagination (Material UI implementation)
+- **`DataGridTable<T>`** -- Lower-level grid for custom state management
+- **`ColumnChooser`** -- Column visibility dropdown
+- **`PaginationControls`** -- Pagination UI
+- **`ColumnHeaderFilter`** -- Column header with sort/filter (used internally)
+
+All core types, hooks, and utilities are re-exported from `@alaarab/ogrid-core` for convenience.
+
+## Storybook
+
+```bash
+npm run storybook   # port 6007
+```
+
+## License
+
+MIT

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Button, Popover, Checkbox, Box, Typography, FormControlLabel, } from '@mui/material';
+import { ViewColumn as ViewColumnIcon, ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon, } from '@mui/icons-material';
+export const ColumnChooser = (props) => {
+    const { columns, visibleColumns, onVisibilityChange, className } = props;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const buttonRef = useRef(null);
+    const isOpen = Boolean(anchorEl);
+    const handleToggle = useCallback((e) => {
+        setAnchorEl(anchorEl ? null : e.currentTarget);
+    }, [anchorEl]);
+    const handleClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                setAnchorEl(null);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }, [isOpen]);
+    const handleCheckboxChange = useCallback((columnKey) => {
+        return (ev) => {
+            ev.stopPropagation();
+            onVisibilityChange(columnKey, ev.target.checked);
+        };
+    }, [onVisibilityChange]);
+    const handleSelectAll = useCallback(() => {
+        columns.forEach((col) => {
+            if (!visibleColumns.has(col.columnId)) {
+                onVisibilityChange(col.columnId, true);
+            }
+        });
+    }, [columns, visibleColumns, onVisibilityChange]);
+    const handleClearAll = useCallback(() => {
+        columns.forEach((col) => {
+            if (!col.required && visibleColumns.has(col.columnId)) {
+                onVisibilityChange(col.columnId, false);
+            }
+        });
+    }, [columns, visibleColumns, onVisibilityChange]);
+    const visibleCount = visibleColumns.size;
+    const totalCount = columns.length;
+    return (_jsxs(Box, { className: className, sx: { display: 'inline-flex' }, children: [_jsxs(Button, { ref: buttonRef, variant: "outlined", size: "small", startIcon: _jsx(ViewColumnIcon, {}), endIcon: isOpen ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}), onClick: handleToggle, "aria-expanded": isOpen, "aria-haspopup": "listbox", sx: {
+                    textTransform: 'none',
+                    fontWeight: 600,
+                    borderColor: isOpen ? 'primary.main' : 'divider',
+                }, children: ["Column Visibility (", visibleCount, " of ", totalCount, ")"] }), _jsxs(Popover, { open: isOpen, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, slotProps: {
+                    paper: {
+                        sx: { mt: 0.5, minWidth: 220 },
+                    },
+                }, children: [_jsx(Box, { sx: {
+                            px: 1.5,
+                            py: 1,
+                            borderBottom: 1,
+                            borderColor: 'divider',
+                            bgcolor: 'grey.50',
+                        }, children: _jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }) }), _jsx(Box, { sx: { maxHeight: 320, overflowY: 'auto', py: 0.5 }, children: columns.map((column) => (_jsx(Box, { sx: { px: 1.5, minHeight: 32, display: 'flex', alignItems: 'center' }, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: visibleColumns.has(column.columnId), onChange: handleCheckboxChange(column.columnId) }), label: _jsx(Typography, { variant: "body2", children: column.name }), sx: { m: 0 } }) }, column.columnId))) }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: 1,
+                            px: 1.5,
+                            py: 1,
+                            borderTop: 1,
+                            borderColor: 'divider',
+                            bgcolor: 'grey.50',
+                        }, children: [_jsx(Button, { size: "small", onClick: handleClearAll, sx: { textTransform: 'none' }, children: "Clear All" }), _jsx(Button, { size: "small", variant: "contained", onClick: handleSelectAll, sx: { textTransform: 'none' }, children: "Select All" })] })] })] }));
+};

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { TextField, Checkbox, Avatar, Popover, CircularProgress, Tooltip, IconButton, Box, Typography, Button, InputAdornment, FormControlLabel, } from '@mui/material';
+import { Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, ArrowDownward as ArrowDownwardIcon, SwapVert as SwapVertIcon, FilterList as FilterListIcon, Clear as ClearIcon, } from '@mui/icons-material';
+const SEARCH_DEBOUNCE_MS = 150;
+const EMPTY_ARRAY = [];
+export const ColumnHeaderFilter = React.memo((props) => {
+    const { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, selectedValues, onFilterChange, options, isLoadingOptions = false, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, } = props;
+    const safeSelectedValues = selectedValues ?? EMPTY_ARRAY;
+    const safeOptions = options ?? EMPTY_ARRAY;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [tempSelected, setTempSelected] = useState(new Set(safeSelectedValues));
+    const [tempTextValue, setTempTextValue] = useState(textValue);
+    const [searchText, setSearchText] = useState('');
+    const [debouncedSearchText, setDebouncedSearchText] = useState('');
+    const [peopleSuggestions, setPeopleSuggestions] = useState([]);
+    const [isPeopleLoading, setIsPeopleLoading] = useState(false);
+    const [peopleSearchText, setPeopleSearchText] = useState('');
+    const searchDebounceRef = useRef();
+    const peopleSearchTimeoutRef = useRef(undefined);
+    const peopleInputRef = useRef(null);
+    const isFilterOpen = Boolean(anchorEl);
+    useEffect(() => {
+        if (isFilterOpen) {
+            setTempSelected(new Set(safeSelectedValues));
+            setTempTextValue(textValue);
+            setSearchText('');
+            setDebouncedSearchText('');
+            setPeopleSearchText('');
+            setPeopleSuggestions([]);
+            if (filterType === 'people') {
+                setTimeout(() => {
+                    peopleInputRef.current?.focus();
+                }, 50);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFilterOpen]);
+    useEffect(() => {
+        if (searchDebounceRef.current) {
+            clearTimeout(searchDebounceRef.current);
+        }
+        searchDebounceRef.current = setTimeout(() => {
+            setDebouncedSearchText(searchText);
+        }, SEARCH_DEBOUNCE_MS);
+        return () => {
+            if (searchDebounceRef.current) {
+                clearTimeout(searchDebounceRef.current);
+            }
+        };
+    }, [searchText]);
+    const filteredOptions = useMemo(() => {
+        if (!debouncedSearchText.trim()) {
+            return safeOptions;
+        }
+        const searchLower = debouncedSearchText.toLowerCase().trim();
+        return safeOptions.filter((opt) => opt.toLowerCase().includes(searchLower));
+    }, [safeOptions, debouncedSearchText]);
+    useEffect(() => {
+        if (!peopleSearch || !isFilterOpen || filterType !== 'people')
+            return;
+        if (peopleSearchTimeoutRef.current) {
+            window.clearTimeout(peopleSearchTimeoutRef.current);
+        }
+        if (!peopleSearchText.trim()) {
+            setPeopleSuggestions([]);
+            return;
+        }
+        setIsPeopleLoading(true);
+        peopleSearchTimeoutRef.current = window.setTimeout(async () => {
+            try {
+                const results = await peopleSearch(peopleSearchText);
+                setPeopleSuggestions(results.slice(0, 10));
+            }
+            catch (error) {
+                console.error('Error searching people:', error);
+                setPeopleSuggestions([]);
+            }
+            finally {
+                setIsPeopleLoading(false);
+            }
+        }, 300);
+        return () => {
+            if (peopleSearchTimeoutRef.current) {
+                window.clearTimeout(peopleSearchTimeoutRef.current);
+            }
+        };
+    }, [peopleSearchText, peopleSearch, isFilterOpen, filterType]);
+    const handleFilterIconClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setAnchorEl(anchorEl ? null : e.currentTarget);
+    }, [anchorEl]);
+    const handlePopoverClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const handleSortClick = useCallback((e) => {
+        e.stopPropagation();
+        if (onSort) {
+            onSort();
+        }
+    }, [onSort]);
+    const handleCheckboxChange = useCallback((option, checked) => {
+        setTempSelected((prev) => {
+            const newSet = new Set(prev);
+            if (checked) {
+                newSet.add(option);
+            }
+            else {
+                newSet.delete(option);
+            }
+            return newSet;
+        });
+    }, []);
+    const handleSelectAll = useCallback(() => {
+        setTempSelected(new Set(filteredOptions));
+    }, [filteredOptions]);
+    const handleClearSelection = useCallback(() => {
+        setTempSelected(new Set());
+    }, []);
+    const handleApplyMultiSelect = useCallback(() => {
+        if (onFilterChange) {
+            onFilterChange(Array.from(tempSelected));
+        }
+        setAnchorEl(null);
+    }, [onFilterChange, tempSelected]);
+    const handleTextApply = useCallback(() => {
+        if (onTextChange) {
+            onTextChange(tempTextValue.trim());
+        }
+        setAnchorEl(null);
+    }, [onTextChange, tempTextValue]);
+    const handleTextClear = useCallback(() => {
+        setTempTextValue('');
+    }, []);
+    const handleTextKeyDown = useCallback((event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            handleTextApply();
+        }
+    }, [handleTextApply]);
+    const handleUserSelect = useCallback((user) => {
+        if (onUserChange) {
+            onUserChange(user);
+        }
+        setAnchorEl(null);
+    }, [onUserChange]);
+    const handleClearUser = useCallback(() => {
+        if (onUserChange) {
+            onUserChange(undefined);
+        }
+        setAnchorEl(null);
+    }, [onUserChange]);
+    const hasActiveFilter = useMemo(() => {
+        if (filterType === 'multiSelect') {
+            return safeSelectedValues.length > 0;
+        }
+        if (filterType === 'text') {
+            return !!textValue.trim();
+        }
+        if (filterType === 'people') {
+            return !!selectedUser;
+        }
+        return false;
+    }, [filterType, safeSelectedValues, textValue, selectedUser]);
+    const renderPopoverContent = () => {
+        if (filterType === 'multiSelect') {
+            return (_jsxs(Box, { sx: { width: 280 }, children: [_jsxs(Box, { sx: { p: 1.5, pb: 0.5 }, children: [_jsx(TextField, { placeholder: "Search...", value: searchText, onChange: (e) => setSearchText(e.target.value), onKeyDown: (e) => e.stopPropagation(), autoComplete: "off", size: "small", fullWidth: true, slotProps: {
+                                    input: {
+                                        startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
+                                    },
+                                } }), _jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: 'block' }, children: [filteredOptions.length, " of ", safeOptions.length, " options"] })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', px: 1.5, py: 0.5 }, children: [_jsxs(Button, { size: "small", onClick: handleSelectAll, children: ["Select All (", filteredOptions.length, ")"] }), _jsx(Button, { size: "small", onClick: handleClearSelection, children: "Clear" })] }), _jsx(Box, { sx: { maxHeight: 240, overflowY: 'auto', px: 0.5 }, children: isLoadingOptions ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 2 }, children: _jsx(CircularProgress, { size: 24 }) })) : filteredOptions.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: 'center' }, children: "No options found" })) : (filteredOptions.map((option) => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: tempSelected.has(option), onChange: (e) => handleCheckboxChange(option, e.target.checked) }), label: _jsx(Typography, { variant: "body2", children: option }), sx: { display: 'flex', mx: 0, '& .MuiFormControlLabel-label': { flex: 1, minWidth: 0 } } }, option)))) }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: 1,
+                            p: 1.5,
+                            pt: 1,
+                            borderTop: 1,
+                            borderColor: 'divider',
+                        }, children: [_jsx(Button, { size: "small", onClick: handleClearSelection, children: "Clear" }), _jsx(Button, { size: "small", variant: "contained", onClick: handleApplyMultiSelect, children: "Apply" })] })] }));
+        }
+        if (filterType === 'text') {
+            return (_jsxs(Box, { sx: { width: 260 }, children: [_jsx(Box, { sx: { p: 1.5 }, children: _jsx(TextField, { placeholder: "Enter search term...", value: tempTextValue, onChange: (e) => setTempTextValue(e.target.value), onKeyDown: (e) => {
+                                e.stopPropagation();
+                                handleTextKeyDown(e);
+                            }, autoComplete: "off", size: "small", fullWidth: true, slotProps: {
+                                input: {
+                                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
+                                },
+                            } }) }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: 1,
+                            p: 1.5,
+                            pt: 0,
+                        }, children: [_jsx(Button, { size: "small", disabled: !tempTextValue, onClick: handleTextClear, children: "Clear" }), _jsx(Button, { size: "small", variant: "contained", onClick: handleTextApply, children: "Apply" })] })] }));
+        }
+        if (filterType === 'people') {
+            return (_jsxs(Box, { sx: { width: 300 }, children: [selectedUser && (_jsxs(Box, { sx: { p: 1.5, pb: 1, borderBottom: 1, borderColor: 'divider' }, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: "Currently filtered by:" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }, children: [_jsx(Avatar, { src: selectedUser.photo, alt: selectedUser.displayName, sx: { width: 32, height: 32 }, children: selectedUser.displayName?.[0] }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Typography, { variant: "body2", noWrap: true, children: selectedUser.displayName }), _jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: selectedUser.email })] }), _jsx(IconButton, { size: "small", onClick: handleClearUser, "aria-label": "Remove filter", children: _jsx(ClearIcon, { fontSize: "small" }) })] })] })), _jsx(Box, { sx: { p: 1.5, pb: 0.5 }, children: _jsx(TextField, { inputRef: peopleInputRef, placeholder: "Search for a person...", value: peopleSearchText, onChange: (e) => setPeopleSearchText(e.target.value), onKeyDown: (e) => e.stopPropagation(), autoComplete: "off", size: "small", fullWidth: true, slotProps: {
+                                input: {
+                                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
+                                },
+                            } }) }), _jsx(Box, { sx: { maxHeight: 240, overflowY: 'auto' }, children: isPeopleLoading && peopleSearchText.trim() ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 2 }, children: _jsx(CircularProgress, { size: 24 }) })) : peopleSuggestions.length === 0 && peopleSearchText.trim() ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: 'center' }, children: "No results found" })) : peopleSearchText.trim() ? (peopleSuggestions.map((user) => (_jsxs(Box, { onClick: () => handleUserSelect(user), sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 1,
+                                px: 1.5,
+                                py: 1,
+                                cursor: 'pointer',
+                                '&:hover': { bgcolor: 'action.hover' },
+                            }, children: [_jsx(Avatar, { src: user.photo, alt: user.displayName, sx: { width: 32, height: 32 }, children: user.displayName?.[0] }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Typography, { variant: "body2", noWrap: true, children: user.displayName }), _jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: user.email })] })] }, user.id || user.email || user.displayName)))) : (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: 'center' }, children: "Type to search..." })) }), selectedUser && (_jsx(Box, { sx: { p: 1.5, pt: 1, borderTop: 1, borderColor: 'divider' }, children: _jsx(Button, { size: "small", fullWidth: true, onClick: handleClearUser, children: "Clear Filter" }) }))] }));
+        }
+        return null;
+    };
+    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', width: '100%', minWidth: 0 }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0, overflow: 'hidden' }, children: _jsx(Tooltip, { title: columnName, arrow: true, children: _jsx(Typography, { variant: "body2", fontWeight: 600, noWrap: true, "data-header-label": true, sx: { lineHeight: 1.4 }, children: columnName }) }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', ml: 0.5, flexShrink: 0 }, children: [onSort && (_jsx(IconButton, { size: "small", onClick: handleSortClick, "aria-label": `Sort by ${columnName}`, title: isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort', color: isSorted ? 'primary' : 'default', sx: { p: 0.25 }, children: isSorted ? (isSortedDescending ? (_jsx(ArrowDownwardIcon, { sx: { fontSize: 16 } })) : (_jsx(ArrowUpwardIcon, { sx: { fontSize: 16 } }))) : (_jsx(SwapVertIcon, { sx: { fontSize: 16 } })) })), filterType !== 'none' && (_jsxs(IconButton, { size: "small", onClick: handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, color: hasActiveFilter || isFilterOpen ? 'primary' : 'default', sx: { p: 0.25, position: 'relative' }, children: [_jsx(FilterListIcon, { sx: { fontSize: 16 } }), hasActiveFilter && (_jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    top: 2,
+                                    right: 2,
+                                    width: 6,
+                                    height: 6,
+                                    borderRadius: '50%',
+                                    bgcolor: 'primary.main',
+                                } }))] }))] }), _jsxs(Popover, { open: isFilterOpen, anchorEl: anchorEl, onClose: handlePopoverClose, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: {
+                    paper: {
+                        sx: { mt: 0.5, overflow: 'visible' },
+                        onClick: (e) => e.stopPropagation(),
+                    },
+                }, children: [_jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider', px: 1.5, py: 1 }, children: _jsxs(Typography, { variant: "subtitle2", children: ["Filter: ", columnName] }) }), renderPopoverContent()] })] }));
+});
+ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';

package/dist/esm/ColumnHeaderFilter/index.js

@@ -0,0 +1 @@
+export { ColumnHeaderFilter } from './ColumnHeaderFilter';

package/dist/esm/DataGridTable/DataGridTable.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useRef, useEffect, useState } from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { Box, CircularProgress, Typography, Button } from '@mui/material';
+import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
+export function DataGridTable(props) {
+    const { items, columns, getRowId, sortBy, sortDirection, onColumnSort, visibleColumns, isLoading = false, loadingMessage = 'Loading\u2026', multiSelectFilters, onMultiSelectFilterChange, textFilters = {}, onTextFilterChange, peopleFilters = {}, onPeopleFilterChange, filterOptions, loadingFilterOptions, peopleSearch, getUserByEmail, emptyState, layoutMode = 'content', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    const wrapperRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    useEffect(() => {
+        const el = wrapperRef.current;
+        if (!el)
+            return;
+        const measure = () => {
+            const rect = el.getBoundingClientRect();
+            setContainerWidth(Math.max(0, rect.width));
+        };
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        measure();
+        return () => ro.disconnect();
+    }, []);
+    const visibleCols = useMemo(() => {
+        return visibleColumns ? columns.filter((c) => visibleColumns.has(c.columnId)) : columns;
+    }, [columns, visibleColumns]);
+    const minTableWidth = useMemo(() => {
+        return visibleCols.reduce((sum, c) => sum + (c.minWidth ?? 80), 0);
+    }, [visibleCols]);
+    const createHeaderWithFilter = useCallback((col) => {
+        const filterable = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
+        const filterType = filterable?.type ?? 'none';
+        const filterField = filterable?.filterField ?? col.columnId;
+        const sortable = col.sortable !== false;
+        if (filterType === 'text') {
+            return (_jsx(ColumnHeaderFilter, { columnKey: col.columnId, columnName: col.name, filterType: "text", isSorted: sortBy === col.columnId, isSortedDescending: sortBy === col.columnId && sortDirection === 'desc', onSort: sortable ? () => onColumnSort(col.columnId) : undefined, textValue: textFilters[filterField] ?? '', onTextChange: onTextFilterChange ? (v) => onTextFilterChange(filterField, v) : undefined }));
+        }
+        if (filterType === 'people') {
+            return (_jsx(ColumnHeaderFilter, { columnKey: col.columnId, columnName: col.name, filterType: "people", isSorted: sortBy === col.columnId, isSortedDescending: sortBy === col.columnId && sortDirection === 'desc', onSort: sortable ? () => onColumnSort(col.columnId) : undefined, selectedUser: peopleFilters[filterField], onUserChange: onPeopleFilterChange ? (u) => onPeopleFilterChange(filterField, u) : undefined, peopleSearch: peopleSearch }));
+        }
+        if (filterType === 'multiSelect') {
+            return (_jsx(ColumnHeaderFilter, { columnKey: col.columnId, columnName: col.name, filterType: "multiSelect", isSorted: sortBy === col.columnId, isSortedDescending: sortBy === col.columnId && sortDirection === 'desc', onSort: sortable ? () => onColumnSort(col.columnId) : undefined, options: filterOptions[filterField] ?? [], isLoadingOptions: loadingFilterOptions[filterField] ?? false, selectedValues: multiSelectFilters[filterField] ?? [], onFilterChange: (values) => onMultiSelectFilterChange(filterField, values) }));
+        }
+        return (_jsx(ColumnHeaderFilter, { columnKey: col.columnId, columnName: col.name, filterType: "none", isSorted: sortBy === col.columnId, isSortedDescending: sortBy === col.columnId && sortDirection === 'desc', onSort: sortable ? () => onColumnSort(col.columnId) : undefined }));
+    }, [
+        sortBy,
+        sortDirection,
+        onColumnSort,
+        textFilters,
+        onTextFilterChange,
+        peopleFilters,
+        onPeopleFilterChange,
+        peopleSearch,
+        getUserByEmail,
+        filterOptions,
+        loadingFilterOptions,
+        multiSelectFilters,
+        onMultiSelectFilterChange,
+    ]);
+    const muiColumns = useMemo(() => {
+        return visibleCols.map((col) => {
+            const gridCol = {
+                field: col.columnId,
+                headerName: col.name,
+                minWidth: col.minWidth ?? 80,
+                width: col.idealWidth ?? col.defaultWidth ?? 120,
+                flex: layoutMode === 'fill' ? 1 : undefined,
+                sortable: false,
+                filterable: false,
+                disableColumnMenu: true,
+                renderHeader: () => createHeaderWithFilter(col),
+                renderCell: col.renderCell
+                    ? (params) => col.renderCell(params.row)
+                    : undefined,
+            };
+            return gridCol;
+        });
+    }, [visibleCols, createHeaderWithFilter, layoutMode]);
+    const rows = useMemo(() => {
+        return items.map((item) => ({
+            ...item,
+            id: getRowId(item),
+        }));
+    }, [items, getRowId]);
+    const showEmptyState = items.length === 0 && emptyState;
+    const allowOverflowX = containerWidth > 0 && minTableWidth > containerWidth;
+    const NoRowsOverlay = useCallback(() => {
+        if (!emptyState)
+            return null;
+        if (emptyState.render) {
+            return _jsx(Box, { sx: { py: 4 }, children: emptyState.render() });
+        }
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                py: 6,
+                px: 2,
+            }, children: [_jsx(Typography, { variant: "h2", sx: { mb: 1 }, "aria-hidden": true, children: "\uD83D\uDCCB" }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "No results found" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { textAlign: 'center' }, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx(Button, { variant: "text", size: "small", onClick: emptyState.onClearAll, sx: { textTransform: 'none', p: 0, minWidth: 'auto', verticalAlign: 'baseline' }, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] }));
+    }, [emptyState]);
+    const LoadingOverlay = useCallback(() => (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            gap: 1,
+        }, children: [_jsx(CircularProgress, { size: 20 }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: loadingMessage })] })), [loadingMessage]);
+    return (_jsx(Box, { ref: wrapperRef, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, sx: {
+            width: '100%',
+            overflowX: allowOverflowX ? 'auto' : 'hidden',
+        }, children: _jsx(Box, { sx: {
+                minWidth: allowOverflowX ? minTableWidth : undefined,
+                '& .MuiDataGrid-root': {
+                    border: 1,
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                },
+                '& .MuiDataGrid-columnHeader': {
+                    '&:focus, &:focus-within': {
+                        outline: 'none',
+                    },
+                },
+                '& .MuiDataGrid-cell': {
+                    '&:focus, &:focus-within': {
+                        outline: 'none',
+                    },
+                },
+            }, children: _jsx(DataGrid, { rows: rows, columns: muiColumns, loading: isLoading, autoHeight: !showEmptyState || items.length > 0, disableColumnMenu: true, disableColumnFilter: true, disableColumnSorting: true, disableRowSelectionOnClick: true, hideFooter: true, slots: {
+                    noRowsOverlay: NoRowsOverlay,
+                    loadingOverlay: LoadingOverlay,
+                }, sx: {
+                    '& .MuiDataGrid-overlayWrapper': {
+                        minHeight: showEmptyState ? 200 : undefined,
+                    },
+                }, getRowId: (row) => row.id, "aria-label": ariaLabel }) }) }));
+}

package/dist/esm/MaterialDataTable/MaterialDataTable.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
+import { Box } from '@mui/material';
+import { DataGridTable } from '../DataGridTable/DataGridTable';
+import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
+import { PaginationControls } from '../PaginationControls/PaginationControls';
+import { useFilterOptions, toDataGridFilterProps, } from '@alaarab/ogrid-core';
+const DEFAULT_PAGE_SIZE = 20;
+function getFilterField(col) {
+    const f = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
+    return (f?.filterField ?? col.columnId);
+}
+function getRowValue(item, key) {
+    return item[key];
+}
+/** Merge a single filter change into a full IFilters object. */
+function mergeFilter(prev, key, value) {
+    const next = { ...prev };
+    const isEmpty = value === undefined ||
+        (Array.isArray(value) && value.length === 0) ||
+        (typeof value === 'string' && value.trim() === '');
+    const isPlainObjectWithoutEmail = typeof value === 'object' && value !== null && !Array.isArray(value) && !('email' in value);
+    if (isEmpty || isPlainObjectWithoutEmail) {
+        delete next[key];
+    }
+    else {
+        next[key] = value;
+    }
+    return next;
+}
+/** Derive filter options for multiSelect columns from client-side data. */
+function deriveFilterOptionsFromData(items, columns) {
+    const out = {};
+    columns.forEach((col) => {
+        const f = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
+        if (f?.type !== 'multiSelect')
+            return;
+        const field = getFilterField(col);
+        const values = new Set();
+        items.forEach((item) => {
+            const v = getRowValue(item, col.columnId);
+            if (v != null && v !== '')
+                values.add(String(v));
+        });
+        out[field] = Array.from(values).sort();
+    });
+    return out;
+}
+/** Get list of filter fields that use multiSelect (for useFilterOptions). */
+function getMultiSelectFilterFields(columns) {
+    const fields = [];
+    columns.forEach((col) => {
+        const f = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
+        if (f?.type === 'multiSelect')
+            fields.push(getFilterField(col));
+    });
+    return fields;
+}
+export function OGrid(props) {
+    const { columns, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, emptyState, entityLabelPlural = 'items', className, title, layoutMode = 'content', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    const isServerSide = dataSource != null;
+    const isClientSide = data != null;
+    if (!isServerSide && !isClientSide) {
+        throw new Error('MaterialDataTable requires either data (client-side) or dataSource (server-side).');
+    }
+    if (isServerSide && isClientSide) {
+        throw new Error('MaterialDataTable: pass either data or dataSource, not both.');
+    }
+    const defaultSortField = defaultSortBy ?? columns[0]?.columnId;
+    const [internalPage, setInternalPage] = useState(1);
+    const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+    const [internalSort, setInternalSort] = useState({
+        field: defaultSortField,
+        direction: defaultSortDirection,
+    });
+    const [internalFilters, setInternalFilters] = useState({});
+    const [internalVisibleColumns, setInternalVisibleColumns] = useState(() => {
+        const visible = columns.filter((c) => c.defaultVisible !== false).map((c) => c.columnId);
+        return new Set(visible.length > 0 ? visible : columns.map((c) => c.columnId));
+    });
+    const page = controlledPage ?? internalPage;
+    const pageSize = controlledPageSize ?? internalPageSize;
+    const sort = controlledSort ?? internalSort;
+    const filters = controlledFilters ?? internalFilters;
+    const visibleColumns = controlledVisibleColumns ?? internalVisibleColumns;
+    const setPage = useCallback((p) => {
+        if (controlledPage === undefined)
+            setInternalPage(p);
+        onPageChange?.(p);
+    }, [controlledPage, onPageChange]);
+    const setPageSize = useCallback((size) => {
+        if (controlledPageSize === undefined)
+            setInternalPageSize(size);
+        onPageSizeChange?.(size);
+        setPage(1);
+    }, [controlledPageSize, onPageSizeChange, setPage]);
+    const setSort = useCallback((s) => {
+        if (controlledSort === undefined)
+            setInternalSort(s);
+        onSortChange?.(s);
+        setPage(1);
+    }, [controlledSort, onSortChange, setPage]);
+    const setFilters = useCallback((f) => {
+        if (controlledFilters === undefined)
+            setInternalFilters(f);
+        onFiltersChange?.(f);
+        setPage(1);
+    }, [controlledFilters, onFiltersChange, setPage]);
+    const setVisibleColumns = useCallback((cols) => {
+        if (controlledVisibleColumns === undefined)
+            setInternalVisibleColumns(cols);
+        onVisibleColumnsChange?.(cols);
+    }, [controlledVisibleColumns, onVisibleColumnsChange]);
+    const { multiSelectFilters, textFilters, peopleFilters } = useMemo(() => toDataGridFilterProps(filters), [filters]);
+    const handleSort = useCallback((columnKey) => {
+        setSort({
+            field: columnKey,
+            direction: sort.field === columnKey && sort.direction === 'asc' ? 'desc' : 'asc',
+        });
+    }, [sort, setSort]);
+    const handleMultiSelectFilterChange = useCallback((key, values) => {
+        setFilters(mergeFilter(filters, key, values.length ? values : undefined));
+    }, [filters, setFilters]);
+    const handleTextFilterChange = useCallback((key, value) => {
+        setFilters(mergeFilter(filters, key, value.trim() || undefined));
+    }, [filters, setFilters]);
+    const handlePeopleFilterChange = useCallback((key, user) => {
+        setFilters(mergeFilter(filters, key, user ?? undefined));
+    }, [filters, setFilters]);
+    const handleVisibilityChange = useCallback((columnKey, isVisible) => {
+        const next = new Set(visibleColumns);
+        if (isVisible)
+            next.add(columnKey);
+        else
+            next.delete(columnKey);
+        setVisibleColumns(next);
+    }, [visibleColumns, setVisibleColumns]);
+    const multiSelectFilterFields = useMemo(() => getMultiSelectFilterFields(columns), [columns]);
+    const filterOptionsSource = useMemo(() => dataSource ?? { fetchFilterOptions: undefined }, [dataSource]);
+    const { filterOptions: serverFilterOptions, loadingOptions: loadingFilterOptions } = useFilterOptions(filterOptionsSource, multiSelectFilterFields);
+    const clientFilterOptions = useMemo(() => {
+        if (dataSource != null && dataSource.fetchFilterOptions)
+            return serverFilterOptions;
+        return deriveFilterOptionsFromData(data ?? [], columns);
+    }, [dataSource, data, columns, serverFilterOptions]);
+    const clientItemsAndTotal = useMemo(() => {
+        if (!isClientSide || data == null)
+            return null;
+        let rows = data.slice();
+        columns.forEach((col) => {
+            const filterKey = getFilterField(col);
+            const f = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
+            const type = f?.type;
+            const val = filters[filterKey];
+            if (type === 'multiSelect' && Array.isArray(val) && val.length > 0) {
+                rows = rows.filter((r) => val.includes(String(getRowValue(r, col.columnId))));
+            }
+            else if (type === 'text' && typeof val === 'string' && val.trim()) {
+                const lower = val.trim().toLowerCase();
+                rows = rows.filter((r) => String(getRowValue(r, col.columnId) ?? '')
+                    .toLowerCase()
+                    .includes(lower));
+            }
+            else if (type === 'people' && val && typeof val === 'object' && 'email' in val) {
+                const email = val.email.toLowerCase();
+                rows = rows.filter((r) => String(getRowValue(r, col.columnId) ?? '').toLowerCase() === email);
+            }
+        });
+        if (sort.field) {
+            const col = columns.find((c) => c.columnId === sort.field);
+            const compare = col?.compare;
+            const dir = sort.direction === 'asc' ? 1 : -1;
+            rows.sort((a, b) => {
+                if (compare)
+                    return compare(a, b) * dir;
+                const av = getRowValue(a, sort.field);
+                const bv = getRowValue(b, sort.field);
+                if (av == null && bv == null)
+                    return 0;
+                if (av == null)
+                    return -1 * dir;
+                if (bv == null)
+                    return 1 * dir;
+                if (typeof av === 'number' && typeof bv === 'number')
+                    return av === bv ? 0 : av > bv ? dir : -dir;
+                const as = String(av).toLowerCase();
+                const bs = String(bv).toLowerCase();
+                return as === bs ? 0 : as > bs ? dir : -dir;
+            });
+        }
+        const total = rows.length;
+        const start = (page - 1) * pageSize;
+        const paged = rows.slice(start, start + pageSize);
+        return { items: paged, totalCount: total };
+    }, [isClientSide, data, columns, filters, sort.field, sort.direction, page, pageSize]);
+    const [serverItems, setServerItems] = useState([]);
+    const [serverTotalCount, setServerTotalCount] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const fetchIdRef = useRef(0);
+    useEffect(() => {
+        if (!isServerSide || !dataSource) {
+            if (!isServerSide)
+                setLoading(false);
+            return;
+        }
+        const id = ++fetchIdRef.current;
+        setLoading(true);
+        dataSource
+            .fetchPage({
+            page,
+            pageSize,
+            sort: { field: sort.field, direction: sort.direction },
+            filters,
+        })
+            .then((res) => {
+            if (id !== fetchIdRef.current)
+                return;
+            setServerItems(res.items);
+            setServerTotalCount(res.totalCount);
+        })
+            .catch((err) => {
+            if (id !== fetchIdRef.current)
+                return;
+            console.error('MaterialDataTable fetchPage error:', err);
+            setServerItems([]);
+            setServerTotalCount(0);
+        })
+            .finally(() => {
+            if (id === fetchIdRef.current)
+                setLoading(false);
+        });
+    }, [isServerSide, dataSource, page, pageSize, sort.field, sort.direction, filters]);
+    const displayItems = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.items : serverItems;
+    const displayTotalCount = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.totalCount : serverTotalCount;
+    const hasActiveFilters = useMemo(() => {
+        return Object.values(filters).some((v) => v !== undefined &&
+            (Array.isArray(v) ? v.length > 0 : typeof v === 'string' ? v.trim() !== '' : true));
+    }, [filters]);
+    const columnChooserColumns = useMemo(() => columns.map((c) => ({
+        columnId: c.columnId,
+        name: c.name,
+        required: c.required === true,
+    })), [columns]);
+    const dataGridProps = {
+        items: displayItems,
+        columns,
+        getRowId,
+        sortBy: sort.field,
+        sortDirection: sort.direction,
+        onColumnSort: handleSort,
+        visibleColumns,
+        isLoading: isServerSide && loading,
+        multiSelectFilters,
+        onMultiSelectFilterChange: handleMultiSelectFilterChange,
+        textFilters,
+        onTextFilterChange: handleTextFilterChange,
+        peopleFilters,
+        onPeopleFilterChange: handlePeopleFilterChange,
+        filterOptions: clientFilterOptions,
+        loadingFilterOptions: dataSource?.fetchFilterOptions ? loadingFilterOptions : {},
+        peopleSearch: dataSource?.searchPeople,
+        getUserByEmail: dataSource?.getUserByEmail,
+        layoutMode,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        emptyState: {
+            hasActiveFilters,
+            onClearAll: () => setFilters({}),
+            message: emptyState?.message,
+            render: emptyState?.render,
+        },
+    };
+    return (_jsxs(Box, { className: className, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [title != null ? _jsx(Box, { sx: { m: 0 }, children: title }) : null, toolbar, _jsx(ColumnChooser, { columns: columnChooserColumns, visibleColumns: visibleColumns, onVisibilityChange: handleVisibilityChange })] }), _jsx(DataGridTable, { ...dataGridProps }), _jsx(PaginationControls, { currentPage: page, pageSize: pageSize, totalCount: displayTotalCount, onPageChange: setPage, onPageSizeChange: (size) => {
+                    setPageSize(size);
+                    setPage(1);
+                }, entityLabelPlural: entityLabelPlural })] }));
+}
+OGrid.displayName = 'OGrid';
+/** @deprecated Use OGrid and IOGridProps. Kept for backward compatibility. */
+export const MaterialDataTable = OGrid;

package/dist/esm/MaterialDataTable/index.js

@@ -0,0 +1 @@
+export { OGrid, MaterialDataTable } from './MaterialDataTable';

package/dist/esm/PaginationControls/PaginationControls.js

@@ -0,0 +1,53 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useMemo, useCallback } from 'react';
+import { IconButton, Button, Select, MenuItem, Box, Typography, } from '@mui/material';
+import { FirstPage as FirstPageIcon, LastPage as LastPageIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, } from '@mui/icons-material';
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const MAX_PAGE_BUTTONS = 5;
+export const PaginationControls = React.memo((props) => {
+    const { currentPage, pageSize, totalCount, onPageChange, onPageSizeChange, entityLabelPlural, className, } = props;
+    const labelPlural = entityLabelPlural ?? 'items';
+    const { pageNumbers, showStartEllipsis, showEndEllipsis } = useMemo(() => {
+        const totalPages = Math.ceil(totalCount / pageSize);
+        if (totalPages <= MAX_PAGE_BUTTONS) {
+            const numbers = [];
+            for (let i = 1; i <= totalPages; i++)
+                numbers.push(i);
+            return { pageNumbers: numbers, showStartEllipsis: false, showEndEllipsis: false };
+        }
+        let start = Math.max(1, currentPage - 2);
+        let end = Math.min(totalPages, currentPage + 2);
+        if (end - start + 1 < MAX_PAGE_BUTTONS) {
+            if (start === 1)
+                end = Math.min(totalPages, start + MAX_PAGE_BUTTONS - 1);
+            else if (end === totalPages)
+                start = Math.max(1, end - MAX_PAGE_BUTTONS + 1);
+        }
+        const numbers = [];
+        for (let i = start; i <= end; i++)
+            numbers.push(i);
+        return {
+            pageNumbers: numbers,
+            showStartEllipsis: start > 1,
+            showEndEllipsis: end < totalPages,
+        };
+    }, [currentPage, pageSize, totalCount]);
+    const totalPages = Math.ceil(totalCount / pageSize);
+    const handlePageSizeChange = useCallback((event) => {
+        onPageSizeChange(Number(event.target.value));
+    }, [onPageSizeChange]);
+    if (totalCount === 0) {
+        return null;
+    }
+    const startItem = Math.max(1, (currentPage - 1) * pageSize + 1);
+    const endItem = Math.min(currentPage * pageSize, totalCount);
+    return (_jsxs(Box, { className: className, role: "navigation", "aria-label": "Pagination", sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+            gap: 2,
+            py: 1,
+        }, children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Showing ", startItem, " to ", endItem, " of ", totalCount.toLocaleString(), " ", labelPlural] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(IconButton, { size: "small", onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", children: _jsx(FirstPageIcon, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", children: _jsx(ChevronLeftIcon, { fontSize: "small" }) }), showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: () => onPageChange(1), "aria-label": "Page 1", sx: { minWidth: 32, px: 0.5 }, children: "1" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx(Button, { variant: currentPage === pageNum ? 'contained' : 'outlined', size: "small", onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, sx: { minWidth: 32, px: 0.5 }, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" }), _jsx(Button, { variant: "outlined", size: "small", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, sx: { minWidth: 32, px: 0.5 }, children: totalPages })] })), _jsx(IconButton, { size: "small", onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", children: _jsx(ChevronRightIcon, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", children: _jsx(LastPageIcon, { fontSize: "small" }) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Rows" }), _jsx(Select, { value: pageSize, onChange: handlePageSizeChange, size: "small", "aria-label": "Rows per page", sx: { minWidth: 70 }, children: PAGE_SIZE_OPTIONS.map((n) => (_jsx(MenuItem, { value: n, children: n }, n))) })] })] }));
+});

package/dist/esm/index.js

@@ -0,0 +1,10 @@
+// Components
+export { OGrid, MaterialDataTable } from './MaterialDataTable';
+export { DataGridTable } from './DataGridTable/DataGridTable';
+export { ColumnChooser } from './ColumnChooser/ColumnChooser';
+export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
+export { PaginationControls } from './PaginationControls/PaginationControls';
+// Re-export everything from core for convenience
+export { 
+// Utilities
+toUserLike, toDataGridFilterProps, useFilterOptions, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, } from '@alaarab/ogrid-core';

package/dist/types/ColumnChooser/ColumnChooser.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { IColumnDefinition } from '@alaarab/ogrid-core';
+export type { IColumnDefinition };
+export interface IColumnChooserProps {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+    className?: string;
+}
+export declare const ColumnChooser: React.FC<IColumnChooserProps>;

package/dist/types/ColumnHeaderFilter/ColumnHeaderFilter.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { UserLike, ColumnFilterType } from '@alaarab/ogrid-core';
+export interface IColumnHeaderFilterProps {
+    columnKey: string;
+    columnName: string;
+    filterType: ColumnFilterType;
+    isSorted?: boolean;
+    isSortedDescending?: boolean;
+    onSort?: () => void;
+    selectedValues?: string[];
+    onFilterChange?: (values: string[]) => void;
+    options?: string[];
+    isLoadingOptions?: boolean;
+    textValue?: string;
+    onTextChange?: (value: string) => void;
+    selectedUser?: UserLike;
+    onUserChange?: (user: UserLike | undefined) => void;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
+}
+export declare const ColumnHeaderFilter: React.FC<IColumnHeaderFilterProps>;

package/dist/types/ColumnHeaderFilter/index.d.ts

@@ -0,0 +1 @@
+export { ColumnHeaderFilter } from './ColumnHeaderFilter';

package/dist/types/DataGridTable/DataGridTable.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { IColumnDef, UserLike } from '@alaarab/ogrid-core';
+export interface IDataGridTableProps<T> {
+    items: T[];
+    columns: IColumnDef<T>[];
+    getRowId: (item: T) => string;
+    sortBy?: string;
+    sortDirection: 'asc' | 'desc';
+    onColumnSort: (columnKey: string) => void;
+    visibleColumns?: Set<string>;
+    layoutMode?: 'content' | 'fill';
+    isLoading?: boolean;
+    loadingMessage?: string;
+    multiSelectFilters: Record<string, string[]>;
+    onMultiSelectFilterChange: (key: string, values: string[]) => void;
+    textFilters?: Record<string, string>;
+    onTextFilterChange?: (key: string, value: string) => void;
+    peopleFilters?: Record<string, UserLike | undefined>;
+    onPeopleFilterChange?: (key: string, user: UserLike | undefined) => void;
+    filterOptions: Record<string, string[]>;
+    loadingFilterOptions: Record<string, boolean>;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
+    getUserByEmail?: (email: string) => Promise<UserLike | undefined>;
+    emptyState?: {
+        onClearAll: () => void;
+        hasActiveFilters: boolean;
+        message?: React.ReactNode;
+        render?: () => React.ReactNode;
+    };
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+export declare function DataGridTable<T>(props: IDataGridTableProps<T>): React.ReactElement;

package/dist/types/MaterialDataTable/MaterialDataTable.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { type IColumnDef, type IFilters, type IDataSource } from '@alaarab/ogrid-core';
+export interface IOGridProps<T> {
+    columns: IColumnDef<T>[];
+    getRowId: (item: T) => string;
+    /** Client-side: pass an array; grid filters/sorts/pages in memory. */
+    data?: T[];
+    /** Server-side: pass a data source; grid calls fetchPage with params. */
+    dataSource?: IDataSource<T>;
+    /** Controlled: current page (1-based). Omit for uncontrolled. */
+    page?: number;
+    /** Controlled: page size. Omit for uncontrolled. */
+    pageSize?: number;
+    /** Controlled: sort. Omit for uncontrolled. */
+    sort?: {
+        field: string;
+        direction: 'asc' | 'desc';
+    };
+    /** Controlled: unified filters. Omit for uncontrolled. */
+    filters?: IFilters;
+    /** Controlled: visible column ids. Omit for uncontrolled. */
+    visibleColumns?: Set<string>;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
+    onSortChange?: (sort: {
+        field: string;
+        direction: 'asc' | 'desc';
+    }) => void;
+    onFiltersChange?: (filters: IFilters) => void;
+    onVisibleColumnsChange?: (cols: Set<string>) => void;
+    /** Initial page size when uncontrolled (default 20). */
+    defaultPageSize?: number;
+    /** Initial sort field when uncontrolled. */
+    defaultSortBy?: string;
+    /** Initial sort direction when uncontrolled (default 'asc'). */
+    defaultSortDirection?: 'asc' | 'desc';
+    toolbar?: React.ReactNode;
+    emptyState?: {
+        message?: React.ReactNode;
+        render?: () => React.ReactNode;
+    };
+    entityLabelPlural?: string;
+    className?: string;
+    title?: React.ReactNode;
+    layoutMode?: 'content' | 'fill';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+export declare function OGrid<T>(props: IOGridProps<T>): React.ReactElement;
+export declare namespace OGrid {
+    var displayName: string;
+}
+/** @deprecated Use OGrid and IOGridProps. Kept for backward compatibility. */
+export declare const MaterialDataTable: typeof OGrid;
+/** @deprecated Use IOGridProps. Kept for backward compatibility. */
+export type IMaterialDataTableProps<T> = IOGridProps<T>;

package/dist/types/MaterialDataTable/index.d.ts

@@ -0,0 +1 @@
+export { OGrid, MaterialDataTable, type IOGridProps, type IMaterialDataTableProps } from './MaterialDataTable';

package/dist/types/PaginationControls/PaginationControls.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface IPaginationControlsProps {
+    currentPage: number;
+    pageSize: number;
+    totalCount: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    entityLabelPlural?: string;
+    className?: string;
+}
+export declare const PaginationControls: React.FC<IPaginationControlsProps>;

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export { OGrid, type IOGridProps, MaterialDataTable, type IMaterialDataTableProps } from './MaterialDataTable';
+export { DataGridTable, type IDataGridTableProps } from './DataGridTable/DataGridTable';
+export { ColumnChooser, type IColumnChooserProps } from './ColumnChooser/ColumnChooser';
+export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter/ColumnHeaderFilter';
+export { PaginationControls, type IPaginationControlsProps } from './PaginationControls/PaginationControls';
+export { type ColumnFilterType, type IColumnFilterDef, type IColumnMeta, type IColumnDef, type IColumnDefinition, type UserLike, type IFilters, type IFetchParams, type IPageResult, type IDataSource, toUserLike, toDataGridFilterProps, useFilterOptions, type UseFilterOptionsResult, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, type CsvColumn, } from '@alaarab/ogrid-core';

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@alaarab/ogrid-material",
+  "version": "1.0.0",
+  "description": "OGrid Material UI implementation – MUI DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "test": "jest",
+    "storybook": "storybook dev -p 6007 --no-open",
+    "build-storybook": "storybook build"
+  },
+  "keywords": ["ogrid", "material-ui", "mui", "datatable", "react", "typescript", "grid"],
+  "author": "Ala Arab",
+  "license": "MIT",
+  "files": ["dist", "README.md", "LICENSE"],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@alaarab/ogrid-core": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
+    "@mui/x-data-grid": "^7.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.0",
+    "@mui/material": "^6.4.0",
+    "@mui/x-data-grid": "^7.27.0",
+    "@storybook/react": "^8.5.3",
+    "@storybook/react-vite": "^8.5.3",
+    "storybook": "^8.5.3",
+    "vite": "^6.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}