@micha.bigler/ui-core-micha 2.4.5 → 2.5.0

package/dist/components/UserListComponent.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { Box, Typography, FormControl, Select, MenuItem, Button, Tooltip, CircularProgress, Alert, TextField, } from '@mui/material';
-import { DataGrid } from '@mui/x-data-grid';
+import { Box, Typography, FormControl, Select, MenuItem, Button, Tooltip, CircularProgress, Alert, TextField, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, TablePagination, } from '@mui/material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import CancelIcon from '@mui/icons-material/Cancel';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -15,6 +14,10 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
     const [error, setError] = useState(null);
     const [rowActionLoading, setRowActionLoading] = useState({});
     const [searchQuery, setSearchQuery] = useState('');
+    const [sortField, setSortField] = useState('email');
+    const [sortDir, setSortDir] = useState('asc');
+    const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(25);
     const controlSx = { minWidth: 140 };
     const actionButtonSx = { textTransform: 'none', minWidth: 90 };
     const loadUsers = useCallback(async () => {
@@ -42,6 +45,9 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
     useEffect(() => {
         loadUsers();
     }, [loadUsers, refreshTrigger]);
+    useEffect(() => {
+        setPage(0);
+    }, [searchQuery]);
     const handleDelete = async (userId) => {
         if (!window.confirm(t('UserList.DELETE_CONFIRM', 'Are you sure you want to delete this user?')))
             return;
@@ -211,16 +217,23 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                 field: 'email',
                 headerName: t('Auth.EMAIL_LABEL', 'Email'),
                 minWidth: 220,
-                maxWidth: 340,
                 flex: 1,
+                sortable: true,
+                align: 'left',
+                headerAlign: 'left',
+                valueGetter: (row) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.email) !== null && _a !== void 0 ? _a : ''; },
+                renderCell: (row) => row.email,
             },
             {
                 field: 'name',
                 headerName: t('Profile.NAME_LABEL', 'Name'),
                 minWidth: 180,
-                maxWidth: 260,
                 flex: 0.9,
-                valueGetter: (_value, row) => getUserDisplayName(row),
+                sortable: true,
+                align: 'left',
+                headerAlign: 'left',
+                valueGetter: (row) => getUserDisplayName(row),
+                renderCell: (row) => getUserDisplayName(row),
             },
         ];
         if (showNewColumn) {
@@ -228,14 +241,14 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                 field: 'is_new',
                 headerName: t('UserList.NEW', 'New'),
                 minWidth: 90,
-                maxWidth: 110,
                 flex: 0.35,
+                sortable: true,
                 align: 'center',
                 headerAlign: 'center',
-                valueGetter: (_value, row) => { var _a; return Boolean(((_a = row === null || row === void 0 ? void 0 : row.profile) === null || _a === void 0 ? void 0 : _a.is_new) || (row === null || row === void 0 ? void 0 : row.is_new)); },
-                renderCell: (params) => {
-                    var _a, _b, _c;
-                    return renderBooleanStatusIcon(Boolean(((_b = (_a = params.row) === null || _a === void 0 ? void 0 : _a.profile) === null || _b === void 0 ? void 0 : _b.is_new) || ((_c = params.row) === null || _c === void 0 ? void 0 : _c.is_new)), t('Common.YES', 'Yes'), t('Common.NO', 'No'));
+                valueGetter: (row) => { var _a; return Boolean(((_a = row === null || row === void 0 ? void 0 : row.profile) === null || _a === void 0 ? void 0 : _a.is_new) || (row === null || row === void 0 ? void 0 : row.is_new)); },
+                renderCell: (row) => {
+                    var _a;
+                    return renderBooleanStatusIcon(Boolean(((_a = row === null || row === void 0 ? void 0 : row.profile) === null || _a === void 0 ? void 0 : _a.is_new) || (row === null || row === void 0 ? void 0 : row.is_new)), t('Common.YES', 'Yes'), t('Common.NO', 'No'));
                 },
             });
         }
