FEATURE-2111 : Show/Hide Table Controls

-- Add the header options section for the visibility setting -- Render conditionally the header part based on the setting
2021-05-11 03:32:58 -04:00 · 2021-05-11 03:32:58 -04:00 · c76ef9e3d7
commit c76ef9e3d7
parent de4c66bf4e
6 changed files with 179 additions and 62 deletions
--- a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
@ -60,6 +60,11 @@ interface TableProps {
  applyFilter: (filters: ReactTableFilter[]) => void;
  compactMode?: CompactMode;
  updateCompactMode: (compactMode: CompactMode) => void;
+  isVisibleCompactMode?: boolean;
+  isVisibleDownload?: boolean;
+  isVisibleFilters?: boolean;
+  isVisiblePagination?: boolean;
+  isVisibleSearch?: boolean;
 }

 const defaultColumn = {
@ -170,49 +175,60 @@ export function Table(props: TableProps) {
      triggerRowSelection={props.triggerRowSelection}
      width={props.width}
    >
-      <TableHeaderWrapper
-        backgroundColor={Colors.WHITE}
-        ref={tableHeaderWrapperRef}
-        serverSidePaginationEnabled={props.serverSidePaginationEnabled}
-        tableSizes={tableSizes}
-        width={props.width}
-      >
-        <Scrollbars
-          renderThumbHorizontal={ScrollbarHorizontalThumb}
-          renderThumbVertical={ScrollbarVerticalThumb}
-          style={{ width: props.width, height: 38 }}
+      {(props.isVisibleSearch ||
+        props.isVisibleFilters ||
+        props.isVisibleDownload ||
+        props.isVisibleCompactMode ||
+        props.isVisiblePagination) && (
+        <TableHeaderWrapper
+          backgroundColor={Colors.WHITE}
+          ref={tableHeaderWrapperRef}
+          serverSidePaginationEnabled={props.serverSidePaginationEnabled}
+          tableSizes={tableSizes}
+          width={props.width}
        >
-          <TableHeaderInnerWrapper
-            backgroundColor={Colors.WHITE}
-            serverSidePaginationEnabled={props.serverSidePaginationEnabled}
-            tableSizes={tableSizes}
-            width={props.width}
+          <Scrollbars
+            renderThumbHorizontal={ScrollbarHorizontalThumb}
+            renderThumbVertical={ScrollbarVerticalThumb}
+            style={{ width: props.width, height: 38 }}
          >
-            <TableHeader
-              applyFilter={props.applyFilter}
-              columns={tableHeadercolumns}
-              compactMode={props.compactMode}
-              currentPageIndex={currentPageIndex}
-              editMode={props.editMode}
-              filters={props.filters}
-              nextPageClick={props.nextPageClick}
-              pageCount={pageCount}
-              pageNo={props.pageNo}
-              pageOptions={pageOptions}
-              prevPageClick={props.prevPageClick}
-              searchKey={props.searchKey}
-              searchTableData={props.searchTableData}
+            <TableHeaderInnerWrapper
+              backgroundColor={Colors.WHITE}
              serverSidePaginationEnabled={props.serverSidePaginationEnabled}
-              tableColumns={columns}
-              tableData={props.data}
              tableSizes={tableSizes}
-              updateCompactMode={props.updateCompactMode}
-              updatePageNo={props.updatePageNo}
-              widgetName={props.widgetName}
-            />
-          </TableHeaderInnerWrapper>
-        </Scrollbars>
-      </TableHeaderWrapper>
+              width={props.width}
+            >
+              <TableHeader
+                applyFilter={props.applyFilter}
+                columns={tableHeadercolumns}
+                compactMode={props.compactMode}
+                currentPageIndex={currentPageIndex}
+                editMode={props.editMode}
+                filters={props.filters}
+                isVisibleCompactMode={props.isVisibleCompactMode}
+                isVisibleDownload={props.isVisibleDownload}
+                isVisibleFilters={props.isVisibleFilters}
+                isVisiblePagination={props.isVisiblePagination}
+                isVisibleSearch={props.isVisibleSearch}
+                nextPageClick={props.nextPageClick}
+                pageCount={pageCount}
+                pageNo={props.pageNo}
+                pageOptions={pageOptions}
+                prevPageClick={props.prevPageClick}
+                searchKey={props.searchKey}
+                searchTableData={props.searchTableData}
+                serverSidePaginationEnabled={props.serverSidePaginationEnabled}
+                tableColumns={columns}
+                tableData={props.data}
+                tableSizes={tableSizes}
+                updateCompactMode={props.updateCompactMode}
+                updatePageNo={props.updatePageNo}
+                widgetName={props.widgetName}
+              />
+            </TableHeaderInnerWrapper>
+          </Scrollbars>
+        </TableHeaderWrapper>
+      )}
      <div
        className={props.isLoading ? Classes.SKELETON : "tableWrap"}
        ref={tableWrapperRef}
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
@ -110,34 +110,54 @@ interface TableHeaderProps {
  compactMode?: CompactMode;
  updateCompactMode: (compactMode: CompactMode) => void;
  tableSizes: TableSizes;
+  isVisibleCompactMode?: boolean;
+  isVisibleDownload?: boolean;
+  isVisibleFilters?: boolean;
+  isVisiblePagination?: boolean;
+  isVisibleSearch?: boolean;
 }

 function TableHeader(props: TableHeaderProps) {
  return (
    <>
-      <SearchComponent
-        onSearch={props.searchTableData}
-        placeholder="Search..."
-        value={props.searchKey}
-      />
-      <CommonFunctionsMenuWrapper tableSizes={props.tableSizes}>
-        <TableFilters
-          applyFilter={props.applyFilter}
-          columns={props.columns}
-          editMode={props.editMode}
-          filters={props.filters}
+      {props.isVisibleSearch && (
+        <SearchComponent
+          onSearch={props.searchTableData}
+          placeholder="Search..."
+          value={props.searchKey}
        />
-        <TableDataDownload
-          columns={props.tableColumns}
-          data={props.tableData}
-          widgetName={props.widgetName}
-        />
-        <TableCompactMode
-          compactMode={props.compactMode}
-          updateCompactMode={props.updateCompactMode}
-        />
-      </CommonFunctionsMenuWrapper>
-      {props.serverSidePaginationEnabled && (
+      )}
+      {(props.isVisibleFilters ||
+        props.isVisibleDownload ||
+        props.isVisibleCompactMode) && (
+        <CommonFunctionsMenuWrapper tableSizes={props.tableSizes}>
+          {props.isVisibleFilters && (
+            <TableFilters
+              applyFilter={props.applyFilter}
+              columns={props.columns}
+              editMode={props.editMode}
+              filters={props.filters}
+            />
+          )}
+
+          {props.isVisibleDownload && (
+            <TableDataDownload
+              columns={props.tableColumns}
+              data={props.tableData}
+              widgetName={props.widgetName}
+            />
+          )}
+
+          {props.isVisibleCompactMode && (
+            <TableCompactMode
+              compactMode={props.compactMode}
+              updateCompactMode={props.updateCompactMode}
+            />
+          )}
+        </CommonFunctionsMenuWrapper>
+      )}
+
+      {props.isVisiblePagination && props.serverSidePaginationEnabled && (
        <PaginationWrapper>
          <PaginationItemWrapper
            className="t--table-widget-prev-page"
@ -162,7 +182,7 @@ function TableHeader(props: TableHeaderProps) {
          </PaginationItemWrapper>
        </PaginationWrapper>
      )}
-      {!props.serverSidePaginationEnabled && (
+      {props.isVisiblePagination && !props.serverSidePaginationEnabled && (
        <PaginationWrapper>
          <RowWrapper className="show-page-items">
            {props.tableData?.length} Records
--- a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
@ -66,6 +66,11 @@ interface ReactTableComponentProps {
  columns: ReactTableColumnProps[];
  compactMode?: CompactMode;
  updateCompactMode: (compactMode: CompactMode) => void;
+  isVisibleSearch?: boolean;
+  isVisibleFilters?: boolean;
+  isVisibleDownload?: boolean;
+  isVisibleCompactMode?: boolean;
+  isVisiblePagination?: boolean;
 }

 function ReactTableComponent(props: ReactTableComponentProps) {
@ -81,6 +86,11 @@ function ReactTableComponent(props: ReactTableComponentProps) {
    handleResizeColumn,
    height,
    isLoading,
+    isVisibleCompactMode,
+    isVisibleDownload,
+    isVisibleFilters,
+    isVisiblePagination,
+    isVisibleSearch,
    nextPageClick,
    onRowClick,
    pageNo,
@ -230,6 +240,11 @@ function ReactTableComponent(props: ReactTableComponentProps) {
      handleResizeColumn={handleResizeColumn}
      height={height}
      isLoading={isLoading}
+      isVisibleCompactMode={isVisibleCompactMode}
+      isVisibleDownload={isVisibleDownload}
+      isVisibleFilters={isVisibleFilters}
+      isVisiblePagination={isVisiblePagination}
+      isVisibleSearch={isVisibleSearch}
      nextPageClick={nextPageClick}
      pageNo={pageNo - 1}
      pageSize={pageSize || 1}
@ -262,6 +277,11 @@ export default React.memo(ReactTableComponent, (prev, next) => {
    prev.handleResizeColumn === next.handleResizeColumn &&
    prev.height === next.height &&
    prev.isLoading === next.isLoading &&
+    prev.isVisibleCompactMode === next.isVisibleCompactMode &&
+    prev.isVisibleDownload === next.isVisibleDownload &&
+    prev.isVisibleFilters === next.isVisibleFilters &&
+    prev.isVisiblePagination === next.isVisiblePagination &&
+    prev.isVisibleSearch === next.isVisibleSearch &&
    prev.nextPageClick === next.nextPageClick &&
    prev.onRowClick === next.onRowClick &&
    prev.pageNo === next.pageNo &&
--- a/app/client/src/mockResponses/WidgetConfigResponse.tsx
+++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@ -263,6 +263,11 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
        step: 62,
        status: 75,
      },
+      isVisibleSearch: true,
+      isVisibleFilters: true,
+      isVisibleDownload: true,
+      isVisibleCompactMode: true,
+      isVisiblePagination: true,
      version: 1,
    },
    DROP_DOWN_WIDGET: {
--- a/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
+++ b/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
@ -679,6 +679,57 @@ export default [
      },
    ],
  },
+  {
+    sectionName: "Header options",
+    children: [
+      {
+        helpText: "Toggle visibility of the search box",
+        propertyName: "isVisibleSearch",
+        label: "Search",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
+      {
+        helpText: "Toggle visibility of the filters",
+        propertyName: "isVisibleFilters",
+        label: "Filters",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
+      {
+        helpText: "Toggle visibility of the data download",
+        propertyName: "isVisibleDownload",
+        label: "Download",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
+      {
+        helpText: "Toggle visibility of the compact mode",
+        propertyName: "isVisibleCompactMode",
+        label: "Compact Mode",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
+      {
+        helpText: "Toggle visibility of the pagination",
+        propertyName: "isVisiblePagination",
+        label: "Pagination",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+        validation: VALIDATION_TYPES.BOOLEAN,
+      },
+    ],
+  },
  {
    sectionName: "Actions",
    children: [
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@ -632,6 +632,11 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
          handleResizeColumn={this.handleResizeColumn}
          height={componentHeight}
          isLoading={this.props.isLoading}
+          isVisibleCompactMode={this.props.isVisibleCompactMode}
+          isVisibleDownload={this.props.isVisibleDownload}
+          isVisibleFilters={this.props.isVisibleFilters}
+          isVisiblePagination={this.props.isVisiblePagination}
+          isVisibleSearch={this.props.isVisibleSearch}
          multiRowSelection={this.props.multiRowSelection}
          nextPageClick={this.handleNextPageClick}
          onCommandClick={this.onCommandClick}