fix: separate options to fix header and toolbar

lowcoder-org · FalkWolsky · Dec 1, 2023 · Dec 1, 2023 · Dec 1, 2023 · Dec 1, 2023
commit e959fd1f1b92a2531a872969e43a70c65017f41f
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -131,9 +131,10 @@ const TableWrapper = styled.div<{
   $rowStyle: TableRowStyleType;
   toolbarPosition: "above" | "below" | "close";
   fixedHeader: boolean;
+  fixedToolbar: boolean;
 }>`
   max-height: 100%;
-  overflow-y: ${(props) => (props.fixedHeader ? "hidden" : "auto")};
+  overflow-y: auto;
   background: white;
   border: ${(props) => `1px solid ${props.$style.border}`};
   border-radius: ${(props) => props.$style.radius};
@@ -168,6 +169,10 @@ const TableWrapper = styled.div<{
       border-top: none !important;
       border-inline-start: none !important;
 
+      .ant-table-content {
+        overflow: unset !important;
+      }
+
       // A table expand row contains table
       .ant-table-tbody .ant-table-wrapper:only-child .ant-table {
         margin: 0;
@@ -182,7 +187,15 @@ const TableWrapper = styled.div<{
             border-color: ${(props) => props.$style.border};
             color: ${(props) => props.$style.headerText};
             border-inline-end: ${(props) => `1px solid ${props.$style.border}`} !important;
-
+            ${(props) => 
+              props.fixedHeader && `
+                position: sticky;
+                position: -webkit-sticky;
+                top: ${props.fixedToolbar ? '47px' : '0'};
+                z-index: 99;
+              `
+            }
+
             &:last-child {
               border-inline-end: none !important;
             }
@@ -371,9 +384,6 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   viewModeResizable: boolean;
   rowColorFn: RowColorViewType;
   columnsStyle: TableColumnStyleType;
-  fixedHeader: boolean;
-  height?: number;
-  autoHeight?: boolean;
 };
 
 function TableCellView(props: {
@@ -547,9 +557,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
       columns={columns}
       scroll={{
         x: COL_MIN_WIDTH * columns.length,
-        y: props.fixedHeader && props.height && !props.autoHeight
-          ? `${props.height - 100}px`
-          : undefined,
+        y: undefined,
       }}
     ></Table>
   );
@@ -563,10 +571,10 @@ export function TableCompView(props: {
   onDownload: (fileName: string) => void;
 }) {
   const editorState = useContext(EditorContext);
-  const { width, height, ref } = useResizeDetector({
+  const { width, ref } = useResizeDetector({
     refreshMode: "debounce",
     refreshRate: 600,
-    handleHeight: true,
+    handleHeight: false,
   });
   const viewMode = useUserViewMode();
   const compName = useContext(CompNameContext);
@@ -591,7 +599,6 @@ export function TableCompView(props: {
     () => compChildren.dynamicColumnConfig.getView(),
     [compChildren.dynamicColumnConfig]
   );
-  const autoHeight = compChildren.autoHeight.getView();
   const columnsAggrData = comp.columnAggrData;
   const expansion = useMemo(() => compChildren.expansion.getView(), [compChildren.expansion]);
   const antdColumns = useMemo(
@@ -689,6 +696,7 @@ export function TableCompView(props: {
         $rowStyle={rowStyle}
         toolbarPosition={toolbar.position}
         fixedHeader={compChildren.fixedHeader.getView()}
+        fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
       >
         {toolbar.position === "above" && toolbarView}
         <ResizeableTable<RecordType>
@@ -709,15 +717,12 @@ export function TableCompView(props: {
             onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
           }}
           showHeader={!compChildren.hideHeader.getView()}
-          fixedHeader={compChildren.fixedHeader.getView()}
           columns={antdColumns}
           columnsStyle={columnsStyle}
           viewModeResizable={compChildren.viewModeResizable.getView()}
           dataSource={pageDataInfo.data}
           size={compChildren.size.getView()}
           tableLayout="fixed"
-          height={height}
-          autoHeight={autoHeight}
           loading={
             loading ||
             // fixme isLoading type

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
@@ -48,13 +48,22 @@ const getStyle = (
   style: TableStyleType,
   filtered: boolean,
   theme: ThemeDetail,
-  position: ToolbarRowType["position"]
+  position: ToolbarRowType["position"],
+  fixedToolbar: boolean,
 ) => {
   return css`
     background-color: ${style.toolbarBackground};
     // Implement horizontal scrollbar and vertical page number selection is not blocked
