feat: fixed header option

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

@@ -275,6 +275,7 @@ const TableTd = styled.td<{
   border-color: ${(props) => props.$style.border} !important;
   border-width: ${(props) => props.$style.borderWidth} !important;
   border-radius: ${(props) => props.$style.radius};
+  padding: 0 !important;
 
   > div > div {
     color: ${(props) => props.$style.text};
@@ -362,6 +363,8 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   viewModeResizable: boolean;
   rowColorFn: RowColorViewType;
   columnsStyle: TableColumnStyleType;
+  fixedHeader: boolean;
+  maxHeight: string;
 };
 
 function TableCellView(props: {
@@ -533,7 +536,10 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
       {...props}
       pagination={false}
       columns={columns}
-      scroll={{ x: COL_MIN_WIDTH * columns.length }}
+      scroll={{
+        x: COL_MIN_WIDTH * columns.length,
+        y: props.fixedHeader ? props.maxHeight : undefined,
+      }}
     ></Table>
   );
 }
@@ -690,6 +696,8 @@ export function TableCompView(props: {
             onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
           }}
           showHeader={!compChildren.hideHeader.getView()}
+          fixedHeader={compChildren.fixedHeader.getView()}
+          maxHeight={compChildren.maxHeight.getView()}
           columns={antdColumns}
           columnsStyle={columnsStyle}
           viewModeResizable={compChildren.viewModeResizable.getView()}

client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx

@@ -455,12 +455,22 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
           label: trans("table.tableSize"),
           radioButton: true,
         })}
+        {comp.children.hideBordered.propertyView({
+          label: trans("table.hideBordered"),
+        })}
         {comp.children.hideHeader.propertyView({
           label: trans("table.hideHeader"),
         })}
-        {comp.children.hideBordered.propertyView({
-          label: trans("table.hideBordered"),
+        {comp.children.fixedHeader.propertyView({
+          label: trans("table.fixedHeader"),
+          tooltip: trans("table.fixedHeaderTooltip")
         })}
+        {comp.children.fixedHeader.getView() &&
+          comp.children.maxHeight.propertyView({
+            label: trans("table.maxHeight"),
+            tooltip: trans("table.maxHeightTooltip")
+          })
+        }
       </Section>
       <Section name={"Row Style"}>
         {comp.children.rowStyle.getPropertyView()}

client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx

@@ -6,6 +6,7 @@ import {
   BoolCodeControl,
   ColorOrBoolCodeControl,
   JSONObjectArrayControl,
+  RadiusControl,
 } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
@@ -134,6 +135,8 @@ export type RowColorViewType = (param: {
 const tableChildrenMap = {
   hideBordered: BoolControl,
   hideHeader: BoolControl,
+  fixedHeader: BoolControl,
+  maxHeight: withDefault(RadiusControl, '300px'),
   data: withIsLoadingMethod(JSONObjectArrayControl),
   showDataLoadSpinner: withDefault(BoolPureControl, true),
   columns: ColumnListComp,

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1248,6 +1248,10 @@ export const en = {
     type: "Type",
     tableSize: "Table size",
     hideHeader: "Hide table header",
+    fixedHeader: "Fixed table header",
+    fixedHeaderTooltip: "Header will be fixed for vertically scrollable table",
+    maxHeight: "Max. Height",
+    maxHeightTooltip: "Set max. height to make table scrollable",
     hideBordered: "Hide column border",
     deleteColumn: "Delete column",
     confirmDeleteColumn: "Confirm delete column: ",

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1174,6 +1174,10 @@ table: {
     type: "类型",
     tableSize: "表格尺寸",
     hideHeader: "隐藏表头",
+    fixedHeader: "固定表头",
+    fixedHeaderTooltip: "垂直滚动表格的标题将被固定",
+    maxHeight: "最大限度。高度",
+    maxHeightTooltip: "设置最大值使表格可滚动的高度",
     hideBordered: "隐藏列边框",
     deleteColumn: "删除列",
     confirmDeleteColumn: "确认删除列:",