Dynamic DetailsList and others implementation

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -43,6 +43,7 @@ interface AddTableEntityPanelProps {
   // queryTablesTab: QueryTablesTab;
   tableEntityListViewModel: TableEntityListViewModel;
   cassandraApiClient: CassandraAPIDataClient;
+  reloadEntities: () => void;
 }
 
 interface EntityRowType {
@@ -62,6 +63,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   queryTablesTab,
   tableEntityListViewModel,
   cassandraApiClient,
+  reloadEntities,
 }: AddTableEntityPanelProps): JSX.Element => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [entities, setEntities] = useState<EntityRowType[]>([]);
@@ -108,9 +110,11 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
 
     const entity: Entities.ITableEntity = entityFromAttributes(entities);
     const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
+    console.log("🚀 ~ file: AddTableEntityPanel.tsx ~ line 113 ~ submit ~ newEntity", newEntity);
     await tableEntityListViewModel.addEntityToCache(newEntity);
     if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) {
-      tableEntityListViewModel.redrawTableThrottled();
+      // tableEntityListViewModel.redrawTableThrottled();
+      reloadEntities();
     }
     closeSidePanel();
   };

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -40,6 +40,8 @@ interface EditTableEntityPanelProps {
   // queryTablesTab: QueryTablesTab;
   tableEntityListViewModel: TableEntityListViewModel;
   cassandraApiClient: CassandraAPIDataClient;
+  selectedEntity: Entities.ITableEntity[];
+  reloadEntities: () => void;
 }
 
 interface EntityRowType {
@@ -60,6 +62,8 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
   queryTablesTab,
   tableEntityListViewModel,
   cassandraApiClient,
+  selectedEntity,
+  reloadEntities,
 }: EditTableEntityPanelProps): JSX.Element => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [entities, setEntities] = useState<EntityRowType[]>([]);
@@ -77,8 +81,15 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let originalDocument: { [key: string]: any } = {};
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const entityAttribute: any = tableEntityListViewModel.selected();
+    // const entityAttribute: any = tableEntityListViewModel.selected();
+    // const entityFormattedAttribute = constructDisplayedAttributes(entityAttribute[0]);
+    const entityAttribute: any = selectedEntity;
+    console.log("🚀 ~ file: EditTableEntityPanel.tsx ~ line 86 ~ useEffect ~ entityAttribute", entityAttribute);
     const entityFormattedAttribute = constructDisplayedAttributes(entityAttribute[0]);
+    console.log(
+      "🚀 ~ file: EditTableEntityPanel.tsx ~ line 88 ~ useEffect ~ entityFormattedAttribute",
+      entityFormattedAttribute
+    );
     setEntities(entityFormattedAttribute);
 
     if (userContext.apiType === "Tables") {
@@ -207,7 +218,8 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
     );
     await tableEntityListViewModel.updateCachedEntity(newEntity);
     if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) {
-      tableEntityListViewModel.redrawTableThrottled();
+      // tableEntityListViewModel.redrawTableThrottled();
+      reloadEntities();
     }
     tableEntityListViewModel.selected.removeAll();
     tableEntityListViewModel.selected.push(newEntity);

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.tsx

