feat: added column freeze and unfreeze functionality to table widget

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Tab/Tab_OnEvent_Navigation_spec.js

@@ -3,33 +3,35 @@ const widgetsPage = require("../../../../../locators/Widgets.json");
 const dsl = require("../../../../../fixtures/tabsWidgetReset.json");
 const publishPage = require("../../../../../locators/publishWidgetspage.json");
 
-describe("Tabs widget on change of selection navigation usecases", function () {
-    before(() => {
-        cy.addDsl(dsl);
-    });
+describe("Tabs widget on change of selection navigation usecases", function() {
+  before(() => {
+    cy.addDsl(dsl);
+  });
 
-    it("1.On change of tab selection Navigate to a URL", function () {
-        cy.openPropertyPane("tabswidget");
-        cy.get(".code-highlight")
-            .children()
-            .contains("No action")
-            .last()
-            .click({ force: true })
-            .selectOnClickOption("Navigate to");
-        cy.wait(5000);
-        cy.get("#switcher--url").click({ force: true });
-        cy.testCodeMirrorWithIndex("www.appsmith.com", 1);
-        cy.wait(5000);
-    });
-
-    it("2.Publish the app and validate the navigation change on tab selection.", function () {
-        cy.PublishtheApp();
-        cy.wait(5000);
-        cy.get(".t--page-switch-tab:contains('Tab 3')").click({force: true},{ multiple: true });
-        cy.url().should('include', 'appsmith');
-        cy.go('back');
-        cy.get(".t--page-switch-tab:contains('Tab 3')").should("be.visible");
-        //cy.get(publishPage.backToEditor).click({ force: true });
-    });
+  it("1.On change of tab selection Navigate to a URL", function() {
+    cy.openPropertyPane("tabswidget");
+    cy.get(".code-highlight")
+      .children()
+      .contains("No action")
+      .last()
+      .click({ force: true })
+      .selectOnClickOption("Navigate to");
+    cy.wait(5000);
+    cy.get("#switcher--url").click({ force: true });
+    cy.testCodeMirrorWithIndex("www.appsmith.com", 1);
+    cy.wait(5000);
+  });
 
+  it("2.Publish the app and validate the navigation change on tab selection.", function() {
+    cy.PublishtheApp();
+    cy.wait(5000);
+    cy.get(".t--page-switch-tab:contains('Tab 3')").click(
+      { force: true },
+      { multiple: true },
+    );
+    cy.url().should("include", "appsmith");
+    cy.go("back");
+    cy.get(".t--page-switch-tab:contains('Tab 3')").should("be.visible");
+    //cy.get(publishPage.backToEditor).click({ force: true });
+  });
 });

app/client/cypress/support/widgetCommands.js

@@ -431,8 +431,7 @@ Cypress.Commands.add("updateComputedValueV2", (value) => {
   cy.wait(1000);
 });
 
-
-Cypress.Commands.add("testCodeMirrorWithIndex", (value,index) => {
+Cypress.Commands.add("testCodeMirrorWithIndex", (value, index) => {
   cy.EnableAllCodeEditors();
   cy.get(".CodeMirror textarea")
     .eq(index)

app/client/package.json

@@ -46,7 +46,7 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/[email protected].37",
+    "design-system": "npm:@appsmithorg/[email protected].40-alpha.2",
     "downloadjs": "^1.4.7",
     "draft-js": "^0.11.7",
     "exceljs-lightweight": "^1.14.0",
@@ -129,6 +129,7 @@
     "react-spring": "^9.4.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-table": "^7.0.0",
+    "react-table-sticky": "^1.1.3",
     "react-tabs": "^3.0.0",
     "react-timer-hook": "^3.0.4",
     "react-toastify": "^5.5.0",

app/client/src/components/propertyControls/DraggableListCard.tsx

@@ -11,6 +11,7 @@ import {
   StyledHiddenIcon,
   StyledCheckbox,
   StyledActionContainer,
+  StyledPinIcon,
 } from "components/propertyControls/StyledControls";
 import { Colors } from "constants/Colors";
 import { CheckboxType } from "design-system";
@@ -34,6 +35,7 @@ type RenderComponentProps = {
     isDuplicateLabel?: boolean;
     isChecked?: boolean;
     isCheckboxDisabled?: boolean;
+    sticky?: string;
   };
   isDelete?: boolean;
   isDragging: boolean;
@@ -146,7 +148,12 @@ export function DraggableListCard(props: RenderComponentProps) {
 
   return (
     <ItemWrapper className={item.isDuplicateLabel ? "has-duplicate-label" : ""}>
-      <StyledDragIcon height={20} width={20} />
+      {item.sticky ? (
+        <StyledPinIcon height={20} width={20} />
+      ) : (
+        <StyledDragIcon height={20} width={20} />
+      )}
+
       <StyledOptionControlInputGroup
         autoFocus={index === focusedIndex}
         className={

app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx

@@ -189,6 +189,7 @@ class PrimaryColumnsControlV2 extends BaseControl<ControlProps, State> {
             isColumnTypeEditable(column.columnType) && column.isEditable,
           isCheckboxDisabled:
             !isColumnTypeEditable(column.columnType) || column.isDerived,
+          sticky: column.sticky,
         };
       },
     );

app/client/src/components/propertyControls/StyledControls.tsx

@@ -302,6 +302,24 @@ export const StyledDragIcon = styled(
   }
 `;
 
+export const StyledPinIcon = styled(ControlIcons.PIN as AnyStyledComponent)`
+  padding: 0;
+  position: absolute;
+  margin-right: 15px;
+  cursor: move;
+  z-index: 1;
+  left: 4px;
+  && svg {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    top: 2px;
+    path {
+      fill: ${(props) => props.theme.colors.propertyPane.iconColor};
+    }
+  }
+`;
+
 export const FlexWrapper = styled.div`
   display: flex;
 `;

app/client/src/icons/ControlIcons.tsx

@@ -58,6 +58,7 @@ import { ReactComponent as BoxShadowVariant3Icon } from "assets/icons/control/bo
 import { ReactComponent as BoxShadowVariant4Icon } from "assets/icons/control/box-shadow-variant4.svg";
 import { ReactComponent as BoxShadowVariant5Icon } from "assets/icons/control/box-shadow-variant5.svg";
 import IncreaseV2Icon from "remixicon-react/AddLineIcon";
+import PinIcon from "remixicon-react/Pushpin2LineIcon";
 import PlayIcon from "assets/icons/control/play-icon.png";
 import CopyIcon from "remixicon-react/FileCopyLineIcon";
 import QuestionIcon from "remixicon-react/QuestionLineIcon";
@@ -400,6 +401,11 @@ export const ControlIcons: {
       <QuestionIcon />
     </IconWrapper>
   ),
+  PIN: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <PinIcon />
+    </IconWrapper>
+  ),
 };
 
 export type ControlIconName = keyof typeof ControlIcons;

app/client/src/widgets/TableWidgetV2/component/Constants.ts

@@ -236,6 +236,7 @@ export interface TableColumnProps {
   metaProperties?: TableColumnMetaProps;
   isDerived?: boolean;
   columnProperties: ColumnProperties;
+  sticky?: string;
 }
 export interface ReactTableColumnProps extends TableColumnProps {
   Cell: (props: any) => JSX.Element;
@@ -338,6 +339,7 @@ export interface ColumnProperties
   onItemClicked?: (onClick: string | undefined) => void;
   iconButtonStyle?: ButtonStyleType;
   imageSize?: ImageSize;
+  sticky?: string;
 }
 
 export const ConditionFunctions: {

app/client/src/widgets/TableWidgetV2/component/Table.tsx

@@ -8,6 +8,7 @@ import {
   useRowSelect,
   Row as ReactTableRowType,
 } from "react-table";
+import { useSticky } from "react-table-sticky";
 import {
   TableWrapper,
   TableHeaderWrapper,
@@ -96,6 +97,8 @@ interface TableProps {
     onActionComplete: () => void,
   ) => void;
   disabledAddNewRowSave: boolean;
+  handleColumnFreeze?: (columnName: string, sticky?: string) => void;
+  canFreezeColumn?: boolean;
 }
 
 const defaultColumn = {
@@ -183,6 +186,7 @@ export function Table(props: TableProps) {
     useResizeColumns,
     usePagination,
     useRowSelect,
+    useSticky,
   );
   //Set isResizingColumn as true when column is resizing using table state
   if (state.columnResizing.isResizingColumn) {
@@ -348,7 +352,7 @@ export function Table(props: TableProps) {
             height: isHeaderVisible ? props.height - 48 : props.height,
           }}
         >
-          <div {...getTableProps()} className="table">
+          <div {...getTableProps()} className="table column-freeze">
             <div
               className="thead"
               onMouseLeave={props.enableDrag}
@@ -360,7 +364,7 @@ export function Table(props: TableProps) {
                   style: { display: "flex" },
                 };
                 return (
-                  <div {...headerRowProps} className="tr" key={index}>
+                  <div {...headerRowProps} className="tr header" key={index}>
                     {props.multiRowSelection &&
                       renderHeaderCheckBoxCell(
                         handleAllRowSelectClick,
@@ -372,10 +376,12 @@ export function Table(props: TableProps) {
                       (column: any, columnIndex: number) => {
                         return (
                           <HeaderCell
+                            canFreezeColumn={props.canFreezeColumn}
                             column={column}
                             columnIndex={columnIndex}
                             columnName={column.Header}
                             editMode={props.editMode}
+                            handleColumnFreeze={props.handleColumnFreeze}
                             isAscOrder={column.isAscOrder}
                             isHidden={column.isHidden}
                             isResizingColumn={isResizingColumn.current}

app/client/src/widgets/TableWidgetV2/component/TableBody/index.tsx

@@ -73,33 +73,37 @@ type BodyPropsType = {
 const TableVirtualBodyComponent = React.forwardRef(
   (props: BodyPropsType, ref: Ref<HTMLDivElement>) => {
     return (
-      <div {...props.getTableBodyProps()} className="tbody no-scroll">
-        <FixedSizeList
-          height={
-            props.height -
-            props.tableSizes.TABLE_HEADER_HEIGHT -
-            props.tableSizes.COLUMN_HEADER_HEIGHT -
-            2 * WIDGET_PADDING // Top and bottom padding
-          }
-          itemCount={Math.max(props.rows.length, props.pageSize)}
-          itemData={props.rows}
-          itemSize={
-            props.tableSizes.ROW_HEIGHT + props.tableSizes.ROW_VIRTUAL_OFFSET
-          }
-          outerRef={ref}
-          width={`calc(100% + ${2 * WIDGET_PADDING}px`}
-        >
-          {rowRenderer}
-        </FixedSizeList>
-      </div>
+      <FixedSizeList
+        className="tbody no-scroll body"
+        height={
+          props.height -
+          props.tableSizes.TABLE_HEADER_HEIGHT -
+          props.tableSizes.COLUMN_HEADER_HEIGHT -
+          2 * WIDGET_PADDING // Top and bottom padding
+        }
+        innerElementType={({ children, style, ...rest }: any) => (
+          <div {...props.getTableBodyProps()} style={style} {...rest}>
+            {children}
+          </div>
+        )}
+        itemCount={Math.max(props.rows.length, props.pageSize)}
+        itemData={props.rows}
+        itemSize={
+          props.tableSizes.ROW_HEIGHT + props.tableSizes.ROW_VIRTUAL_OFFSET
+        }
+        outerRef={ref}
+        width={`calc(100% + ${2 * WIDGET_PADDING}px`}
+      >
+        {rowRenderer}
+      </FixedSizeList>
     );
   },
 );
 
 const TableBodyComponent = React.forwardRef(
   (props: BodyPropsType, ref: Ref<HTMLDivElement>) => {
     return (
-      <div {...props.getTableBodyProps()} className="tbody" ref={ref}>
+      <div {...props.getTableBodyProps()} className="tbody body" ref={ref}>
         {props.rows.map((row, index) => {
           return <Row index={index} key={index} row={row} />;
         })}

app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx

@@ -77,24 +77,17 @@ export const TableWrapper = styled.div<{
     display: table;
     width: 100%;
     ${hideScrollbar};
-    .thead,
-    .tbody {
-      overflow: hidden;
-    }
     .tbody {
       height: ${(props) =>
         props.isHeaderVisible
           ? props.height - OFFSET_WITH_HEADER
-          : props.height - OFFSET_WITHOUT_HEADER}px;
+          : props.height - OFFSET_WITHOUT_HEADER}px !important;
       width: 100%;
-      overflow-y: auto;
-      ${hideScrollbar};
     }
     .tbody.no-scroll {
-      overflow: hidden;
+      overflow: visible !important;
     }
     .tr {
-      overflow: hidden;
       cursor: ${(props) => props.triggerRowSelection && "pointer"};
       background: ${Colors.WHITE};
       &.selected-row {
@@ -185,6 +178,29 @@ export const TableWrapper = styled.div<{
     }
   }
 
+  .column-freeze {
+    .body {
+      position: relative;
+      z-index: 0;
+    }
+
+    [data-sticky-td] {
+      position: sticky;
+      position: -webkit-sticky;
+      background-color: inherit;
+    }
+
+    [data-sticky-last-left-td] {
+      left: 0px;
+      box-shadow: 2px 0px 3px #ccc;
+    }
+
+    [data-sticky-first-right-td] {
+      right: 0px;
+      box-shadow: -2px 0px 3px #ccc;
+    }
+  }
+
   .tbody .tr:last-child .td {
     border-bottom: none;
   }