Merge pull request #39 from SwapnilTechVariable/bug/data-table-add-node

Data table bugs fixed

Author: abhishekctv

src/components/common/items/data-table/data-table.tsx

@@ -1,4 +1,4 @@
-import { Component, Host, h, State, Prop } from '@stencil/core';
+import { Component, Host, h, State, Prop, Watch } from '@stencil/core';
 import formatter from 'format-number';
 
 const sort = (
@@ -57,6 +57,7 @@ export class DataTable {
   @State() isEditingIndex: number = -1;
   @State() editingState: { [rowColumnId: string]: { prevValue: TField; newValue: TField } } = {};
   // TODO: Need to find a way to use TColumn here
+  @State() columnNames: string[] = [];
   @Prop() columns: {
     id: number | string;
     key: string;
@@ -88,7 +89,15 @@ export class DataTable {
       cellClass?: string;
     };
   }[] = [];
+  @Watch('columns')
+  watchPropHandler(newValue: any, oldValue: any) {
+    if (newValue !== oldValue) {
+      const updatedColumns = this.columns.map(item => item.name);
+      this.columnNames = updatedColumns;
+    }
+  }
   @Prop() data: Array<any> = [];
+  @State() processedData: Array<any> = [];
   @Prop() showActions: boolean = false;
   @Prop() onEdit: (id: number | string, changes: Array<{ prevValue: number | Date | string; newValue: number | Date | string; name: string }>) => Promise<any>;
   @Prop() onDelete: (index: number, row: { [field: string]: number | Date | string }) => Promise<any>;
@@ -206,6 +215,23 @@ export class DataTable {
   handlePaginate() {
     this.onPaginate(this.currentPage, this.limit);
   }
+  dataProcessor(data) {
+    const newData = data.map(row => {
+      const processedRow = { ...row };
+
+      this.columns
+        .map(item => item.name)
+        .forEach(column => {
+          if (!Object.keys(row).includes(column)) {
+            processedRow[column] = '';
+          }
+        });
+
+      return processedRow;
+    });
+
+    return newData;
+  }
 
   render() {
     const renderAction = (row: { [field: string]: TField }, rowId: number) => {
@@ -352,13 +378,15 @@ export class DataTable {
                 </tr>
               </thead>
               <tbody class="bg-white divide-y divide-gray-200">
-                {this.data.map((row, rowId) => {
+                {this.dataProcessor(this.data).map((row, rowId) => {
                   return (
                     <tr class="hover:bg-gray-100 transition">
                       {renderAction(row, rowId)}
-                      {Object.keys(row).map((fieldKey, columnId) => {
-                        return renderRow(fieldKey, row[fieldKey], rowId, columnId);
-                      })}
+                      {this.columns
+                        .map(item => item.name)
+                        .map((fieldKey, columnId) => {
+                          return renderRow(fieldKey, row[fieldKey], rowId, columnId);
+                        })}
                     </tr>
                   );
                 })}
@@ -381,6 +409,7 @@ export class DataTable {
                 onChange={e => {
                   // @ts-expect-error
                   this.limit = e.target.value;
+                  this.currentPage = 1;
                   this.handlePaginate();
                 }}
                 class="form-select px-3 py-1.5 border-none text-inherit font-inherit text-gray-700 bg-transparent bg-clip-padding bg-no-repeat rounded transition ease-in-out focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"

src/components/editorPage/editor-res/editor-res.tsx

@@ -67,6 +67,7 @@ export class EditorRes {
     chips[id] = state.order[id] === 'desc' ? 'asc' : 'desc';
     state.order = chips;
     state.queryMode = 'read';
+    state.page = 1;
     state.refreshData();
   };
 
@@ -82,6 +83,7 @@ export class EditorRes {
 
     state.filter = chips;
     state.queryMode = 'read';
+    state.page = 1;
     state.refreshData();
   }
   toggleModalState() {

src/components/editorPage/store.ts

@@ -147,9 +147,12 @@ onChange('nodes', value => {
 
   state.columnHeaders = [...keys].map((k: string) => {
     let dataType = 'string';
-
-    value.slice(0, 5).forEach(row => {
-      dataType = typeof row[k];
+    value.every(row => {
+      if (row[k] !== undefined) {
+        dataType = typeof row[k];
+        return false;
+      }
+      return true;
     });
 
     return {

src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr" lang="en" class="dark">
+<html dir="ltr" lang="en" class="light">
 
 <head>
   <meta charset="utf-8" />
@@ -27,7 +27,7 @@
     <!-- <editor-res></editor-res> -->
     <!-- <permission-editor url="http://localhost:3000/api/permissions" rolesurl="http://localhost:3000/api/permissions/all"></permission-editor> -->
     <!-- <tabs-component></tabs-component> -->
-    <!-- <editor-page url="http://localhost:3000/api/editor"></editor-page> -->
+    <editor-page url="http://localhost:3000/api/editor"></editor-page>
     <!-- <query-logs ></query-logs> -->
     <!-- <navigators-component></navigators-component> -->
     <!-- <users-component></users-component> -->
@@ -43,7 +43,7 @@
     <!-- <basic-settings></basic-settings> -->
     <!-- <plain-button >Button</plain-button> -->
     <!-- <icon-label-submit-button width="auto" size="md" varient="contained" color="secondary" loading>Button</icon-label-submit-button> -->
-    <icon-button-basic size="sm" color="secondary" title="download"/>
+    <!-- <icon-button-basic size="sm" color="secondary" title="download"/> -->
   </fluid-container>
   </div>
 </body>