@@ -244,14 +257,14 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                 field: 'successful_login',
                 headerName: t('UserList.SUCCESSFUL_LOGIN', 'Successful Login'),
                 minWidth: 120,
-                maxWidth: 150,
                 flex: 0.4,
+                sortable: true,
                 align: 'center',
                 headerAlign: 'center',
-                valueGetter: (_value, row) => { var _a; return Boolean((_a = row === null || row === void 0 ? void 0 : row.successful_login) !== null && _a !== void 0 ? _a : row === null || row === void 0 ? void 0 : row.last_login); },
-                renderCell: (params) => {
-                    var _a, _b, _c;
-                    return renderBooleanStatusIcon(Boolean((_b = (_a = params.row) === null || _a === void 0 ? void 0 : _a.successful_login) !== null && _b !== void 0 ? _b : (_c = params.row) === null || _c === void 0 ? void 0 : _c.last_login), t('Common.YES', 'Yes'), t('Common.NO', 'No'));
+                valueGetter: (row) => { var _a; return Boolean((_a = row === null || row === void 0 ? void 0 : row.successful_login) !== null && _a !== void 0 ? _a : row === null || row === void 0 ? void 0 : row.last_login); },
+                renderCell: (row) => {
+                    var _a;
+                    return renderBooleanStatusIcon(Boolean((_a = row === null || row === void 0 ? void 0 : row.successful_login) !== null && _a !== void 0 ? _a : row === null || row === void 0 ? void 0 : row.last_login), t('Common.YES', 'Yes'), t('Common.NO', 'No'));
                 },
             });
         }
@@ -260,28 +273,26 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                 field: 'role',
                 headerName: t('UserList.ROLE', 'Role'),
                 minWidth: 180,
-                maxWidth: 240,
                 flex: 0.7,
