update: added pagination and responsiveness to table #11

src/components/BroadCastDevicesDetails/DataTable.jsx

@@ -18,15 +18,15 @@ const DataTable = (props)=>{
     },[props])
 
     return (
-    <div class="my-1 bg-white w-full rounded-lg ">
+    <div class="my-1 overflow-scroll w-24 min-w-full md:min-w-0  bg-white w-full rounded-lg ">
       <div className="flex space-x-100 m-4">
             <div class="flex-1">
               <h2 class="text-2xl ">Previous Details</h2>
               <p class="text-sm text-gray-500">Previous details of the device.</p>
             </div>
           </div>
         <Table
-          class="min-w-full table-auto"
+          class="min-w-full table-auto "
           Header={() => (
             parameters.length!==0?
               <tr class="bg-primary-900">
@@ -63,10 +63,10 @@ const DataTable = (props)=>{
           pagination={{
             itemsPerPage: 10,
             onPageChange: (page) => {
-              setCurrentPage(page);
+              props.setCurrentPage(page);
             },
-            page: currentPage,
-            totalCount: count,
+            page: props.currentPage,
+            totalCount: props.count,
             withText: true,
           }}
         />

src/components/BroadCastDevicesDetails/Details.jsx

@@ -16,7 +16,7 @@ const Details = (props)=>{
 
       <DetailsPlot DetailType={props.DetailType} Header={props.DetailType+' Variation Chart'}/>
 
-      <DataTable previousData={props.previousData} DetailType={props.DetailType}/>
+      <DataTable currentPage={props.currentPage} setCurrentPage={(p)=>props.setCurrentPage(p)} count={props.count} previousData={props.previousData} DetailType={props.DetailType}/>
 
     </div>
   );

src/components/BroadCastDevicesDetails/DetailsPlot.jsx

@@ -64,7 +64,7 @@ const DetailsPlot = (props) => {
 
           </div>
 
-        <div className="w-max h-max m-2 p-4 flex justify-center items-center rounded-md bg-white shadow"> 
+        <div className="overflow-scroll w-24 min-w-full h-max m-2 p-4 flex justify-center items-center rounded-md bg-white shadow"> 
             <Plot
             width={900}
             height={400}

src/pages/deviceDetails.jsx

@@ -7,6 +7,8 @@ const DeviceDetails = ({ match }) => {
 
   const [currentPage, setCurrentPage] = useState(1);
 
+  const [count,setCount] =useState(0);
+
   const [selected, setSelected] = useState({value:'Load', label:'Load'});
 
   const [data, setData] = useState([]);
@@ -29,17 +31,17 @@ const DeviceDetails = ({ match }) => {
   useEffect(() => {
     if (deviceClient) {
       //getAllDataCount
-      /*deviceClient.getAllDataCount().then((result) => {
-        console.log(result);
+      deviceClient.getAllDataCount().then((result) => {
+        //console.log(result);
         setCount(result);
-      });*/
+      });
       deviceClient.subscribe(
         (message) => setData([message, ...data]),
         (error) => console.log(error),
       );
-      console.log(data);
-      deviceClient.getPageDate(currentPage * 10, 10).then((result) => {
-        console.log(result);
+      //console.log(data);
+      deviceClient.getPageData(currentPage * 10, 10).then((result) => {
+        //console.log(result);
         setPreviousData(result);
       });
     }
@@ -48,7 +50,7 @@ const DeviceDetails = ({ match }) => {
 
   useEffect(() => {
     if (deviceClient) {
-      deviceClient.getPageDate(currentPage * 10, 10).then((result) => {
+      deviceClient.getPageData(currentPage * 10, 10).then((result) => {
         console.log(result);
         setPreviousData(result);
       });
@@ -62,6 +64,7 @@ const DeviceDetails = ({ match }) => {
       <HorizontalNavigation 
           onSelect={(option) => {
             setSelected(option);
+            setCurrentPage(1);
           }}
           selected={selected}
           options={['Load', 'I/O','FS', 'Temperature'].map((value) => ({
@@ -70,7 +73,7 @@ const DeviceDetails = ({ match }) => {
           }))}
       />
 
-      <Details data={data} previousData={previousData} DetailType={selected.value} setCurrentPage={(p)=>setCurrentPage(p)}/>
+      <Details currentPage={currentPage} count={count} data={data} previousData={previousData} DetailType={selected.value} setCurrentPage={(p)=>setCurrentPage(p)}/>
 
     </div>
   );

src/services/broadCastDeviceService.js

@@ -118,14 +118,14 @@ export const connectDevice = ({
       const _disconnect = () => disconnect(mqttClient, () => dbClient.close());
       const getAllData = () => dbClient.getAll();
       const getLastData = () => dbClient.getAll({ descending: true, limit: 1 });
-      const getPageDate = (skip,limit)=> dbClient.getAll({ descending: true,skip:skip ,limit: limit });
+      const getPageData = (skip,limit)=> dbClient.getAll({ descending: true,skip:skip ,limit: limit });
       const getAllDataCount = ()=>dbClient.getAllCount();
       resolve({
         subscribe: _subscribe,
         disconnect: _disconnect,
         getAllData,
         getLastData,
-        getPageDate,
+        getPageData,
         getAllDataCount
       });
     } catch (e) {