diff --git a/app/client/cypress/fixtures/modalOnTableFilterPaneDsl.json b/app/client/cypress/fixtures/modalOnTableFilterPaneDsl.json
index d5e8cf1a08..a969c070b1 100644
--- a/app/client/cypress/fixtures/modalOnTableFilterPaneDsl.json
+++ b/app/client/cypress/fixtures/modalOnTableFilterPaneDsl.json
@@ -235,7 +235,7 @@
"key": "primaryColumns.action.computedValue"
}
],
- "leftColumn": 8,
+ "leftColumn": 18,
"primaryColumns": {
"step": {
"index": 0,
@@ -307,7 +307,7 @@
"delimiter": ",",
"key": "xpckfzcfqi",
"derivedColumns": {},
- "rightColumn": 58,
+ "rightColumn": 48,
"textSize": "PARAGRAPH",
"widgetId": "0qst46493x",
"isVisibleFilters": true,
diff --git a/app/client/cypress/fixtures/tableResizeDsl.json b/app/client/cypress/fixtures/tableResizeDsl.json
deleted file mode 100644
index 5a4cdc27dd..0000000000
--- a/app/client/cypress/fixtures/tableResizeDsl.json
+++ /dev/null
@@ -1,177 +0,0 @@
-{
- "dsl": {
- "widgetName": "MainContainer",
- "backgroundColor": "none",
- "rightColumn": 656,
- "snapColumns": 64,
- "detachFromLayout": true,
- "widgetId": "0",
- "topRow": 0,
- "bottomRow": 2860,
- "containerStyle": "none",
- "snapRows": 128,
- "parentRowSpace": 1,
- "type": "CANVAS_WIDGET",
- "canExtend": true,
- "version": 46,
- "minHeight": 1292,
- "parentColumnSpace": 1,
- "dynamicBindingPathList": [],
- "leftColumn": 0,
- "children": [
- {
- "widgetName": "Table1",
- "columnOrder": [
- "id",
- "email",
- "userName",
- "productName",
- "orderAmount"
- ],
- "isVisibleDownload": true,
- "topRow": 48,
- "bottomRow": 71,
- "parentRowSpace": 10,
- "isSortable": true,
- "type": "TABLE_WIDGET",
- "parentColumnSpace": 74,
- "dynamicTriggerPathList": [],
- "leftColumn": 0,
- "dynamicBindingPathList": [
- {
- "key": "tableData"
- },
- {
- "key": "primaryColumns.id.computedValue"
- },
- {
- "key": "primaryColumns.email.computedValue"
- },
- {
- "key": "primaryColumns.userName.computedValue"
- },
- {
- "key": "primaryColumns.productName.computedValue"
- },
- {
- "key": "primaryColumns.orderAmount.computedValue"
- }
- ],
- "primaryColumns": {
- "id": {
- "index": 0,
- "width": 150,
- "id": "id",
- "horizontalAlignment": "LEFT",
- "verticalAlignment": "CENTER",
- "columnType": "text",
- "textSize": "PARAGRAPH",
- "fontStyle": "REGULAR",
- "enableFilter": true,
- "enableSort": true,
- "isVisible": true,
- "isDisabled": false,
- "isCellVisible": true,
- "isDerived": false,
- "label": "id",
- "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}"
- },
- "email": {
- "index": 1,
- "width": 150,
- "id": "email",
- "horizontalAlignment": "LEFT",
- "verticalAlignment": "CENTER",
- "columnType": "text",
- "textSize": "PARAGRAPH",
- "fontStyle": "REGULAR",
- "enableFilter": true,
- "enableSort": true,
- "isVisible": true,
- "isDisabled": false,
- "isCellVisible": true,
- "isDerived": false,
- "label": "email",
- "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.email))}}"
- },
- "userName": {
- "index": 2,
- "width": 150,
- "id": "userName",
- "horizontalAlignment": "LEFT",
- "verticalAlignment": "CENTER",
- "columnType": "text",
- "textSize": "PARAGRAPH",
- "fontStyle": "REGULAR",
- "enableFilter": true,
- "enableSort": true,
- "isVisible": true,
- "isDisabled": false,
- "isCellVisible": true,
- "isDerived": false,
- "label": "userName",
- "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.userName))}}"
- },
- "productName": {
- "index": 3,
- "width": 150,
- "id": "productName",
- "horizontalAlignment": "LEFT",
- "verticalAlignment": "CENTER",
- "columnType": "text",
- "textSize": "PARAGRAPH",
- "fontStyle": "REGULAR",
- "enableFilter": true,
- "enableSort": true,
- "isVisible": true,
- "isDisabled": false,
- "isCellVisible": true,
- "isDerived": false,
- "label": "productName",
- "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.productName))}}"
- },
- "orderAmount": {
- "index": 4,
- "width": 150,
- "id": "orderAmount",
- "horizontalAlignment": "LEFT",
- "verticalAlignment": "CENTER",
- "columnType": "text",
- "textSize": "PARAGRAPH",
- "fontStyle": "REGULAR",
- "enableFilter": true,
- "enableSort": true,
- "isVisible": true,
- "isDisabled": false,
- "isCellVisible": true,
- "isDerived": false,
- "label": "orderAmount",
- "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.orderAmount))}}"
- }
- },
- "delimiter": ",",
- "migrated": true,
- "derivedColumns": {},
- "rightColumn": 37,
- "textSize": "PARAGRAPH",
- "widgetId": "sb070qr2ir",
- "isVisibleFilters": true,
- "tableData": "{{\n[\n {\n \"id\": 2381224,\n \"email\": \"michael.lawson@reqres.in\",\n \"userName\": \"Michael Lawson\",\n \"productName\": \"Chicken Sandwich\",\n \"orderAmount\": 4.99\n },\n {\n \"id\": 2736212,\n \"email\": \"lindsay.ferguson@reqres.in\",\n \"userName\": \"Lindsay Ferguson\",\n \"productName\": \"Tuna Salad\",\n \"orderAmount\": 9.99\n },\n {\n \"id\": 6788734,\n \"email\": \"tobias.funke@reqres.in\",\n \"userName\": \"Tobias Funke\",\n \"productName\": \"Beef steak\",\n \"orderAmount\": 19.99\n }\n]\n}}",
- "isVisible": true,
- "label": "Data",
- "searchKey": "",
- "fontStyle": "REGULAR",
- "version": 3,
- "parentId": "0",
- "isLoading": false,
- "horizontalAlignment": "LEFT",
- "isVisibleSearch": true,
- "isVisiblePagination": true,
- "verticalAlignment": "CENTER",
- "columnSizeMap": {
- "email": 261
- }
- }
- ]
- }
-}
\ No newline at end of file
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Resize_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Resize_spec.js
deleted file mode 100644
index 2f167fd615..0000000000
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Resize_spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable cypress/no-unnecessary-waiting */
-const widgetsPage = require("../../../../locators/Widgets.json");
-const commonlocators = require("../../../../locators/commonlocators.json");
-const publish = require("../../../../locators/publishWidgetspage.json");
-const dsl = require("../../../../fixtures/tableResizeDsl.json");
-
-describe("Table Widget Resize Functionality", function() {
- before(() => {
- cy.addDsl(dsl);
- });
-
- it("Table Widget check default header controls", function() {
- cy.get(`${commonlocators.layoutControls} span[name='desktop']`).click();
- cy.get(`${publish.tableWidget} ${publish.searchInput}`).should("exist");
- cy.get(
- `${publish.tableWidget} ${widgetsPage.tableFilterPaneToggle}`,
- ).should("exist");
- cy.get(`${publish.tableWidget} ${publish.downloadBtn}`).should("exist");
- });
-
- it("Table Widget check header controls after resize", function() {
- cy.get(`${commonlocators.layoutControls} span[name='mobile']`).click();
- cy.get(`${publish.tableWidget} ${publish.searchInput}`).should("not.exist");
- cy.get(
- `${publish.tableWidget} ${widgetsPage.tableFilterPaneToggle}`,
- ).should("not.exist");
- cy.get(`${publish.tableWidget} ${publish.downloadBtn}`).should("not.exist");
- });
-});
diff --git a/app/client/src/widgets/TableWidget/component/Constants.ts b/app/client/src/widgets/TableWidget/component/Constants.ts
index c340427960..fafb85e469 100644
--- a/app/client/src/widgets/TableWidget/component/Constants.ts
+++ b/app/client/src/widgets/TableWidget/component/Constants.ts
@@ -284,9 +284,3 @@ export const ConditionFunctions: {
return !moment(a).isBefore(moment(b), "d");
},
};
-
-export enum TableWidth {
- Mobile = 576,
- Small = 365,
- Smaller = 288,
-}
diff --git a/app/client/src/widgets/TableWidget/component/Table.tsx b/app/client/src/widgets/TableWidget/component/Table.tsx
index 575f4a72fd..7b4b9584c5 100644
--- a/app/client/src/widgets/TableWidget/component/Table.tsx
+++ b/app/client/src/widgets/TableWidget/component/Table.tsx
@@ -27,7 +27,6 @@ import {
TABLE_SIZES,
CompactMode,
CompactModeTypes,
- TableWidth,
} from "./Constants";
import { Colors } from "constants/Colors";
@@ -127,7 +126,6 @@ export function Table(props: TableProps) {
}),
[columnString],
);
- const isMobileScreenTableWidth = props.width <= TableWidth["Mobile"];
const pageCount =
props.serverSidePaginationEnabled && props.totalRecordsCount
? Math.ceil(props.totalRecordsCount / props.pageSize)
@@ -252,7 +250,6 @@ export function Table(props: TableProps) {
currentPageIndex={currentPageIndex}
delimiter={props.delimiter}
filters={props.filters}
- isMobileScreenTableWidth={isMobileScreenTableWidth}
isVisibleDownload={props.isVisibleDownload}
isVisibleFilters={props.isVisibleFilters}
isVisiblePagination={props.isVisiblePagination}
@@ -272,7 +269,6 @@ export function Table(props: TableProps) {
updatePageNo={props.updatePageNo}
widgetId={props.widgetId}
widgetName={props.widgetName}
- width={props.width}
/>
diff --git a/app/client/src/widgets/TableWidget/component/TableDataDownload.tsx b/app/client/src/widgets/TableWidget/component/TableDataDownload.tsx
index 3a1f887fc9..0c7b8a57e9 100644
--- a/app/client/src/widgets/TableWidget/component/TableDataDownload.tsx
+++ b/app/client/src/widgets/TableWidget/component/TableDataDownload.tsx
@@ -54,7 +54,6 @@ interface TableDataDownloadProps {
columns: ReactTableColumnProps[];
widgetName: string;
delimiter: string;
- isMobileScreenTableWidth: boolean;
}
type FileDownloadType = "CSV" | "EXCEL";
@@ -114,7 +113,6 @@ const downloadDataAsCSV = (props: {
function TableDataDownload(props: TableDataDownloadProps) {
const [selected, selectMenu] = React.useState(false);
-
const downloadFile = (type: string) => {
if (type === "CSV") {
downloadTableDataAsCsv();
@@ -204,7 +202,7 @@ function TableDataDownload(props: TableDataDownloadProps) {
className="t--table-download-btn"
selectMenu={selectMenu}
selected={selected}
- title={props.isMobileScreenTableWidth ? "" : "Download"}
+ title="Download"
>
diff --git a/app/client/src/widgets/TableWidget/component/TableFilters.tsx b/app/client/src/widgets/TableWidget/component/TableFilters.tsx
index 6ab650c0f1..6f685792d1 100644
--- a/app/client/src/widgets/TableWidget/component/TableFilters.tsx
+++ b/app/client/src/widgets/TableWidget/component/TableFilters.tsx
@@ -47,7 +47,6 @@ interface TableFilterProps {
filters?: ReactTableFilter[];
applyFilter: (filters: ReactTableFilter[]) => void;
widgetId: string;
- isMobileScreenTableWidth: boolean;
}
function TableFilters(props: TableFilterProps) {
@@ -112,12 +111,6 @@ function TableFilters(props: TableFilterProps) {
tableFilterPaneState.isVisible &&
tableFilterPaneState.widgetId === props.widgetId;
- const tableActionTitle = `${props.isMobileScreenTableWidth ? "" : "Filters"}${
- hasAnyFilters && !props.isMobileScreenTableWidth
- ? ` (${filters.length})`
- : ""
- }`;
-
return (
<>
diff --git a/app/client/src/widgets/TableWidget/component/TableHeader.tsx b/app/client/src/widgets/TableWidget/component/TableHeader.tsx
index f27b736c90..dbdb5c3f5a 100644
--- a/app/client/src/widgets/TableWidget/component/TableHeader.tsx
+++ b/app/client/src/widgets/TableWidget/component/TableHeader.tsx
@@ -13,7 +13,6 @@ import {
ReactTableColumnProps,
TableSizes,
ReactTableFilter,
- TableWidth,
} from "./Constants";
import TableDataDownload from "./TableDataDownload";
import { Colors } from "constants/Colors";
@@ -43,12 +42,9 @@ const PageNumberInputWrapper = styled(NumericInput)`
margin: 0 8px;
`;
-const SearchComponentWrapper = styled.div<{
- isMobileScreenTableWidth: boolean;
-}>`
+const SearchComponentWrapper = styled.div`
margin: 3px 10px;
- flex: ${(props) =>
- props.isMobileScreenTableWidth ? "0 0 120px" : "0 0 200px"};
+ flex: 0 0 200px;
`;
function PageNumberInput(props: {
@@ -130,19 +126,14 @@ interface TableHeaderProps {
isVisibleFilters?: boolean;
isVisiblePagination?: boolean;
isVisibleSearch?: boolean;
- isMobileScreenTableWidth: boolean;
delimiter: string;
- width: number;
}
function TableHeader(props: TableHeaderProps) {
- const isSmallerTableWidth = props.width <= TableWidth["Smaller"];
return (
<>
- {props.isVisibleSearch && !isSmallerTableWidth && (
-
+ {props.isVisibleSearch && (
+
)}
- {(props.isVisibleFilters || props.isVisibleDownload) &&
- props.width > TableWidth["Small"] && (
-
- {props.isVisibleFilters && (
-
- )}
+ {(props.isVisibleFilters || props.isVisibleDownload) && (
+
+ {props.isVisibleFilters && (
+
+ )}
- {props.isVisibleDownload && (
-
- )}
-
- )}
+ {props.isVisibleDownload && (
+
+ )}
+
+ )}
{props.isVisiblePagination && props.serverSidePaginationEnabled && (
-
+
)}
{props.isVisiblePagination && !props.serverSidePaginationEnabled && (
-
+
{props.tableData?.length} Records
@@ -225,14 +207,14 @@ function TableHeader(props: TableHeaderProps) {
- {!props.isMobileScreenTableWidth && "Page "}
+ Page{" "}
- {!props.isMobileScreenTableWidth && `of ${props.pageCount}`}
+ />{" "}
+ of {props.pageCount}
`
+export const PaginationWrapper = styled.div`
box-sizing: border-box;
display: flex;
width: 100%;
- justify-content: ${(props) =>
- props.isSmallerTableWidth ? "center" : "flex-end"};
+ justify-content: flex-end;
align-items: center;
padding: 8px 20px;
color: ${Colors.GRAY};
- ${(props) => (props.isMobileScreenTableWidth ? "padding: 8px;" : "")};
`;
export const PaginationItemWrapper = styled.div<{