-                valueGetter: (_value, row) => (row === null || row === void 0 ? void 0 : row.role) || 'none',
-                renderCell: (params) => {
-                    const user = params.row;
-                    return (_jsx(FormControl, { size: "small", fullWidth: true, sx: controlSx, disabled: !canEdit(user), children: _jsx(Select, { value: user.role || 'none', onChange: (event) => handleChangeRole(user.id, event.target.value), variant: "outlined", children: roles.map((role) => _jsx(MenuItem, { value: role, children: role }, role)) }) }));
-                },
+                sortable: true,
+                align: 'left',
+                headerAlign: 'left',
+                valueGetter: (row) => (row === null || row === void 0 ? void 0 : row.role) || 'none',
+                renderCell: (row) => (_jsx(FormControl, { size: "small", fullWidth: true, sx: controlSx, disabled: !canEdit(row), children: _jsx(Select, { value: row.role || 'none', onChange: (event) => handleChangeRole(row.id, event.target.value), variant: "outlined", children: roles.map((role) => _jsx(MenuItem, { value: role, children: role }, role)) }) })),
             });
         }
         const mappedExtraColumns = visibleExtraColumns.map((column) => ({
             field: `extra:${column.key}`,
             headerName: typeof column.label === 'function' ? column.label(listContext) : column.label,
             minWidth: Number(column.minWidth) || 180,
-            maxWidth: Number(column.maxWidth) || 320,
             flex: Number(column.flex) || 0.9,
             sortable: column.sortable !== false,
             align: column.align || 'left',
             headerAlign: column.align || 'left',
-            valueGetter: (_value, row) => getExtraColumnSortValue(column, row),
-            renderCell: (params) => column.renderCell({
-                user: params.row,
-                canEdit: canEdit(params.row),
+            valueGetter: (row) => getExtraColumnSortValue(column, row),
+            renderCell: (row) => column.renderCell({
+                user: row,
+                canEdit: canEdit(row),
                 currentUser,
                 extraContext,
                 t,
@@ -296,30 +307,27 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
             field: 'actions',
             headerName: t('Common.ACTIONS', 'Actions'),
             minWidth: Math.max(220, 110 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 110),
-            maxWidth: Math.max(360, 120 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 120),
             flex: 1.1,
             sortable: false,
-            filterable: false,
-            disableColumnMenu: true,
-            renderCell: (params) => {
-                const user = params.row;
-                return (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', py: 0.5 }, children: [visibleRowActions.map((action) => {
-                            const actionId = `${action.key}:${user.id}`;
-                            const isBusy = Boolean(rowActionLoading[actionId]);
-                            const isDisabled = typeof action.disabled === 'function'
-                                ? action.disabled({
-                                    user,
-                                    canEdit: canEdit(user),
-                                    currentUser,
-                                    extraContext,
-                                    t,
-                                })
-                                : false;
-                            return (_jsx(Button, { size: "small", variant: "outlined", onClick: () => runRowAction(action, user), disabled: isBusy || isDisabled, sx: actionButtonSx, children: typeof action.label === 'function'
-                                    ? action.label({ user, t, currentUser, canEdit: canEdit(user) })
-                                    : action.label }, `${action.key}-${user.id}`));
-                        }), showDeleteAction && (_jsx(Tooltip, { title: t('Common.DELETE', 'Delete'), children: _jsx("span", { children: _jsx(Button, { size: "small", variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: () => handleDelete(user.id), disabled: !canDelete(user), sx: actionButtonSx, children: t('Common.DELETE', 'Delete') }) }) }))] }));
-            },
+            align: 'left',
+            headerAlign: 'left',
+            valueGetter: null,
+            renderCell: (row) => (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', py: 0.5 }, children: [visibleRowActions.map((action) => {
+                        const actionId = `${action.key}:${row.id}`;
+                        const isBusy = Boolean(rowActionLoading[actionId]);
+                        const isDisabled = typeof action.disabled === 'function'
+                            ? action.disabled({
+                                user: row,
+                                canEdit: canEdit(row),
+                                currentUser,
+                                extraContext,
+                                t,
+                            })
+                            : false;
+                        return (_jsx(Button, { size: "small", variant: "outlined", onClick: () => runRowAction(action, row), disabled: isBusy || isDisabled, sx: actionButtonSx, children: typeof action.label === 'function'
+                                ? action.label({ user: row, t, currentUser, canEdit: canEdit(row) })
+                                : action.label }, `${action.key}-${row.id}`));
+                    }), showDeleteAction && (_jsx(Tooltip, { title: t('Common.DELETE', 'Delete'), children: _jsx("span", { children: _jsx(Button, { size: "small", variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: () => handleDelete(row.id), disabled: !canDelete(row), sx: actionButtonSx, children: t('Common.DELETE', 'Delete') }) }) }))] })),
         };
         return [...baseColumns, ...mappedExtraColumns, actionColumn];
     }, [
@@ -339,27 +347,29 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
         canEdit,
         canDelete,
     ]);
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('UserList.TITLE', 'All Users') }), _jsx(Box, { sx: { mb: 2, maxWidth: 420 }, children: _jsx(TextField, { fullWidth: true, size: "small", label: t('Common.SEARCH', 'Search'), placeholder: t('UserList.SEARCH_PLACEHOLDER', 'Search users...'), value: searchQuery, onChange: (event) => setSearchQuery(event.target.value) }) }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(error) }), loading && (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(CircularProgress, {}) })), !loading && (_jsx(Box, { sx: { width: '100%', minHeight: 520 }, children: _jsx(DataGrid, { rows: filteredUsers, columns: columns, disableRowSelectionOnClick: true, showToolbar: true, getRowHeight: () => 'auto', pageSizeOptions: [10, 25, 50, 100], initialState: {
-                        sorting: { sortModel: [{ field: 'email', sort: 'asc' }] },
-                        pagination: { paginationModel: { pageSize: 25, page: 0 } },
-                    }, localeText: {
-                        noRowsLabel: t('UserList.NO_USERS', 'No users found.'),
-                        toolbarQuickFilterPlaceholder: t('UserList.SEARCH_PLACEHOLDER', 'Search users...'),
-                    }, slotProps: {
-                        toolbar: {
-                            showQuickFilter: true,
-                            quickFilterProps: { debounceMs: 300 },
-                        },
-                    }, sx: {
-                        border: 1,
-                        borderColor: 'divider',
-                        '& .MuiDataGrid-cell': {
-                            display: 'flex',
-                            alignItems: 'flex-start',
-                            py: 1,
-                        },
-                        '& .MuiDataGrid-columnHeaders': {
-                            bgcolor: 'action.hover',
-                        },
-                    } }) }))] }));
+    const sortedUsers = useMemo(() => {
+        const col = columns.find((c) => c.field === sortField);
+        return [...filteredUsers].sort((a, b) => {
+            var _a, _b;
+            const aVal = (col === null || col === void 0 ? void 0 : col.valueGetter) ? col.valueGetter(a) : ((_a = a[sortField]) !== null && _a !== void 0 ? _a : '');
+            const bVal = (col === null || col === void 0 ? void 0 : col.valueGetter) ? col.valueGetter(b) : ((_b = b[sortField]) !== null && _b !== void 0 ? _b : '');
+            const cmp = String(aVal !== null && aVal !== void 0 ? aVal : '').localeCompare(String(bVal !== null && bVal !== void 0 ? bVal : ''), undefined, { numeric: true, sensitivity: 'base' });
+            return sortDir === 'asc' ? cmp : -cmp;
+        });
+    }, [filteredUsers, sortField, sortDir, columns]);
+    const pagedUsers = useMemo(() => sortedUsers.slice(page * pageSize, page * pageSize + pageSize), [sortedUsers, page, pageSize]);
+    const handleSortClick = (field) => {
+        if (sortField === field) {
+            setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+        }
+        else {
+            setSortField(field);
+            setSortDir('asc');
+        }
+        setPage(0);
+    };
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('UserList.TITLE', 'All Users') }), _jsx(Box, { sx: { mb: 2, maxWidth: 420 }, children: _jsx(TextField, { fullWidth: true, size: "small", label: t('Common.SEARCH', 'Search'), placeholder: t('UserList.SEARCH_PLACEHOLDER', 'Search users...'), value: searchQuery, onChange: (event) => setSearchQuery(event.target.value) }) }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(error) }), loading && (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(CircularProgress, {}) })), !loading && (_jsxs(Box, { sx: { width: '100%' }, children: [_jsx(TableContainer, { sx: { border: 1, borderColor: 'divider', borderRadius: 1 }, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { sx: { bgcolor: 'action.hover' }, children: _jsx(TableRow, { children: columns.map((col) => (_jsx(TableCell, { align: col.headerAlign || col.align || 'left', sortDirection: sortField === col.field ? sortDir : false, sx: { minWidth: col.minWidth, fontWeight: 600, whiteSpace: 'nowrap' }, children: col.sortable !== false ? (_jsx(TableSortLabel, { active: sortField === col.field, direction: sortField === col.field ? sortDir : 'asc', onClick: () => handleSortClick(col.field), children: col.headerName })) : (col.headerName) }, col.field))) }) }), _jsx(TableBody, { children: pagedUsers.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, align: "center", sx: { py: 4, color: 'text.secondary' }, children: t('UserList.NO_USERS', 'No users found.') }) })) : (pagedUsers.map((row) => (_jsx(TableRow, { hover: true, children: columns.map((col) => (_jsx(TableCell, { align: col.align || 'left', sx: { verticalAlign: 'top', py: 1 }, children: col.renderCell(row) }, col.field))) }, row.id)))) })] }) }), _jsx(TablePagination, { component: "div", count: sortedUsers.length, page: page, onPageChange: (_, newPage) => setPage(newPage), rowsPerPage: pageSize, onRowsPerPageChange: (event) => {
+                            setPageSize(Number(event.target.value));
+                            setPage(0);
+                        }, rowsPerPageOptions: [10, 25, 50, 100] })] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -12,7 +12,6 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.3.11",
-    "@mui/x-data-grid": "^8.28.6",
     "axios": "^1.16.1",
     "i18next": "^25.10.10 || ^26.0.0",
     "qrcode.react": "^4.2.0",