-    padding: ${position === "above" ? "13px 16px 313px 16px" : "313px 16px 13px 16px"};
-    margin: ${position === "above" ? "0 0 -300px 0" : "-300px 0 0 0"};
+    // padding: ${position === "above" ? "13px 16px 313px 16px" : "313px 16px 13px 16px"};
+    // margin: ${position === "above" ? "0 0 -300px 0" : "-300px 0 0 0"};
+    padding: 13px 12px;
+    ${fixedToolbar && `
+      position: sticky;
+      postion: -webkit-sticky;
+      z-index: 99;
+    `};
+    ${fixedToolbar && position === 'below' && `bottom: 0;`};
+    ${fixedToolbar && position === 'above' && `top: 0;` };
 
     .toolbar-icons {
       .refresh,
@@ -147,9 +156,16 @@ const ToolbarWrapper = styled.div<{
   $filtered: boolean;
   theme: ThemeDetail;
   position: ToolbarRowType["position"];
+  fixedToolbar: boolean;
 }>`
-  overflow: auto;
-  ${(props) => props.$style && getStyle(props.$style, props.$filtered, props.theme, props.position)}
+  // overflow: auto;
+  ${(props) => props.$style && getStyle(
+    props.$style,
+    props.$filtered,
+    props.theme,
+    props.position,
+    props.fixedToolbar,
+  )}
 `;
 
 const ToolbarWrapper2 = styled.div`
@@ -539,6 +555,7 @@ export const TableToolbarComp = (function () {
     showDownload: BoolControl,
     showFilter: BoolControl,
     columnSetting: BoolControl,
+    fixedToolbar: BoolControl,
     // searchText: StringControl,
     filter: stateComp<TableFilter>({ stackType: "and", filters: [] }),
     position: dropdownControl(positionOptions, "below"),
@@ -563,6 +580,10 @@ export const TableToolbarComp = (function () {
   })
     .setPropertyViewFn((children) => [
       children.position.propertyView({ label: trans("table.position"), radioButton: true }),
+      children.fixedToolbar.propertyView({
+        label: trans("table.fixedToolbar"),
+        tooltip: trans("table.fixedToolbarTooltip")
+      }),
       children.showFilter.propertyView({ label: trans("table.showFilter") }),
       children.showRefresh.propertyView({ label: trans("table.showRefresh") }),
       children.showDownload.propertyView({ label: trans("table.showDownload") }),
@@ -728,6 +749,7 @@ export function TableToolbar(props: {
       theme={theme}
       $filtered={toolbar.filter.filters.length > 0}
       position={toolbar.position}
+      fixedToolbar={toolbar.fixedToolbar}
     >
       <ToolbarWrapper2>
         <ToolbarIcons className="toolbar-icons">

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1253,6 +1253,8 @@ export const en = {
     hideHeader: "Hide table header",
     fixedHeader: "Fixed table header",
     fixedHeaderTooltip: "Header will be fixed for vertically scrollable table",
+    fixedToolbar: "Fixed toolbar",
+    fixedToolbarTooltip: "Toolbaar will be fixed for vertically scrollable table based on position",
     hideBordered: "Hide column border",
     deleteColumn: "Delete column",
     confirmDeleteColumn: "Confirm delete column: ",

diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1176,6 +1176,8 @@ table: {
     hideHeader: "隐藏表头",
     fixedHeader: "固定表头",
     fixedHeaderTooltip: "垂直滚动表格的标题将被固定",
+    fixedToolbar: "固定工具栏",
+    fixedToolbarTooltip: "工具栏将根据所选位置固定为垂直滚动表格",
     hideBordered: "隐藏列边框",
     deleteColumn: "删除列",
     confirmDeleteColumn: "确认删除列:",