FEATURE-2111 : Show/Hide Table Controls

-- Add the header options section for the visibility setting
-- Render conditionally the header part based on the setting

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,6 +175,11 @@ export function Table(props: TableProps) {
       triggerRowSelection={props.triggerRowSelection}
       width={props.width}
     >
+      {(props.isVisibleSearch ||
+        props.isVisibleFilters ||
+        props.isVisibleDownload ||
+        props.isVisibleCompactMode ||
+        props.isVisiblePagination) && (
         <TableHeaderWrapper
           backgroundColor={Colors.WHITE}
           ref={tableHeaderWrapperRef}
@@ -195,6 +205,11 @@ export function Table(props: TableProps) {
                 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}
@@ -213,6 +228,7 @@ export function Table(props: TableProps) {
             </TableHeaderInnerWrapper>
           </Scrollbars>
         </TableHeaderWrapper>
+      )}
       <div
         className={props.isLoading ? Classes.SKELETON : "tableWrap"}
         ref={tableWrapperRef}

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 (
     <>
+      {props.isVisibleSearch && (
         <SearchComponent
           onSearch={props.searchTableData}
           placeholder="Search..."
           value={props.searchKey}
         />
+      )}
+      {(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.serverSidePaginationEnabled && (
+      )}
+
+      {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

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 &&

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: {

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: [

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}