Created header for common functionalities in Table Widget (#12)

Co-authored-by: Arpit Mohan <me@arpitmohan.com>

app/client/src/components/designSystems/appsmith/ReactTableComponent.tsx

@@ -11,6 +11,7 @@ interface ReactTableComponentState {
   pageSize: number;
   action: string;
   columnName: string;
+  isLoading: boolean;
 }
 
 export interface ReactTableColumnProps {
@@ -45,6 +46,7 @@ interface ReactTableComponentProps {
   widgetId: string;
   isDisabled?: boolean;
   isVisible?: boolean;
+  isLoading: boolean;
   renderMode: RenderMode;
   width: number;
   height: number;
@@ -91,6 +93,7 @@ export class ReactTableComponent extends React.Component<
       action: "",
       columnName: "",
       pageSize: props.pageSize,
+      isLoading: props.isLoading,
     };
   }
 
@@ -102,6 +105,9 @@ export class ReactTableComponent extends React.Component<
     if (this.props.pageSize !== prevProps.pageSize) {
       this.setState({ pageSize: this.props.pageSize });
     }
+    if (this.props.isLoading !== prevProps.isLoading) {
+      this.setState({ isLoading: this.props.isLoading });
+    }
     this.mountEvents();
   }
 
@@ -461,6 +467,7 @@ export class ReactTableComponent extends React.Component<
     const columns = this.getTableColumns();
     return (
       <Table
+        isLoading={this.state.isLoading}
         width={this.props.width}
         height={this.props.height}
         pageSize={this.state.pageSize || 1}

app/client/src/components/designSystems/appsmith/Table.tsx

@@ -6,23 +6,22 @@ import {
   useResizeColumns,
   useRowSelect,
 } from "react-table";
-import { Icon, InputGroup } from "@blueprintjs/core";
-import {
-  TableWrapper,
-  PaginationWrapper,
-  PaginationItemWrapper,
-} from "./TableStyledWrappers";
+import { InputGroup } from "@blueprintjs/core";
+import { TableWrapper } from "./TableStyledWrappers";
 import {
   ReactTableColumnProps,
   ColumnMenuOptionProps,
 } from "./ReactTableComponent";
 import { TableColumnMenuPopup } from "./TableColumnMenu";
+import TableHeader from "./TableHeader";
+import { Classes } from "@blueprintjs/core";
 
 interface TableProps {
   width: number;
   height: number;
   pageSize: number;
   widgetId: string;
+  isLoading: boolean;
   columns: ReactTableColumnProps[];
   data: object[];
   showMenu: (columnIndex: number) => void;
@@ -100,7 +99,17 @@ export const Table = (props: TableProps) => {
       height={props.height}
       id={`table${props.widgetId}`}
     >
-      <div className="tableWrap">
+      <TableHeader
+        updatePageNo={props.updatePageNo}
+        nextPageClick={props.nextPageClick}
+        prevPageClick={props.prevPageClick}
+        pageNo={props.pageNo}
+        pageCount={pageCount}
+        currentPageIndex={currentPageIndex}
+        pageOptions={pageOptions}
+        serverSidePaginationEnabled={props.serverSidePaginationEnabled}
+      />
+      <div className={props.isLoading ? Classes.SKELETON : "tableWrap"}>
         <div {...getTableProps()} className="table">
           <div onMouseOver={props.disableDrag} onMouseLeave={props.enableDrag}>
             {headerGroups.map((headerGroup: any, index: number) => (
@@ -220,66 +229,6 @@ export const Table = (props: TableProps) => {
           </div>
         </div>
       </div>
-      {props.serverSidePaginationEnabled && (
-        <PaginationWrapper>
-          <PaginationItemWrapper
-            disabled={false}
-            onClick={() => {
-              props.prevPageClick();
-            }}
-          >
-            <Icon icon="chevron-left" iconSize={16} color="#A1ACB3" />
-          </PaginationItemWrapper>
-          <PaginationItemWrapper selected className="page-item">
-            {props.pageNo + 1}
-          </PaginationItemWrapper>
-          <PaginationItemWrapper
-            disabled={false}
-            onClick={() => {
-              props.nextPageClick();
-            }}
-          >
-            <Icon icon="chevron-right" iconSize={16} color="#A1ACB3" />
-          </PaginationItemWrapper>
-        </PaginationWrapper>
-      )}
-      {!props.serverSidePaginationEnabled && (
-        <PaginationWrapper>
-          <PaginationItemWrapper
-            disabled={currentPageIndex === 0}
-            onClick={() => {
-              const pageNo = currentPageIndex > 0 ? currentPageIndex - 1 : 0;
-              props.updatePageNo(pageNo + 1);
-            }}
-          >
-            <Icon icon="chevron-left" iconSize={16} color="#A1ACB3" />
-          </PaginationItemWrapper>
-          {pageOptions.map((pageNumber: number, index: number) => {
-            return (
-              <PaginationItemWrapper
-                key={index}
-                selected={pageNumber === currentPageIndex}
-                onClick={() => {
-                  props.updatePageNo(pageNumber + 1);
-                }}
-                className="page-item"
-              >
-                {index + 1}
-              </PaginationItemWrapper>
-            );
-          })}
-          <PaginationItemWrapper
-            disabled={currentPageIndex === pageCount - 1}
-            onClick={() => {
-              const pageNo =
-                currentPageIndex < pageCount - 1 ? currentPageIndex + 1 : 0;
-              props.updatePageNo(pageNo + 1);
-            }}
-          >
-            <Icon icon="chevron-right" iconSize={16} color="#A1ACB3" />
-          </PaginationItemWrapper>
-        </PaginationWrapper>
-      )}
     </TableWrapper>
   );
 };

app/client/src/components/designSystems/appsmith/TableHeader.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  PaginationWrapper,
+  TableHeaderWrapper,
+  PaginationItemWrapper,
+} from "./TableStyledWrappers";
+import { Icon } from "@blueprintjs/core";
+
+interface TableHeaderProps {
+  updatePageNo: Function;
+  nextPageClick: () => void;
+  prevPageClick: () => void;
+  pageNo: number;
+  pageCount: number;
+  currentPageIndex: number;
+  pageOptions: number[];
+  serverSidePaginationEnabled: boolean;
+}
+
+const TableHeader = (props: TableHeaderProps) => {
+  return (
+    <TableHeaderWrapper>
+      {props.serverSidePaginationEnabled && (
+        <PaginationWrapper>
+          <PaginationItemWrapper
+            disabled={false}
+            onClick={() => {
+              props.prevPageClick();
+            }}
+          >
+            <Icon icon="chevron-left" iconSize={16} color="#A1ACB3" />
+          </PaginationItemWrapper>
+          <PaginationItemWrapper selected className="page-item">
+            {props.pageNo + 1}
+          </PaginationItemWrapper>
+          <PaginationItemWrapper
+            disabled={false}
+            onClick={() => {
+              props.nextPageClick();
+            }}
+          >
+            <Icon icon="chevron-right" iconSize={16} color="#A1ACB3" />
+          </PaginationItemWrapper>
+        </PaginationWrapper>
+      )}
+      {!props.serverSidePaginationEnabled && (
+        <PaginationWrapper>
+          <PaginationItemWrapper
+            disabled={props.currentPageIndex === 0}
+            onClick={() => {
+              const pageNo =
+                props.currentPageIndex > 0 ? props.currentPageIndex - 1 : 0;
+              props.updatePageNo(pageNo + 1);
+            }}
+          >
+            <Icon icon="chevron-left" iconSize={16} color="#A1ACB3" />
+          </PaginationItemWrapper>
+          {props.pageOptions.map((pageNumber: number, index: number) => {
+            return (
+              <PaginationItemWrapper
+                key={index}
+                selected={pageNumber === props.currentPageIndex}
+                onClick={() => {
+                  props.updatePageNo(pageNumber + 1);
+                }}
+                className="page-item"
+              >
+                {index + 1}
+              </PaginationItemWrapper>
+            );
+          })}
+          <PaginationItemWrapper
+            disabled={props.currentPageIndex === props.pageCount - 1}
+            onClick={() => {
+              const pageNo =
+                props.currentPageIndex < props.pageCount - 1
+                  ? props.currentPageIndex + 1
+                  : 0;
+              props.updatePageNo(pageNo + 1);
+            }}
+          >
+            <Icon icon="chevron-right" iconSize={16} color="#A1ACB3" />
+          </PaginationItemWrapper>
+        </PaginationWrapper>
+      )}
+    </TableHeaderWrapper>
+  );
+};
+
+export default TableHeader;

app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx

@@ -255,3 +255,10 @@ export const CellWrapper = styled.div<{ isHidden: boolean }>`
     }
   }
 `;
+
+export const TableHeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid ${Colors.GEYSER_LIGHT};
+`;

app/client/src/widgets/TableWidget.tsx

@@ -109,57 +109,56 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     // /*
     return (
       <Suspense fallback={<Skeleton />}>
-        <div className={this.props.isLoading ? Classes.SKELETON : ""}>
-          <ReactTableComponent
-            height={componentHeight}
-            width={componentWidth}
-            tableData={tableData}
-            widgetId={this.props.widgetId}
-            renderMode={this.props.renderMode}
-            hiddenColumns={hiddenColumns}
-            columnActions={this.props.columnActions}
-            columnNameMap={this.props.columnNameMap}
-            columnTypeMap={this.props.columnTypeMap}
-            columnOrder={this.props.columnOrder}
-            pageSize={pageSize}
-            onCommandClick={this.onCommandClick}
-            selectedRowIndex={
-              this.props.selectedRowIndex === undefined
-                ? -1
-                : this.props.selectedRowIndex
-            }
-            serverSidePaginationEnabled={serverSidePaginationEnabled}
-            onRowClick={this.handleRowClick}
-            pageNo={pageNo}
-            nextPageClick={this.handleNextPageClick}
-            prevPageClick={this.handlePrevPageClick}
-            updatePageNo={(pageNo: number) => {
-              super.updateWidgetMetaProperty("pageNo", pageNo);
-            }}
-            updateHiddenColumns={(hiddenColumns?: string[]) => {
-              super.updateWidgetProperty("hiddenColumns", hiddenColumns);
-            }}
-            updateColumnType={(columnTypeMap: {
-              [key: string]: { type: string; format: string };
-            }) => {
-              super.updateWidgetProperty("columnTypeMap", columnTypeMap);
-            }}
-            updateColumnName={(columnNameMap: { [key: string]: string }) => {
-              super.updateWidgetProperty("columnNameMap", columnNameMap);
-            }}
-            handleResizeColumn={(columnSizeMap: { [key: string]: number }) => {
-              super.updateWidgetProperty("columnSizeMap", columnSizeMap);
-            }}
-            handleReorderColumn={(columnOrder: string[]) => {
-              super.updateWidgetProperty("columnOrder", columnOrder);
-            }}
-            columnSizeMap={this.props.columnSizeMap}
-            resetSelectedRowIndex={this.resetSelectedRowIndex}
-            disableDrag={(disable: boolean) => {
-              this.disableDrag(disable);
-            }}
-          />
-        </div>
+        <ReactTableComponent
+          height={componentHeight}
+          width={componentWidth}
+          tableData={tableData}
+          isLoading={this.props.isLoading}
+          widgetId={this.props.widgetId}
+          renderMode={this.props.renderMode}
+          hiddenColumns={hiddenColumns}
+          columnActions={this.props.columnActions}
+          columnNameMap={this.props.columnNameMap}
+          columnTypeMap={this.props.columnTypeMap}
+          columnOrder={this.props.columnOrder}
+          pageSize={pageSize}
+          onCommandClick={this.onCommandClick}
+          selectedRowIndex={
+            this.props.selectedRowIndex === undefined
+              ? -1
+              : this.props.selectedRowIndex
+          }
+          serverSidePaginationEnabled={serverSidePaginationEnabled}
+          onRowClick={this.handleRowClick}
+          pageNo={pageNo}
+          nextPageClick={this.handleNextPageClick}
+          prevPageClick={this.handlePrevPageClick}
+          updatePageNo={(pageNo: number) => {
+            super.updateWidgetMetaProperty("pageNo", pageNo);
+          }}
+          updateHiddenColumns={(hiddenColumns?: string[]) => {
+            super.updateWidgetProperty("hiddenColumns", hiddenColumns);
+          }}
+          updateColumnType={(columnTypeMap: {
+            [key: string]: { type: string; format: string };
+          }) => {
+            super.updateWidgetProperty("columnTypeMap", columnTypeMap);
+          }}
+          updateColumnName={(columnNameMap: { [key: string]: string }) => {
+            super.updateWidgetProperty("columnNameMap", columnNameMap);
+          }}
+          handleResizeColumn={(columnSizeMap: { [key: string]: number }) => {
+            super.updateWidgetProperty("columnSizeMap", columnSizeMap);
+          }}
+          handleReorderColumn={(columnOrder: string[]) => {
+            super.updateWidgetProperty("columnOrder", columnOrder);
+          }}
+          columnSizeMap={this.props.columnSizeMap}
+          resetSelectedRowIndex={this.resetSelectedRowIndex}
+          disableDrag={(disable: boolean) => {
+            this.disableDrag(disable);
+          }}
+        />
       </Suspense>
     );
     // */