re-organising node list columns and validators column name change

explorer/src/pages/Mixnodes/index.tsx

@@ -125,24 +125,6 @@ export const PageMixnodes: React.FC = () => {
         </>
       ),
     },
-    {
-      field: 'bond',
-      headerName: 'Stake',
-      renderHeader: () => <CustomColumnHeading headingTitle="Stake" />,
-      type: 'number',
-      headerClassName: 'MuiDataGrid-header-override',
-      width: 200,
-      headerAlign: 'left',
-      renderCell: (params: GridRenderCellParams) => (
-        <MuiLink
-          sx={getCellStyles(theme, params.row)}
-          component={RRDLink}
-          to={`/network-components/mixnode/${params.row.identity_key}`}
-        >
-          {currencyToString(params.value)}
-        </MuiLink>
-      ),
-    },
     {
       field: 'location',
       headerName: 'Location',
@@ -162,6 +144,41 @@ export const PageMixnodes: React.FC = () => {
         </Button>
       ),
     },
+    {
+      field: 'host',
+      headerName: 'Host',
+      renderHeader: () => <CustomColumnHeading headingTitle="Host" />,
+      headerClassName: 'MuiDataGrid-header-override',
+      width: 130,
+      headerAlign: 'left',
+      renderCell: (params: GridRenderCellParams) => (
+        <MuiLink
+          sx={getCellStyles(theme, params.row)}
+          component={RRDLink}
+          to={`/network-components/mixnode/${params.row.identity_key}`}
+        >
+          {params.value}
+        </MuiLink>
+      ),
+    },
+    {
+      field: 'bond',
+      headerName: 'Stake',
+      renderHeader: () => <CustomColumnHeading headingTitle="Stake" />,
+      type: 'number',
+      headerClassName: 'MuiDataGrid-header-override',
+      width: 200,
+      headerAlign: 'left',
+      renderCell: (params: GridRenderCellParams) => (
+        <MuiLink
+          sx={getCellStyles(theme, params.row)}
+          component={RRDLink}
+          to={`/network-components/mixnode/${params.row.identity_key}`}
+        >
+          {currencyToString(params.value)}
+        </MuiLink>
+      ),
+    },
     {
       field: 'self_percentage',
       headerName: 'Self %',
@@ -181,15 +198,15 @@ export const PageMixnodes: React.FC = () => {
       ),
     },
     {
-      field: 'host',
-      headerName: 'Host',
-      renderHeader: () => <CustomColumnHeading headingTitle="Host" />,
+      field: 'delegators_number',
+      headerName: 'Delegators',
+      renderHeader: () => <CustomColumnHeading headingTitle="Delegators" />,
       headerClassName: 'MuiDataGrid-header-override',
-      width: 130,
+      width: 185,
       headerAlign: 'left',
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
-          sx={getCellStyles(theme, params.row)}
+          sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}
           component={RRDLink}
           to={`/network-components/mixnode/${params.row.identity_key}`}
         >
@@ -231,23 +248,6 @@ export const PageMixnodes: React.FC = () => {
         </MuiLink>
       ),
     },
-    {
-      field: 'delegators_number',
-      headerName: 'Delegators Number',
-      renderHeader: () => <CustomColumnHeading headingTitle="Delegators Number" />,
-      headerClassName: 'MuiDataGrid-header-override',
-      width: 185,
-      headerAlign: 'left',
-      renderCell: (params: GridRenderCellParams) => (
-        <MuiLink
-          sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}
-          component={RRDLink}
-          to={`/network-components/mixnode/${params.row.identity_key}`}
-        >
-          {params.value}
-        </MuiLink>
-      ),
-    },
   ];
 
   const handlePageSize = (event: SelectChangeEvent<string>) => {