show resize column header bars, disable default sorting

interface/src/project/DashboardData.tsx

@@ -42,6 +42,7 @@ import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
 import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
 import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
 import StarIcon from '@mui/icons-material/Star';
 
 import DeviceIcon from './DeviceIcon';
@@ -208,6 +209,9 @@ const DashboardData: FC = () => {
     `,
     HeaderCell: `
       padding-left: 0px;
+      &:not(:last-of-type) {
+        border-right: 1px solid #565656;
+      }
     `
   });
 
@@ -215,23 +219,18 @@ const DashboardData: FC = () => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
     }
-
     if (state.sortKey === sortKey && !state.reverse) {
       return <KeyboardArrowUpOutlinedIcon />;
     }
+    return <UnfoldMoreOutlinedIcon />;
   };
 
   const analog_sort = useSort(
     { nodes: sensorData.analogs },
-    {
+    {},
-      state: {
-        sortKey: 'GPIO',
-        reverse: false
-      }
-    },
     {
       sortIcon: {
-        iconDefault: null,
+        iconDefault: <UnfoldMoreOutlinedIcon />,
         iconUp: <KeyboardArrowUpOutlinedIcon />,
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },
@@ -246,15 +245,10 @@ const DashboardData: FC = () => {
 
   const sensor_sort = useSort(
     { nodes: sensorData.sensors },
-    {
+    {},
-      state: {
-        sortKey: 'NAME',
-        reverse: false
-      }
-    },
     {
       sortIcon: {
-        iconDefault: null,
+        iconDefault: <UnfoldMoreOutlinedIcon />,
         iconUp: <KeyboardArrowUpOutlinedIcon />,
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },
@@ -267,15 +261,10 @@ const DashboardData: FC = () => {
 
   const dv_sort = useSort(
     { nodes: deviceData.data },
-    {
+    {},
-      state: {
-        sortKey: 'NAME',
-        reverse: false
-      }
-    },
     {
       sortIcon: {
-        iconDefault: null,
+        iconDefault: <UnfoldMoreOutlinedIcon />,
         iconUp: <KeyboardArrowUpOutlinedIcon />,
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },
@@ -759,7 +748,7 @@ const DashboardData: FC = () => {
                       ENTITY NAME
                     </Button>
                   </HeaderCell>
-                  <HeaderCell>
+                  <HeaderCell resize>
                     <Button
                       fullWidth
                       style={{ fontSize: '14px', justifyContent: 'flex-start' }}
@@ -831,7 +820,7 @@ const DashboardData: FC = () => {
                     NAME
                   </Button>
                 </HeaderCell>
-                <HeaderCell>
+                <HeaderCell resize>
                   <Button
                     fullWidth
                     style={{ fontSize: '14px', justifyContent: 'flex-start' }}
@@ -906,7 +895,7 @@ const DashboardData: FC = () => {
                     TYPE
                   </Button>
                 </HeaderCell>
-                <HeaderCell>
+                <HeaderCell resize>
                   <Button
                     fullWidth
                     style={{ fontSize: '14px', justifyContent: 'flex-start' }}

interface/src/project/SettingsCustomization.tsx

@@ -31,6 +31,7 @@ import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOu
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
 
 import { ButtonRow, FormLoader, ValidatedTextField, SectionContent } from '../components';
 
@@ -105,6 +106,12 @@ const SettingsCustomization: FC = () => {
         min-width: 70%;
         width: 70%;
       }
+    `,
+    HeaderCell: `
+    padding-left: 0px;
+    &:nth-of-type(2) {
+      border-right: 1px solid #565656;
+    }
     `
   });
 
@@ -112,23 +119,18 @@ const SettingsCustomization: FC = () => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
     }
-
     if (state.sortKey === sortKey && !state.reverse) {
       return <KeyboardArrowUpOutlinedIcon />;
     }
+    return <UnfoldMoreOutlinedIcon />;
   };
 
   const entity_sort = useSort(
     { nodes: deviceEntities },
-    {
+    {},
-      state: {
-        sortKey: 'NAME',
-        reverse: false
-      }
-    },
     {
       sortIcon: {
-        iconDefault: null,
+        iconDefault: <UnfoldMoreOutlinedIcon />,
         iconUp: <KeyboardArrowUpOutlinedIcon />,
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },

src/version.h

@@ -1 +1 @@
-#define EMSESP_APP_VERSION "3.4.0b12t"
+#define EMSESP_APP_VERSION "3.4.0b12t2"