feat: pagination for tables with deleted station directions

src/pages/User/UserListPage/index.tsx

@@ -16,6 +16,10 @@ export const UserListPage = observer(() => {
   const [rowId, setRowId] = useState<number | null>(null);
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
 
   useEffect(() => {
     const fetchUsers = async () => {
@@ -126,29 +130,39 @@ export const UserListPage = observer(() => {
           <CreateButton label="Создать пользователя" path="/user/create" />
         </div>
 
-        <div
-          className="flex justify-end mb-5 duration-300"
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
-        >
-          <button
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-            onClick={() => setIsBulkDeleteModalOpen(true)}
-          >
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
-            {ids.length})
-          </button>
-        </div>
+        {ids.length > 0 && (
+          <div className="flex justify-end mb-5 duration-300">
+            <button
+              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+              onClick={() => setIsBulkDeleteModalOpen(true)}
+            >
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
+              {ids.length})
+            </button>
+          </div>
+        )}
 
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooterPagination
           checkboxSelection
+          disableRowSelectionExcludeModel
           loading={isLoading}
-          onRowSelectionModelChange={(newSelection) => {
-            setIds(Array.from(newSelection.ids) as number[]);
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
+          onRowSelectionModelChange={(newSelection: any) => {
+            if (Array.isArray(newSelection)) {
+              const selectedIds = newSelection.map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
+              const idsSet = newSelection.ids as Set<string | number>;
+              const selectedIds = Array.from(idsSet).map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else {
+              setIds([]);
+            }
           }}
-          hideFooter
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
           slots={{
             noRowsOverlay: () => (