added table sorting to responsive table

src/pages/Devices.tsx

@@ -92,8 +92,8 @@ export default function Devices() {
   const [devicesLoading, setDevicesLoading] = useState(false)
   const [limit, setLimit] = useState(10);
   const [page, setPage] = useState(0);
-  const [order, ] = useState<"asc" | "desc">("asc");
-  const [orderBy, ] = useState("name");
+  const [order, setOrder] = useState<"asc" | "desc">("asc");
+  const [orderBy, setOrderBy] = useState("name");
   const [search, setSearch] = useState("");
   const [total, setTotal] = useState(0);
   const [devices, setDevices] = useState<Device[]>([])
@@ -293,10 +293,15 @@ export default function Devices() {
     if (newValue === "never") openGroupSettings(undefined, "add");
   };
 
+  useEffect(() => {
+    console.log(devices)
+  }, [devices])
+
   const columns = (): Column<Device>[] => {
-    let columns = [
+    let columns: Column<Device>[] = [
       {
         title: "State",
+        sortKey: "state",
         render: (device: Device) => {
           const status = device.status ?? pond.DeviceStatus.create()
           const deviceStateHelper = getDeviceStateHelper(status.state);
@@ -309,12 +314,14 @@ export default function Devices() {
       },
       {
         title: "ID",
+        sortKey: "deviceId",
         render: (device: Device) => <span className={classes.cellContainer}>
           {device.settings?.deviceId}
         </span>
       },
       {
         title: "Device",
+        sortKey: "name",
         render: (device: Device) => {
           return (
             <Box className={classes.cellContainer}>
@@ -346,6 +353,7 @@ export default function Devices() {
       },
       {
         title: "Tags",
+        sortKey: "tags",
         render: (device: Device) => {
           return (
             <Grid2 container spacing={1} className={classes.tagsCellContainer}>
@@ -362,6 +370,8 @@ export default function Devices() {
     if (hasPlenums) {
       columns.push({
         title: "Plenum",
+        sortKey: "hi",
+        disableSort: true,
         render: (device: Device) => {
           if (device.status.plenum?.temperature) {
             return (
@@ -380,6 +390,8 @@ export default function Devices() {
     if (hasSen5x) {
       columns.push({
         title: "Sen5X",
+        sortKey: "hi",
+        disableSort: true,
         render: (device: Device) => {
           if (device.status.sen5x?.temperature) {
             return (
@@ -532,6 +544,10 @@ export default function Devices() {
         setSearchText={setSearch}
         isLoading={devicesLoading}
         actions={getGroup() && <GroupActions removeCallback={removeGroupCallback} group={getGroup()} permissions={groupPermissions} devices={devices} refreshCallback={loadDevices}/>}
+        order={order}
+        setOrder={setOrder}
+        orderBy={orderBy}
+        setOrderBy={setOrderBy}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}