diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
index cfc1b0bb85..9e4ae470c9 100644
--- 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}
>
-
-
-
-
-
-
-
+ width={props.width}
+ >
+
+
+
+
+ )}
void;
tableSizes: TableSizes;
+ isVisibleCompactMode?: boolean;
+ isVisibleDownload?: boolean;
+ isVisibleFilters?: boolean;
+ isVisiblePagination?: boolean;
+ isVisibleSearch?: boolean;
}
function TableHeader(props: TableHeaderProps) {
return (
<>
-
-
-
-
-
-
- {props.serverSidePaginationEnabled && (
+ )}
+ {(props.isVisibleFilters ||
+ props.isVisibleDownload ||
+ props.isVisibleCompactMode) && (
+
+ {props.isVisibleFilters && (
+
+ )}
+
+ {props.isVisibleDownload && (
+
+ )}
+
+ {props.isVisibleCompactMode && (
+
+ )}
+
+ )}
+
+ {props.isVisiblePagination && props.serverSidePaginationEnabled && (
)}
- {!props.serverSidePaginationEnabled && (
+ {props.isVisiblePagination && !props.serverSidePaginationEnabled && (
{props.tableData?.length} Records
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
index 2d7ebbda4c..5850f52bf0 100644
--- 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 &&
diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
index 521ce177cf..7028c1334d 100644
--- 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: {
diff --git a/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts b/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
index 2273b8ed17..7a2cae150c 100644
--- 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: [
diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx
index baa72efb0e..9996506cdb 100644
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@@ -632,6 +632,11 @@ class TableWidget extends BaseWidget {
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}