@@ -8,6 +8,8 @@ import { RightPaneForm, RightPaneFormProps } from "../../RightPaneForm/RightPane
 
 interface TableQuerySelectPanelProps {
   queryViewModel: QueryViewModel;
+  headers: string[];
+  getSelectMessage: (selectMessage: string) => void;
 }
 
 interface ISelectColumn {
@@ -18,7 +20,10 @@ interface ISelectColumn {
 
 export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps> = ({
   queryViewModel,
+  headers,
+  getSelectMessage,
 }: TableQuerySelectPanelProps): JSX.Element => {
+  console.log("🚀 ~ file: TableQuerySelectPanel.tsx ~ line 22 ~ queryViewModel", queryViewModel);
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
 
   const [columnOptions, setColumnOptions] = useState<ISelectColumn[]>([
@@ -29,6 +34,11 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   const onSubmit = (): void => {
     queryViewModel.selectText(getParameters());
     queryViewModel.getSelectMessage();
+    console.log(
+      "🚀 ~ file: TableQuerySelectPanel.tsx ~ line 50 ~ onSubmit ~ queryViewModel.selectMessage()",
+      queryViewModel.selectMessage()
+    );
+    getSelectMessage(queryViewModel.selectMessage());
     closeSidePanel();
   };
 
@@ -52,7 +62,9 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   };
 
   useEffect(() => {
-    queryViewModel && setTableColumns(queryViewModel.columnOptions());
+    // queryViewModel && setTableColumns(queryViewModel.columnOptions());
+    headers && setTableColumns(headers);
+    console.log("🚀 ~ file: TableQuerySelectPanel.tsx ~ line 67 ~ useEffect ~ headers", headers);
   }, []);
 
   const setTableColumns = (columnNames: string[]): void => {

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -195,7 +195,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
         if (columnSortOrder && (!this.cache.sortOrder || !_.isEqual(this.cache.sortOrder, columnSortOrder))) {
           this.sortColumns(columnSortOrder, oSettings);
         }
-        this.renderPage(this.tablePageStartIndex, tablePageSize);
+        // this.renderPage(this.tablePageStartIndex, tablePageSize);
+        this.renderPage(0, 100);
         if (
           !this.allDownloaded &&
           this.tablePageStartIndex > 0 && // This is a case now that we can hit this as we re-construct table when we update column
@@ -234,19 +235,19 @@ export default class TableEntityListViewModel extends DataTableViewModel {
     }
 
     // Find the first item which is greater than the added entity.
-    var oSettings: any = (<any>this.table).context[0];
+    // var oSettings: any = (<any>this.table).context[0];
-    var index: number = _.findIndex(this.cache.data, (data: any) => {
+    // var index: number = _.findIndex(this.cache.data, (data: any) => {
-      return this.dataComparer(data, entity, this.cache.sortOrder, oSettings) > 0;
+    //   return this.dataComparer(data, entity, this.cache.sortOrder, oSettings) > 0;
-    });
+    // });
 
     // If no such item, then insert at last.
-    var insertIndex: number = Utilities.ensureBetweenBounds(
+    // var insertIndex: number = Utilities.ensureBetweenBounds(
-      index < 0 ? this.cache.length : index,
+    //   index < 0 ? this.cache.length : index,
-      0,
+    //   0,
-      this.cache.length
+    //   this.cache.length
-    );
+    // );
 
-    this.cache.data.splice(insertIndex, 0, entity);
+    this.cache.data.splice(this.cache.length, 0, entity);
 
     // Finally, select newly added entity
     this.clearSelection();
@@ -297,12 +298,12 @@ export default class TableEntityListViewModel extends DataTableViewModel {
     this.clearSelection();
 
     // Show last available page if there is not enough data
-    var pageInfo = this.table.page.info();
+    // var pageInfo = this.table.page.info();
-    if (this.cache.length <= pageInfo.start) {
+    // if (this.cache.length <= pageInfo.start) {
-      var availablePages = Math.ceil(this.cache.length / pageInfo.length);
+    //   var availablePages = Math.ceil(this.cache.length / pageInfo.length);
-      var pageToShow = availablePages > 0 ? availablePages - 1 : 0;
+    //   var pageToShow = availablePages > 0 ? availablePages - 1 : 0;
-      this.table.page(pageToShow);
+    //   this.table.page(pageToShow);
-    }
+    // }
 
     return Q.resolve(null);
   }

src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx

@@ -49,6 +49,10 @@ export default class QueryViewModel {
     this.queryTablesTab = queryTablesTab;
     this.id = `queryViewModel${this.queryTablesTab.tabId}`;
     this._tableEntityListViewModel = queryTablesTab.tableEntityListViewModel;
+    console.log(
+      "🚀 ~ file: QueryViewModel.tsx ~ line 52 ~ QueryViewModel ~ constructor ~ this._tableEntityListViewModel",
+      this._tableEntityListViewModel
+    );
 
     this.queryTextIsReadOnly = ko.computed<boolean>(() => {
       return userContext.apiType !== "Cassandra";
@@ -96,6 +100,7 @@ export default class QueryViewModel {
   };
 
   public selectEditor = (): void => {
+    console.log("🚀 ~ file: QueryViewModel.tsx ~ line 99 ~ QueryViewModel ~ //constructor ~ selectEditor");
     this.setFilter();
     if (!this.isEditorActive()) {
       this.unchangedText(this.queryText());
@@ -199,13 +204,24 @@ export default class QueryViewModel {
     return this._tableEntityListViewModel.reloadTable(false);
   };
 
-  public selectQueryOptions() {
+  public selectQueryOptions(headers: string[], getSelectMessage: (selectMessage: string) => void): void {
-    useSidePanel.getState().openSidePanel("Select Column", <TableQuerySelectPanel queryViewModel={this} />);
+    this.columnOptions(headers);
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Select Column",
+        <TableQuerySelectPanel queryViewModel={this} headers={headers} getSelectMessage={getSelectMessage} />
+      );
   }
 
-  public onselectQueryOptionsKeyDown = (source: string, event: KeyboardEvent): boolean => {
+  public onselectQueryOptionsKeyDown = (
+    source: string,
+    event: KeyboardEvent,
+    headers: string[],
+    getSelectMessage: (selectMessage: string) => void
+  ): boolean => {
     if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.selectQueryOptions();
+      this.selectQueryOptions(headers, getSelectMessage);
       event.stopPropagation();
       return false;
     }

src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx

@@ -1,4 +1,5 @@
-import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "@fluentui/react";
+import { DetailsList, DetailsListLayoutMode, IColumn, Selection, SelectionMode } from "@fluentui/react";
+import { Dropdown, IDropdownOption, IDropdownStyles } from "@fluentui/react/lib/Dropdown";
 import * as ko from "knockout";
 import React, { Component } from "react";
 import QueryInformation from "../../../../images//QueryBuilder/QueryInformation_16x.png";
@@ -7,6 +8,7 @@ import AddEntityIcon from "../../../../images/AddEntity.svg";
 import AndOr from "../../../../images/And-Or.svg";
 import DeleteEntitiesIcon from "../../../../images/DeleteEntities.svg";
 import EditEntityIcon from "../../../../images/Edit-entity.svg";
+import EntityCancel from "../../../../images/Entity_cancel.svg";
 import ErrorRed from "../../../../images/error_red.svg";
 import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
 import QueryBuilderIcon from "../../../../images/Query-Builder.svg";
@@ -24,6 +26,7 @@ import { AddTableEntityPanel } from "../../Panes/Tables/AddTableEntityPanel";
 import { EditTableEntityPanel } from "../../Panes/Tables/EditTableEntityPanel";
 import TableCommands from "../../Tables/DataTable/TableCommands";
 import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
+import * as Entities from "../../Tables/Entities";
 import QueryViewModel from "../../Tables/QueryBuilder/QueryViewModel";
 import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataClient";
 import TabsBase from "../TabsBase";
@@ -66,13 +69,21 @@ interface IQueryTablesTabComponentStates {
   columns: IColumn[];
   items: IDocument[];
   isExpanded: boolean;
+  isEditorActive: boolean;
+  selectedItems: Entities.ITableEntity[];
+  isValue: boolean;
+  isTimestamp: boolean;
+  isCustomLastTimestamp: boolean;
+  isCustomRangeTimestamp: boolean;
+  operators: string[];
+  selectMessage: string;
 }
 
 class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, IQueryTablesTabComponentStates> {
   // public readonly html = template;
   public collection: ViewModels.Collection;
   // public tableEntityListViewModel = ko.observable<TableEntityListViewModel>();
-  // public queryViewModel = ko.observable<QueryViewModel>();
+  public _queryViewModel: QueryViewModel;
   public tableCommands: TableCommands;
   public tableDataClient: TableDataClient;
 
@@ -95,10 +106,15 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
   public tableEntityListViewModel1: TableEntityListViewModel;
   public tableEntityListViewModel2 = ko.observable<TableEntityListViewModel>();
   public allItems: IDocument[];
-  // public columns: IColumn[];
+  public columns: IColumn[];
+  public selection: Selection;
+  public options: IDropdownOption[] = [];
+  public dropdownStyles: Partial<IDropdownStyles>;
+
   constructor(props: IQueryTablesTabComponentProps) {
     super(props);
-    // this.columns = [];
+    this.columns = [];
+
     const columns: IColumn[] = [
       {
         key: "column1",
@@ -130,21 +146,19 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     this.tableCommands = new TableCommands(this.container);
     this.tableDataClient = this.container.tableDataClient;
     this.tableEntityListViewModel2(new TableEntityListViewModel(this.tableCommands, props.queryTablesTab));
-    const sampleQuerySubscription = this.tableEntityListViewModel2().items.subscribe(() => {
+    // const sampleQuerySubscription = this.tableEntityListViewModel2().items.subscribe(() => {
-      if (this.tableEntityListViewModel2().items().length > 0 && userContext.apiType === "Tables") {
+    //   if (this.tableEntityListViewModel2().items().length > 0 && userContext.apiType === "Tables") {
-        // this.queryViewModel().queryBuilderViewModel().setExample();
+    //     // this.queryViewModel().queryBuilderViewModel().setExample();
-        console.log(
+    //     console.log(
-          "🚀 ~ file: QueryTablesTab.tsx ~ line 55 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.queryViewModel().queryBuilderViewModel().setExample()"
+    //       "🚀 ~ file: QueryTablesTab.tsx ~ line 55 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.queryViewModel().queryBuilderViewModel().setExample()"
-          // this.queryViewModel().queryBuilderViewModel().setExample()
+    //       // this.queryViewModel().queryBuilderViewModel().setExample()
-        );
+    //     );
-      }
+    //   }
-      sampleQuerySubscription.dispose();
+    //   sampleQuerySubscription.dispose();
-    });
+    // });
-    console.log(
+
-      "🚀 ~ file: QueryTablesTab.tsx ~ line 54 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.tableEntityListViewModel().items().length",
-      this.tableEntityListViewModel2().items()
-    );
     this.tableEntityListViewModel1 = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab);
+    // this._queryViewModel = new QueryViewModel(this.props.queryTablesTab);
     this.state = {
       tableEntityListViewModel: new TableEntityListViewModel(this.tableCommands, props.queryTablesTab),
 
@@ -186,6 +200,13 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       columns: columns,
       items: [],
       isExpanded: false,
+      isEditorActive: false,
+      selectedItems: [],
+      isValue: false,
+      isTimestamp: false,
+      isCustomLastTimestamp: false,
+      isCustomRangeTimestamp: false,
+      operators: [],
     };
     this.state.tableEntityListViewModel.queryTablesTab = this.props.queryTablesTab;
     // console.log(
@@ -196,7 +217,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 85 ~ QueryTablesTabComponent ~ constructor ~ this.state",
       this.state,
       ", ",
-      this.state.queryViewModel.queryBuilderViewModel().andLabel,
+      this.state.queryViewModel.queryBuilderViewModel(),
       ", ",
       this.state.queryViewModel.queryBuilderViewModel().clauseArray(),
       ", ",
@@ -212,44 +233,49 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     this.dataTypeLabel = this.state.queryViewModel.queryBuilderViewModel().dataTypeLabel;
     this.operatorLabel = this.state.queryViewModel.queryBuilderViewModel().operatorLabel;
     this.valueLabel = this.state.queryViewModel.queryBuilderViewModel().valueLabel;
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 232 ~ QueryTablesTabComponent ~ constructor ~ this.state.queryViewModel.queryBuilderViewModel().operators",
+      this.state.queryViewModel.queryBuilderViewModel().operators()
+    );
 
     useCommandBar.getState().setContextButtons(this.getTabsButtons());
-    // this.state.tableEntityListViewModel.items.subscribe(() => {
+
-    //   console.log(
-    //     "🚀 ~ file: QueryTablesTab.tsx ~ line 54 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.tableEntityListViewModel().items().length",
-    //     this.state.tableEntityListViewModel.items()
-    //   );
-    //   if (this.state.tableEntityListViewModel.items().length > 0 && userContext.apiType === "Tables") {
-    //     // this.state.queryViewModel.queryBuilderViewModel.setExample();
-    //     // console.log(
-    //     //   "🚀 ~ file: QueryTablesTab.tsx ~ line 55 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.queryViewModel().queryBuilderViewModel().setExample()",
-    //     //   this.state.queryViewModel.queryBuilderViewModel.setExample()
-    //     // );
-    //   }
-    // });
     // this.test();
-    // this.state.tableEntityListViewModel.renderNextPageAndupdateCache();
+    this.state.queryViewModel
-    // setTimeout(() => {
+      .queryBuilderViewModel()
-    //   console.log("items > ", this.state.tableEntityListViewModel.cache.data);
+      .operators()
-    //   console.log("items > ", this.state.tableEntityListViewModel.items());
+      .map((operator) => {
-    //   console.log("items1 > ", this.state.tableEntityListViewModel.items1);
+        this.options.push({
-    //   console.log("items1 > simple > ", this.tableEntityListViewModel1.items1);
+          key: operator,
-    //   this.allItems = this.generateDetailsList();
+          text: operator,
-    //   this.setState({
+        });
-    //     items: this.allItems,
+      });
-    //   });
+    // this.options = [
-    //   // this.state = {
+    //   { key: "fruitsHeader", text: "Fruits", itemType: DropdownMenuItemType.Header },
-    //   //   items: this.generateDetailsList()
+    //   { key: "apple", text: "Apple" },
-    //   // }
+    //   { key: "banana", text: "Banana" },
-    // }, 10000);
+    //   { key: "orange", text: "Orange", disabled: true },
-    //   this.props.queryTablesTab.container.tableDataClient.queryDocuments(
+    //   { key: "grape", text: "Grape" },
-    //     this.props.queryTablesTab.collection,
+    //   { key: "divider_1", text: "-", itemType: DropdownMenuItemType.Divider },
-    //     "SELECT * FROM c",
+    //   { key: "vegetablesHeader", text: "Vegetables", itemType: DropdownMenuItemType.Header },
-    //     true
+    //   { key: "broccoli", text: "Broccoli" },
-    //   );
+    //   { key: "carrot", text: "Carrot" },
+    //   { key: "lettuce", text: "Lettuce" },
+    // ];
+
+    this.dropdownStyles = {
+      dropdown: { width: 300 },
+    };
+
+    this.selection = new Selection({
+      onSelectionChanged: this.onItemsSelectionChanged,
+    });
+
     this.buildCommandBarOptions();
   }
 
+  /****************** Constructor Ends */
+
   async componentDidMount(): Promise<void> {
     const abc = await this.state.tableEntityListViewModel.renderNextPageAndupdateCache();
     console.log(
@@ -261,17 +287,38 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       console.log("items > ", this.state.tableEntityListViewModel.items());
       console.log("items1 > ", this.state.tableEntityListViewModel.headers);
       console.log("items1 > simple > ", this.tableEntityListViewModel1.items1);
-      // this.state.tableEntityListViewModel.headers.map(header => {
+      this.columns = [];
-
+      this.state.tableEntityListViewModel.headers.map((header) => {
-      // })
+        this.columns.push({
+          key: header,
+          name: header,
+          minWidth: 100,
+          maxWidth: 200,
+          data: "string",
+          fieldName: header,
+          isResizable: true,
+          isSorted: true,
+          isSortedDescending: false,
+          sortAscendingAriaLabel: "Sorted A to Z",
+          sortDescendingAriaLabel: "Sorted Z to A",
+        });
+      });
+      this.setState({
+        columns: this.columns,
+        operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
+        // isValue:
+      });
+      setTimeout(() => {
+        console.log(
+          "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 248 ~ QueryTablesTabComponent ~ setTimeout ~ columns",
+          this.state.columns
+        );
+      }, 1000);
       this.allItems = this.generateDetailsList();
       this.setState({
         items: this.allItems,
       });
-      // this.state = {
+    }, 5000);
-      //   items: this.generateDetailsList()
-      // }
-    }, 10000);
   }
 
   // public async test(): Promise<void> {
@@ -281,6 +328,67 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
   //   console.log("items > ", this.state.tableEntityListViewModel.items());
   // }
 
+  public getSelectMessage(selectMessage: string): void {
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 332 ~ QueryTablesTabComponent ~ getSelectMessage ~ selectMessage",
+      selectMessage
+    );
+    this.setState({
+      selectMessage: selectMessage,
+    });
+  }
+
+  private onItemsSelectionChanged = () => {
+    // console.log(
+    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 280 ~ QueryTablesTabComponent ~ onItemsSelectionChanged",
+    //   Object.values(this.selection.getSelection()[0])[2],
+    //   ", ",
+    //   this.selection.getSelection()[0]["Timestamp"]
+    // );
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 338 ~ QueryTablesTabComponent ~ this.selection.getSelection().length",
+      this.selection.getSelection().length
+    );
+    if (this.selection.getSelection().length > 0) {
+      const a = this.state.tableEntityListViewModel
+        .items()
+        .filter((item) => item["Timestamp"]._ === Object.values(this.selection.getSelection()[0])[2]);
+      console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ a", a);
+
+      this.setState({
+        // selectionCount: this._selection.getSelectedCount(),
+        selectedItems: a,
+      });
+    }
+  };
+
+  public reloadEntities(): void {
+    this.componentDidMount();
+    // console.log(
+    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 349 ~ QueryTablesTabComponent ~ addEntity ~ addedEntity",
+    //   addedEntity,
+    //   ", ",
+    //   this.state.tableEntityListViewModel.items()
+    // );
+    // const newItems: any[] = this.state.items;
+    // newItems.push(addedEntity);
+    // this.setState({
+    //   items: newItems,
+    // });
+    // console.log(
+    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 358 ~ QueryTablesTabComponent ~ addEntity ~ items",
+    //   this.state.items
+    // );
+    // this.allItems = this.generateDetailsList();
+    // console.log(
+    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 365 ~ QueryTablesTabComponent ~ addEntity ~ this.allItems",
+    //   this.allItems
+    // );
+    // this.setState({
+    //   items: this.allItems,
+    // });
+  }
+
   public onAddEntityClick = (): void => {
     useSidePanel
       .getState()
@@ -291,6 +399,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
           queryTablesTab={this.props.queryTablesTab}
           tableEntityListViewModel={this.state.tableEntityListViewModel}
           cassandraApiClient={new CassandraAPIDataClient()}
+          reloadEntities={() => this.reloadEntities()}
         />
       );
   };
@@ -305,12 +414,35 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
           queryTablesTab={this.props.queryTablesTab}
           tableEntityListViewModel={this.state.tableEntityListViewModel}
           cassandraApiClient={new CassandraAPIDataClient()}
+          selectedEntity={this.state.selectedItems}
+          reloadEntities={() => this.reloadEntities()}
         />
       );
   };
 
   public onDeleteEntityClick = (): void => {
-    this.tableCommands.deleteEntitiesCommand(this.state.tableEntityListViewModel);
+    // this.tableCommands.deleteEntitiesCommand(this.state.tableEntityListViewModel);
+    // if (!viewModel) {
+    //   return null; // Error
+    // }
+    if (!this.state.selectedItems) {
+      return undefined; // Error
+    }
+    const entitiesToDelete: Entities.ITableEntity[] = this.state.selectedItems;
+    let deleteMessage = "Are you sure you want to delete the selected entities?";
+    if (userContext.apiType === "Cassandra") {
+      deleteMessage = "Are you sure you want to delete the selected rows?";
+    }
+    if (window.confirm(deleteMessage)) {
+      this.state.tableEntityListViewModel.queryTablesTab.container.tableDataClient
+        .deleteDocuments(this.state.tableEntityListViewModel.queryTablesTab.collection, entitiesToDelete)
+        .then((results: any) => {
+          return this.state.tableEntityListViewModel.removeEntitiesFromCache(entitiesToDelete).then(() => {
+            // this.state.tableEntityListViewModel.redrawTableThrottled();
+            this.componentDidMount();
+          });
+        });
+    }
   };
 
   protected getTabsButtons(): CommandButtonComponentProps[] {
@@ -320,7 +452,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       buttons.push({
         iconSrc: QueryBuilderIcon,
         iconAlt: label,
-        onCommandClick: () => this.state.queryViewModel.selectHelper(),
+        onCommandClick: () => this.selectHelper(),
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
@@ -334,7 +466,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       buttons.push({
         iconSrc: QueryTextIcon,
         iconAlt: label,
-        onCommandClick: () => this.state.queryViewModel.selectEditor(),
+        onCommandClick: () => this.selectEditor(),
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
@@ -402,15 +534,27 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
   }
 
   public generateDetailsList(): IDocument[] {
-    const items: IDocument[] = [];
+    // const items: IDocument[] = [];
+    //eslint-disable-next-line
+    const items: any[] = [];
+    //eslint-disable-next-line
+    let obj: any = undefined;
+    // const newColumns = [];
+    // const compare = ["PartitionKey", "RowKey", "Timestamp", "_rid", "_self", "_etag", "_attachments"];
 
     this.state.tableEntityListViewModel.items().map((item) => {
       console.log("generateDetailsList > ", item["PartitionKey"]._);
-      items.push({
+      this.columns.map((col) => {
-        partitionKey: item["PartitionKey"]._,
+        // console.log(
-        rowKey: item["RowKey"]._,
+        //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 403 ~ QueryTablesTabComponent ~ this.columns.map ~ col.name",
-        timeStamp: item["Timestamp"]._,
+        //   col.name
+        // );
+        if (item[col.name]) {
+          console.log("Data > ", item[col.name]._);
+          obj = { ...obj, ...{ [col.name]: item[col.name]._ } };
+        }
       });
+      items.push(obj);
     });
     console.log(
       "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items",
@@ -419,7 +563,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     return items;
   }
 
-  toggleAdvancedOptions(): void {
+  public toggleAdvancedOptions(): void {
     // console.log("toggleAdvancedOptions!");
     this.setState({
       isExpanded: !this.state.isExpanded,
@@ -427,6 +571,20 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     this.state.queryViewModel.toggleAdvancedOptions();
   }
 
+  public selectEditor(): void {
+    this.setState({
+      isEditorActive: true,
+      isHelperActive: false,
+    });
+  }
+
+  public selectHelper(): void {
+    this.setState({
+      isHelperActive: true,
+      isEditorActive: false,
+    });
+  }
+
   render(): JSX.Element {
     useCommandBar.getState().setContextButtons(this.getTabsButtons());
 
@@ -443,7 +601,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
               </div>
             )}
           </div>
-          {this.state.queryViewModel.isEditorActive() && (
+          {this.state.isEditorActive && (
             <div className="query-editor-panel">
               <div>
                 <textarea
@@ -459,7 +617,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
               </div>
             </div>
           )}
-          {this.state.queryViewModel.isHelperActive() && (
+          {this.state.isHelperActive && (
             <div style={{ paddingLeft: "13px" }}>
               <div className="clause-table">
                 <div className="scroll-box scrollable" id="scroll">
@@ -492,7 +650,108 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
                         </th>
                       </tr>
                     </thead>
-                    <tbody></tbody>
+                    <tbody>
+                      <tr className="clause-table-row">
+                        {/* Add and Cancel */}
+                        <td className="clause-table-cell action-column">
+                          <span
+                            className="entity-Add-Cancel"
+                            role="button"
+                            tabIndex={0}
+                            // data-bind="click: $parent.addClauseIndex.bind($data, $index()), event: { keydown: $parent.onAddClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.insertNewFilterLine}"
+                          >
+                            <img className="querybuilder-addpropertyImg" src={AddProperty} alt="Add clause" />
+                          </span>
+                          <span
+                            className="entity-Add-Cancel"
+                            role="button"
+                            tabIndex={0}
+                            // data-bind="hasFocus: isDeleteButtonFocused, click: $parent.deleteClause.bind($data, $index()), event: { keydown: $parent.onDeleteClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.removeThisFilterLine}"
+                          >
+                            <img className="querybuilder-cancelImg" src={EntityCancel} alt="Delete clause" />
+                          </span>
+                        </td>
+                        {/* Group and unGroup */}
+                        <td className="clause-table-cell group-control-column">
+                          <input type="checkbox" aria-label="And/Or" data-bind="checked: checkedForGrouping" />
+                        </td>
+                        <td>
+                          <table className="group-indicator-table">
+                            <tbody>
+                              <tr data-bind="template: { name: 'groupIndicator-template', foreach: $parent.getClauseGroupViewModels($data), as: 'gi' }"></tr>
+                            </tbody>
+                          </table>
+                        </td>
+                        {/* AndOr */}
+                        <td className="clause-table-cell and-or-column">
+                          <select
+                            className="clause-table-field and-or-column"
+                            aria-label="and_or"
+                            // data-bind="hasFocus: isAndOrFocused, options: $parent.clauseRules, value: and_or, visible: canAnd, attr:{ 'aria-label': and_or }"
+                          >
+                            {this.state.queryViewModel
+                              .queryBuilderViewModel()
+                              .clauseRules()
+                              .map((clause) => {
+                                <option>{clause}</option>;
+                              })}
+                          </select>
+                        </td>
+                        {/* Field */}
+                        <td className="clause-table-cell field-column" data-bind="click: $parent.updateColumnOptions">
+                          <select
+                            className="clause-table-field field-column"
+                            data-bind="options: $parent.columnOptions, value: field, attr:{ 'aria-label': field }"
+                          ></select>
+                        </td>
+                        {/* Type */}
+                        <td className="clause-table-cell type-column">
+                          <select
+                            className="clause-table-field type-column"
+                            data-bind="
+                  options: $parent.edmTypes,
+                  enable: isTypeEditable,
+                  value: type,
+                  css: {'query-builder-isDisabled': !isTypeEditable()},
+                  attr: { 'aria-label': type }"
+                          ></select>
+                        </td>
+                        {/* Operator */}
+                        <td className="clause-table-cell operator-column">
+                          <Dropdown
+                            placeholder="Select an option"
+                            // label="Basic uncontrolled example"
+                            options={this.options}
+                            styles={this.dropdownStyles}
+                          />
+                        </td>
+                        {/* Value */}
+                        <td className="clause-table-cell value-column">
+                          <input
+                            type="text"
+                            className="clause-table-field value-column"
+                            // type="search"
+                            data-bind="textInput: value, attr: {'aria-label': $parent.valueLabel}"
+                          />
+
+                          <select
+                            className="clause-table-field time-column"
+                            data-bind="options: $parent.timeOptions, value: timeValue"
+                          ></select>
+
+                          <input
+                            className="clause-table-field time-column"
+                            data-bind="value: customTimeValue, click: customTimestampDialog"
+                          />
+                          <input
+                            className="clause-table-field time-column"
+                            type="datetime-local"
+                            step="1"
+                            data-bind="value: customTimeValue"
+                          />
+                        </td>
+                      </tr>
+                    </tbody>
                   </table>
                 </div>
                 <div
@@ -570,18 +829,23 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
                 </div>
                 <div className="select">
                   <span> Select fields for query: </span>
-                  {this.state.queryViewModel.isSelected() && (
+                  {/* {this.state.queryViewModel.isSelected() && ( */}
                   <div>
                     <img className="advanced-options-icon" src={QueryInformation} />
-                      <span className="select-options-text">{this.state.queryViewModel.selectMessage()}</span>
+                    <span className="select-options-text">{this.state.selectMessage}</span>
                   </div>
-                  )}
+                  {/* )} */}
                   <a
                     className="select-options-link"
                     //   data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
                     tabIndex={0}
                     role="link"
-                    onClick={() => this.state.queryViewModel.selectQueryOptions()}
+                    onClick={() =>
+                      this.state.queryViewModel.selectQueryOptions(
+                        this.state.tableEntityListViewModel.headers,
+                        (selectMessage: string) => this.getSelectMessage(selectMessage)
+                      )
+                    }
                   >
                     <span>Choose Columns... </span>
                   </a>
@@ -595,9 +859,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
           <DetailsList
             items={this.state.items}
             columns={this.state.columns}
-            selectionMode={SelectionMode.none}
+            selectionMode={SelectionMode.single}
             layoutMode={DetailsListLayoutMode.justified}
             compact={true}
+            selection={this.selection}
           />
         </div>
       </div>