Servers API

frontend_reactjs/src/pages/Users.tsx

@@ -1,6 +1,5 @@
 import { Box, Button, CircularProgress } from "@mui/material"
-import DataTable from "../components/DataTable"
-import { GridColDef } from "@mui/x-data-grid"
+import { DataGrid, GridColDef } from "@mui/x-data-grid"
 import { useRoles, useUsers } from "../hooks/swrHooks"
 import { IRole } from "../interfaces/role"
 import { useState } from "react"
@@ -51,7 +50,29 @@ export default function Users() {
                 setOpen={setOpen}
             />
 
-            <DataTable rows={users} columns={columns} />
+            <DataGrid
+                autoHeight
+                style={{ width: "100%" }}
+                rows={users}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 10 },
+                    },
+                }}
+                pageSizeOptions={[10, 20, 50, 100]}
+                checkboxSelection
+                disableRowSelectionOnClick
+
+                processRowUpdate={(updatedRow, originalRow) => {
+                    console.log(updatedRow)
+                    return updatedRow
+                }}
+
+                onProcessRowUpdateError={(error) => {
+                    console.log(error)
+                }}
+            />
         </Box>
     )
 }