Servers API

frontend_reactjs/src/pages/Roles.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 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 } from '../hooks/swrHooks'
 import CreateRoleModal from '../components/modals/CreateRoleModal'
 
@@ -36,7 +35,28 @@ export default function Roles() {
         setOpen={setOpen}
       />
 
-      <DataTable rows={roles} columns={columns} />
+      <DataGrid
+        autoHeight
+        style={{ width: "100%" }}
+        rows={roles}
+        columns={columns}
+        initialState={{
+          pagination: {
+            paginationModel: { page: 0, pageSize: 10 },
+          },
+        }}
+        pageSizeOptions={[10, 20, 50, 100]}
+        disableRowSelectionOnClick
+
+        processRowUpdate={(updatedRow, originalRow) => {
+          console.log(updatedRow)
+          return updatedRow
+        }}
+
+        onProcessRowUpdateError={(error) => {
+          console.log(error)
+        }}
+      />
     </Box>
   )
 }