package/src/components/UserListComponent.jsx

@@ -10,8 +10,15 @@ import {
   CircularProgress,
   Alert,
   TextField,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableSortLabel,
+  TablePagination,
 } from '@mui/material';
-import { DataGrid } from '@mui/x-data-grid';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import CancelIcon from '@mui/icons-material/Cancel';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -20,7 +27,7 @@ import { fetchUsersList, deleteUser, updateUserRole } from '../auth/authApi';
 
 const DEFAULT_ROLES = ['none', 'student', 'teacher', 'admin'];
 
-export function UserListComponent({ 
+export function UserListComponent({
     roles = DEFAULT_ROLES,
     currentUser,
     extraColumns = [],
@@ -42,6 +49,10 @@ export function UserListComponent({
   const [error, setError] = useState(null);
   const [rowActionLoading, setRowActionLoading] = useState({});
   const [searchQuery, setSearchQuery] = useState('');
+  const [sortField, setSortField] = useState('email');
+  const [sortDir, setSortDir] = useState('asc');
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
   const controlSx = { minWidth: 140 };
   const actionButtonSx = { textTransform: 'none', minWidth: 90 };
 
@@ -69,6 +80,10 @@ export function UserListComponent({
     loadUsers();
   }, [loadUsers, refreshTrigger]);
 
+  useEffect(() => {
+    setPage(0);
+  }, [searchQuery]);
+
   const handleDelete = async (userId) => {
     if (!window.confirm(t('UserList.DELETE_CONFIRM', 'Are you sure you want to delete this user?'))) return;
     try {
@@ -106,14 +121,14 @@ export function UserListComponent({
   const defaultCanEdit = (targetUser) => {
       if (!currentUser) return false;
       if (currentUser.is_superuser) return true;
-      
+
       const myRole = currentUser.role || 'none';
       const targetRole = targetUser.role || 'none';
 
       if (myRole === 'admin') return true;
-      
+
       if (myRole === 'teacher') {
-          if (targetUser.id === currentUser.id) return false; 
+          if (targetUser.id === currentUser.id) return false;
           if (['teacher', 'admin', 'supervisor'].includes(targetRole)) return false;
           return true;
       }
@@ -267,16 +282,23 @@ export function UserListComponent({
         field: 'email',
         headerName: t('Auth.EMAIL_LABEL', 'Email'),
         minWidth: 220,
-        maxWidth: 340,
         flex: 1,
+        sortable: true,
+        align: 'left',
+        headerAlign: 'left',
+        valueGetter: (row) => row?.email ?? '',
+        renderCell: (row) => row.email,
       },
       {
         field: 'name',
         headerName: t('Profile.NAME_LABEL', 'Name'),
         minWidth: 180,
-        maxWidth: 260,
         flex: 0.9,
-        valueGetter: (_value, row) => getUserDisplayName(row),
+        sortable: true,
+        align: 'left',
+        headerAlign: 'left',
+        valueGetter: (row) => getUserDisplayName(row),
+        renderCell: (row) => getUserDisplayName(row),
       },
     ];
 
@@ -285,13 +307,13 @@ export function UserListComponent({
         field: 'is_new',
         headerName: t('UserList.NEW', 'New'),
         minWidth: 90,
-        maxWidth: 110,
         flex: 0.35,
+        sortable: true,
         align: 'center',
         headerAlign: 'center',
-        valueGetter: (_value, row) => Boolean(row?.profile?.is_new || row?.is_new),
-        renderCell: (params) => renderBooleanStatusIcon(
-          Boolean(params.row?.profile?.is_new || params.row?.is_new),
+        valueGetter: (row) => Boolean(row?.profile?.is_new || row?.is_new),
+        renderCell: (row) => renderBooleanStatusIcon(
+          Boolean(row?.profile?.is_new || row?.is_new),
           t('Common.YES', 'Yes'),
           t('Common.NO', 'No'),
         ),
@@ -303,13 +325,13 @@ export function UserListComponent({
         field: 'successful_login',
         headerName: t('UserList.SUCCESSFUL_LOGIN', 'Successful Login'),
         minWidth: 120,
-        maxWidth: 150,
         flex: 0.4,
+        sortable: true,
         align: 'center',
         headerAlign: 'center',
-        valueGetter: (_value, row) => Boolean(row?.successful_login ?? row?.last_login),
-        renderCell: (params) => renderBooleanStatusIcon(
-          Boolean(params.row?.successful_login ?? params.row?.last_login),
+        valueGetter: (row) => Boolean(row?.successful_login ?? row?.last_login),
+        renderCell: (row) => renderBooleanStatusIcon(
+          Boolean(row?.successful_login ?? row?.last_login),
           t('Common.YES', 'Yes'),
           t('Common.NO', 'No'),
         ),
@@ -321,23 +343,22 @@ export function UserListComponent({
         field: 'role',
         headerName: t('UserList.ROLE', 'Role'),
         minWidth: 180,
-        maxWidth: 240,
         flex: 0.7,
-        valueGetter: (_value, row) => row?.role || 'none',
-        renderCell: (params) => {
-          const user = params.row;
-          return (
-            <FormControl size="small" fullWidth sx={controlSx} disabled={!canEdit(user)}>
-              <Select
-                value={user.role || 'none'}
-                onChange={(event) => handleChangeRole(user.id, event.target.value)}
-                variant="outlined"
-              >
-                {roles.map((role) => <MenuItem key={role} value={role}>{role}</MenuItem>)}
-              </Select>
-            </FormControl>
-          );
-        },
+        sortable: true,
+        align: 'left',
+        headerAlign: 'left',
+        valueGetter: (row) => row?.role || 'none',
+        renderCell: (row) => (
+          <FormControl size="small" fullWidth sx={controlSx} disabled={!canEdit(row)}>
+            <Select
+              value={row.role || 'none'}
+              onChange={(event) => handleChangeRole(row.id, event.target.value)}
+              variant="outlined"
+            >
+              {roles.map((role) => <MenuItem key={role} value={role}>{role}</MenuItem>)}
+            </Select>
+          </FormControl>
+        ),
       });
     }
 
@@ -345,16 +366,15 @@ export function UserListComponent({
       field: `extra:${column.key}`,
       headerName: typeof column.label === 'function' ? column.label(listContext) : column.label,
       minWidth: Number(column.minWidth) || 180,
-      maxWidth: Number(column.maxWidth) || 320,
       flex: Number(column.flex) || 0.9,
       sortable: column.sortable !== false,
       align: column.align || 'left',
       headerAlign: column.align || 'left',
-      valueGetter: (_value, row) => getExtraColumnSortValue(column, row),
-      renderCell: (params) =>
+      valueGetter: (row) => getExtraColumnSortValue(column, row),
+      renderCell: (row) =>
         column.renderCell({
-          user: params.row,
-          canEdit: canEdit(params.row),
+          user: row,
+          canEdit: canEdit(row),
           currentUser,
           extraContext,
           t,
@@ -372,65 +392,61 @@ export function UserListComponent({
       field: 'actions',
       headerName: t('Common.ACTIONS', 'Actions'),
       minWidth: Math.max(220, 110 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 110),
-      maxWidth: Math.max(360, 120 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 120),
       flex: 1.1,
       sortable: false,
-      filterable: false,
-      disableColumnMenu: true,
-      renderCell: (params) => {
-        const user = params.row;
-
-        return (
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', py: 0.5 }}>
-            {visibleRowActions.map((action) => {
-              const actionId = `${action.key}:${user.id}`;
-              const isBusy = Boolean(rowActionLoading[actionId]);
-              const isDisabled = typeof action.disabled === 'function'
-                ? action.disabled({
-                    user,
-                    canEdit: canEdit(user),
-                    currentUser,
-                    extraContext,
-                    t,
-                  })
-                : false;
-
-              return (
+      align: 'left',
+      headerAlign: 'left',
+      valueGetter: null,
+      renderCell: (row) => (
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', py: 0.5 }}>
+          {visibleRowActions.map((action) => {
+            const actionId = `${action.key}:${row.id}`;
+            const isBusy = Boolean(rowActionLoading[actionId]);
+            const isDisabled = typeof action.disabled === 'function'
+              ? action.disabled({
+                  user: row,
+                  canEdit: canEdit(row),
+                  currentUser,
+                  extraContext,
+                  t,
+                })
+              : false;
+
+            return (
+              <Button
+                key={`${action.key}-${row.id}`}
+                size="small"
+                variant="outlined"
+                onClick={() => runRowAction(action, row)}
+                disabled={isBusy || isDisabled}
+                sx={actionButtonSx}
+              >
+                {typeof action.label === 'function'
+                  ? action.label({ user: row, t, currentUser, canEdit: canEdit(row) })
+                  : action.label}
+              </Button>
+            );
+          })}
+
+          {showDeleteAction && (
+            <Tooltip title={t('Common.DELETE', 'Delete')}>
+              <span>
                 <Button
-                  key={`${action.key}-${user.id}`}
                   size="small"
                   variant="outlined"
-                  onClick={() => runRowAction(action, user)}
-                  disabled={isBusy || isDisabled}
+                  color="error"
+                  startIcon={<DeleteIcon />}
+                  onClick={() => handleDelete(row.id)}
+                  disabled={!canDelete(row)}
                   sx={actionButtonSx}
                 >
-                  {typeof action.label === 'function'
-                    ? action.label({ user, t, currentUser, canEdit: canEdit(user) })
-                    : action.label}
+                  {t('Common.DELETE', 'Delete')}
                 </Button>
-              );
-            })}
-
-            {showDeleteAction && (
-              <Tooltip title={t('Common.DELETE', 'Delete')}>
-                <span>
-                  <Button
-                    size="small"
-                    variant="outlined"
-                    color="error"
-                    startIcon={<DeleteIcon />}
-                    onClick={() => handleDelete(user.id)}
-                    disabled={!canDelete(user)}
-                    sx={actionButtonSx}
-                  >
-                    {t('Common.DELETE', 'Delete')}
-                  </Button>
-                </span>
-              </Tooltip>
-            )}
-          </Box>
-        );
-      },
+              </span>
+            </Tooltip>
+          )}
+        </Box>
+      ),
     };
 
     return [...baseColumns, ...mappedExtraColumns, actionColumn];
@@ -452,6 +468,31 @@ export function UserListComponent({
     canDelete,
   ]);
 
+  const sortedUsers = useMemo(() => {
+    const col = columns.find((c) => c.field === sortField);
+    return [...filteredUsers].sort((a, b) => {
+      const aVal = col?.valueGetter ? col.valueGetter(a) : (a[sortField] ?? '');
+      const bVal = col?.valueGetter ? col.valueGetter(b) : (b[sortField] ?? '');
+      const cmp = String(aVal ?? '').localeCompare(String(bVal ?? ''), undefined, { numeric: true, sensitivity: 'base' });
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+  }, [filteredUsers, sortField, sortDir, columns]);
+
+  const pagedUsers = useMemo(
+    () => sortedUsers.slice(page * pageSize, page * pageSize + pageSize),
+    [sortedUsers, page, pageSize],
+  );
+
+  const handleSortClick = (field) => {
+    if (sortField === field) {
+      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortField(field);
+      setSortDir('asc');
+    }
+    setPage(0);
+  };
+
   return (
     <Box>
       <Typography variant="h6" gutterBottom>{t('UserList.TITLE', 'All Users')}</Typography>
@@ -466,7 +507,7 @@ export function UserListComponent({
           onChange={(event) => setSearchQuery(event.target.value)}
         />
       </Box>
-      
+
       {error && <Alert severity="error" sx={{ mb: 2 }}>{t(error)}</Alert>}
 
       {loading && (
@@ -476,40 +517,73 @@ export function UserListComponent({
       )}
 
       {!loading && (
-        <Box sx={{ width: '100%', minHeight: 520 }}>
-          <DataGrid
-            rows={filteredUsers}
-            columns={columns}
-            disableRowSelectionOnClick
-            showToolbar
-            getRowHeight={() => 'auto'}
-            pageSizeOptions={[10, 25, 50, 100]}
-            initialState={{
-              sorting: { sortModel: [{ field: 'email', sort: 'asc' }] },
-              pagination: { paginationModel: { pageSize: 25, page: 0 } },
-            }}
-            localeText={{
-              noRowsLabel: t('UserList.NO_USERS', 'No users found.'),
-              toolbarQuickFilterPlaceholder: t('UserList.SEARCH_PLACEHOLDER', 'Search users...'),
-            }}
-            slotProps={{
-              toolbar: {
-                showQuickFilter: true,
-                quickFilterProps: { debounceMs: 300 },
-              },
-            }}
-            sx={{
-              border: 1,
-              borderColor: 'divider',
-              '& .MuiDataGrid-cell': {
-                display: 'flex',
-                alignItems: 'flex-start',
-                py: 1,
-              },
-              '& .MuiDataGrid-columnHeaders': {
-                bgcolor: 'action.hover',
-              },
+        <Box sx={{ width: '100%' }}>
+          <TableContainer sx={{ border: 1, borderColor: 'divider', borderRadius: 1 }}>
+            <Table size="small">
+              <TableHead sx={{ bgcolor: 'action.hover' }}>
+                <TableRow>
+                  {columns.map((col) => (
+                    <TableCell
+                      key={col.field}
+                      align={col.headerAlign || col.align || 'left'}
+                      sortDirection={sortField === col.field ? sortDir : false}
+                      sx={{ minWidth: col.minWidth, fontWeight: 600, whiteSpace: 'nowrap' }}
+                    >
+                      {col.sortable !== false ? (
+                        <TableSortLabel
+                          active={sortField === col.field}
+                          direction={sortField === col.field ? sortDir : 'asc'}
+                          onClick={() => handleSortClick(col.field)}
+                        >
+                          {col.headerName}
+                        </TableSortLabel>
+                      ) : (
+                        col.headerName
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {pagedUsers.length === 0 ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      align="center"
+                      sx={{ py: 4, color: 'text.secondary' }}
+                    >
+                      {t('UserList.NO_USERS', 'No users found.')}
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  pagedUsers.map((row) => (
+                    <TableRow key={row.id} hover>
+                      {columns.map((col) => (
+                        <TableCell
+                          key={col.field}
+                          align={col.align || 'left'}
+                          sx={{ verticalAlign: 'top', py: 1 }}
+                        >
+                          {col.renderCell(row)}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          <TablePagination
+            component="div"
+            count={sortedUsers.length}
+            page={page}
+            onPageChange={(_, newPage) => setPage(newPage)}
+            rowsPerPage={pageSize}
+            onRowsPerPageChange={(event) => {
+              setPageSize(Number(event.target.value));
+              setPage(0);
             }}
+            rowsPerPageOptions={[10, 25, 50, 100]}
           />
         </Box>
       )}