A CSS-driven height-adaptive layout method based on the Antd table component

Abstract

This invention discloses a CSS-driven height-adaptive layout method based on the Antd table component, relating to the field of front-end page layout. By defining a multi-layered flexible container structure, relying on the height transfer mechanism of flex layout, and combining the `scroll.y` property of the Table component to trigger the splitting of the table header and body, it establishes a height link between the multiple layers of wrapper nodes within the component. Through CSS style constraints, it achieves a fixed table header, a table body that fills the remaining height and scrolls automatically, and sets the pagination area to a fixed height with precise height allocation to the table area. It eliminates the need for dynamic height measurement and calculation using JavaScript and monitoring container size changes; it achieves height adaptation of the table within any calculable height parent container solely through CSS. This invention enables stable adaptive layout of the Table component in various nested containers such as sidebars, drawers, cards, and tabs, as well as in loading states, reducing code complexity and maintenance costs.

Description

Technical Field

[0001] This invention relates to the field of front-end page layout technology; specifically, it relates to a CSS-driven height-adaptive layout method based on the Antd table component. Background Technology

[0002] With the rapid development of internet technology, front-end management systems have become an important platform for various enterprises and organizations to manage their businesses and visualize data. Tables, as a core component for handling large-scale list data and enabling data filtering, sorting, and manipulation, directly impact the user experience due to their layout stability and adaptability. Ant Design, a leading ReactUI component library in China, offers its Table component, which boasts rich features such as fixed headers, row selection, column operations, filtering and sorting, and loading state encapsulation, making it widely used in the development of various front-end management systems.

[0003] The Ant Design Table component implements a "fixed header + scrollable body" mechanism as follows: when the scroll.y property is set for the component, the component will automatically split into two independent structures: the header (ant-table-header) and the body (ant-table-body). The header remains fixed, and the body forms a scrollable area according to the height set by scroll.y.

[0004] However, in actual front-end development, typical page structures are often complex. Above a table, there are usually dynamic or fixed height areas such as titles, toolbars, and filter areas, while below there are fixed height areas such as paginators and bottom operation bars. At the same time, the outer container of the table may be a nested container such as a sidebar layout, drawer, card, tabs, or modal. The height of these containers often changes dynamically with the page layout and window size.

[0005] In existing technologies, there are four main solutions for implementing "fixed header + scrolling body" in the Ant Design Table component and adapting to complex layouts, but all of them have significant technical drawbacks:

[0006] 1. Fixed pixel height solution: Directly set a fixed pixel value such as 400px or 600px for the scroll.y property of the Table component. The drawback of this solution is that it cannot adapt to different screen sizes and different height variations of nested containers. On small screens or in drawers or card containers with low height, problems such as table body overflow and pagers being obscured are likely to occur. On large screens or in containers with high height, problems such as the table body scrolling area being too small and low page space utilization will occur, resulting in extremely poor reusability.

[0007] 2. JavaScript Dynamic Measurement Solution: The main idea is to use APIs such as `window.onresize`, `ResizeObserver`, and `MutationObserver` to monitor changes in container size, or to read the height of DOM nodes after page rendering, calculate the available height of the table (e.g., parent container height - toolbar height - pagination height), and then dynamically write the calculation result to the `scroll.y` property of the `Table` component. While this solution can adapt to changes in container height to some extent, it has several fatal flaws:

[0008] First, it is highly sensitive to the rendering timing. In containers such as Tabs, Drawer, and Modal that are not visible at first or are rendered with a delay, the height measurement result of the DOM node may be 0 or not the final height. Additional fallback and retry logic needs to be written, which increases the code complexity.

[0009] Secondly, it is sensitive to the wrapping structure of the Ant Design Table component. When the Table component is in the loading state, the Spin component will introduce multiple layers of wrapping nodes such as .ant-spin-nested-loading and .ant-spin-container. If the height link is not established, the reference height of scroll.y will be lost, causing the table body to fail to scroll or to have double scrollbars.

[0010] Third, it introduces significant performance and maintenance costs. The entire process of listening, measuring, throttling, and writing increases code complexity. Frequent DOM read and write operations will trigger synchronous layout calculations, causing layout thrash and reducing page rendering performance.

[0011] Fourth, it has poor reusability. The toolbar height, pagination height, and outer layout structure differ between different pages, which means that the JavaScript calculation logic needs to be repeatedly modified and adjusted, making it impossible to achieve component-based reuse.

[0012] 3. Viewport-based estimation solution: This method uses the `vh` unit combined with the `calc` function (e.g., `calc(100vh-100px)`) to estimate table height, or sets the height through hard-coded subtraction within the page-level container. The drawback of this solution is that it is strongly bound to the overall page structure. The `vh` unit is based on the browser viewport, making it unsuitable for nested containers such as drawers, cards, and tabs. Furthermore, it is susceptible to height errors on mobile devices due to variations in the address bar height, and it cannot handle the issue of height propagation across multiple nested layers.

[0013] 4. Positioned / Partitioned Layout Solution: This solution uses `position:absolute` to anchor the table area vertically, or uses the `grid-template-rows` property of the Grid layout to partition the table area and pagination area by height. The drawback of this solution is that it requires high component composability, and the positioning layout increases the coupling between components, resulting in extremely high modification costs when adjusting the page structure later. Furthermore, it still requires handling details such as the height chain within the Ant Design Table component and the `min-height` and `overflow` properties of the scroll area, and cannot fundamentally solve the problem of height propagation failure under nested loading conditions.

[0014] Furthermore, none of the existing solutions have effectively resolved the issue of scrolling area failure in flex layouts. When the outer container is a flex layout, if child items do not have `min-height: 0` set, the flex child items will expand with the content, causing the scrolling area to fail to shrink, resulting in table overflow and double scrollbars on the page. This problem is further amplified in the multi-layered wrapper nodes of the Ant Design Table component, becoming a significant cause of layout instability.

[0015] In summary, the existing layout methods of Ant Design Table components cannot meet the requirements of front-end management systems for adaptive, highly stable, loosely coupled, and easily reusable table layouts. Summary of the Invention

[0016] Therefore, the purpose of this invention is to overcome the shortcomings of the prior art and provide a CSS-driven height-adaptive layout method based on Antd table components. Without relying on JavaScript dynamic calculations or monitoring, this method achieves height adaptation of the Table component in various complex nested containers and loading states through pure CSS, eliminating layout defects and solving existing Ant Design problems. The Table component layout suffers from several issues, including height not adapting to its parent container, reliance on JavaScript for dynamic height calculation, need for additional monitoring and recalculation during window scaling / container collapse, height propagation failure under nested loading states, and susceptibility to double scrollbars, table body overflow, pagination compression, and poor reusability. This solution addresses these problems by implementing height adaptation solely through CSS, completely eliminating JavaScript height measurement, calculation, monitoring, and recalculation logic, thus reducing code complexity and maintenance costs. It achieves stable adaptation of the Table component within any calculable-height parent container, such as sidebars, drawers, cards, tabs, and modals, adapting to dynamic changes in container size. It resolves the height propagation issue of multi-layered wrapper nodes under nested loading states, ensuring that the table header remains fixed and the table body scrolling remains functional during loading. It implements fixed positioning for the paginator and bottom toolbar, preventing them from participating in height allocation or being compressed, eliminating layout defects such as double scrollbars and table body overflow. The layout logic is encapsulated into a generic component, enabling parameterized configuration and seamless reuse across different front-end pages without repeated parameter tuning. It reduces DOM read / write operations and synchronous layout calculations, improving page rendering performance, avoiding layout jitter, and enhancing development efficiency and page performance.

[0017] To clearly illustrate the technical solution of this invention, a unified terminology definition is provided for containers and nodes involved in this invention, and this definition will be used in subsequent method steps:

[0018] First container: The outermost container of the Table component, which directly receives the height of the parent container. It is used to make vertical flexible height distribution of the table area and pagination / bottom toolbar area, and is the basic unit of the entire layout.

[0019] The second container: The table area container that holds the Ant Design Table component. It is the direct parent container of the Table component and is used to pass the height to the Table component and its internal wrapper nodes.

[0020] The third container: an independent container for the pager / bottom toolbar, parallel to the second container, and a child node of the first container. Its height is a fixed value H and it does not participate in the flexible height allocation.

[0021] Height Link Node: A collection of multi-layered wrapper nodes formed by the Ant Design Table component during normal rendering and loading (Spin) states. These are the key nodes for transferring height from the second container to the table body area, and must include at least:

[0022] .ant-spin-nested-loading, .ant-spin-container, .ant-table, .ant-table-container; If an additional intermediate load node is introduced due to an Ant Design version update or business style expansion, resulting in height truncation, the intermediate load node will be automatically included in the height link node set;

[0023] Calculated height: refers to the height of the parent container itself having a fixed pixel height, percentage height, or being in a vertical flex layout link and able to obtain a definite height value from the parent container, so that the height of the child container has a clear reference standard.

[0024] This invention provides a CSS-driven height-adaptive layout method based on the Ant Design table component. Utilizing the vertical height transfer mechanism of flex layout, it triggers the splitting of the table header and body of the Ant Design Table component by defining a multi-layered flexible container structure. This establishes a height link between the multiple layers of wrapper nodes within the component. Precise constraints using CSS styles ensure that the table header is fixed, the table body fills the remaining height and scrolls automatically, and the pagination area is set to a fixed height with precise height allocation to the table area. No JavaScript height measurement, calculation, listening, or recalculation logic is required; the entire process is driven solely by CSS and includes the following steps:

[0025] S1. Determine the height reference basis: Make the parent container of the Ant Design Table component provide a computable height, or make the parent container in a flex layout chain that can pass on height downwards;

[0026] Specifically, if the parent container is the main page container, you can directly set a fixed height or percentage height (such as height:100%) for the parent container; if the parent container is a nested container such as a drawer, card, tab, or modal, you need to set the layout of the parent container to a vertical flex layout (display:flex, flex-direction:column), and set flex:1 and min-height:0 for the parent container to ensure that the height can be passed down from the root node of the page to the parent container.

[0027] This step provides a basic reference for subsequent height allocation. If the height of the parent container is uncertain (e.g., it expands dynamically with the content), then scroll.y='100%' will lack a height reference, and the adaptive height of the table body will degenerate into expanding with the content. This is a physical premise of the layout and not a technical defect of this invention.

[0028] S2. Construct an outer vertically flexible container: Define the first container as the outermost container of the Table component, and deploy the second and third containers inside the first container; set the display:flex, flex-direction:column, flex:1, min-height:0 and overflow:hidden properties of the first container through CSS to make the first container form a vertically flexible layout and serve as the basic container for height distribution, while avoiding the appearance of double scrollbars on the outer layer;

[0029] Specifically, the basic functions of the properties display:flex, flex-direction:column, flex:1, min-height:0, and overflow:hidden in the CSS style set for the first container are as follows:

[0030] `display:flex`: Sets the first container to a flex layout, providing a basis for vertical height distribution.

[0031] flex-direction:column: Sets the main axis of the flex layout to vertical, so that the second container (table area) and the third container (pagination area) are arranged vertically.

[0032] flex:1: Makes the first container fill the remaining height of the parent container, ensuring that the first container can support the height of the parent container and pass it down.

[0033] min-height:0: This solves the problem of child items not shrinking in flex layout, allowing the scroll area inside the first container to function normally and preventing the table body from overflowing.

[0034] overflow:hidden: Hides the overflow content of the first container, ensuring that scrolling only occurs in the body area of ​​the Table component, and avoiding the appearance of double scrollbars on the outer layer.

[0035] The overall effect of the above attribute combination is: setting the first container to a vertically arranged flex layout, adapting to the remaining height of the parent container (automatically filling all remaining vertical space of the parent container); simultaneously removing the minimum height limit (allowing the container height to be compressed), and hiding overflowing content (if the content inside the container is too tall and exceeds the container height, the overflowing part is directly hidden). Through the above CSS style combination, the first container becomes a flexible unit that is transitive, distributable, and has no overflow.

[0036] S3. Set a fixed-height bottom functional area: If the front-end page has functional areas that need to be fixed below the table, such as a pagination bar or a bottom toolbar, define a third container as an independent container for this functional area, and place the third container as a child node of the first container below the second container; if there is no such functional area, this step can be skipped, in which case the first container only contains the second container; set a fixed height H and flex-shrink:0 style for the third container using CSS to prevent the third container from participating in height distribution or being squeezed; when the Table component is in a loading state, apply a mask layer to the third container and disable interaction;

[0037] Specifically, the following CSS styles and interaction constraints are set for the third container:

[0038] Basic style constraints: Set a fixed height H (preferably 40px-60px, which can be adjusted parametrically according to the design specifications and interaction requirements of the front-end page), and set flex-shrink:0; flex-shrink:0 ensures that the third container does not participate in the flexible height distribution and will not be squeezed or deformed due to changes in the height of the table area, thus achieving fixed positioning of the pagination / bottom toolbar;

[0039] flex-shrink is a property in flex layout that specifically controls whether flex items shrink when there is not enough space in the container.

[0040] `flex-shrink:0` means that when the space of the flex container is not enough to accommodate all child elements, the elements with this property set will not be compressed or shrunk, and will always maintain their own base size (width / height, depending on the flex direction), while other elements that are not set or have `flex-shrink>0` will be compressed proportionally to fit the container.

[0041] Loading state constraint: When the Table component is in the loading (data loading) state, a mask layer is overlaid on top of the third container. The size of the mask layer is exactly the same as that of the third container, and the CSS style is set to pointer-events:auto. The mask layer intercepts the interaction of the third container, preventing users from performing invalid pagination operations during the data loading process. At the same time, the mask layer is only a visual and interactive layer and does not affect the transmission of height links or the stability of the overall layout structure.

[0042] This step separates the pagination / bottom toolbar from the table height allocation, achieving a layout effect where the table area adapts flexibly and the bottom area remains fixed without offset, thus solving the problem of the paginator being squeezed or obscured.

[0043] S4. Trigger the split structure of the table header and body: Define the second container as the table area container that holds the Ant Design Table component, deploy the Ant Design Table component in the second container, set the scroll={{y:'100%'}} property on the Ant Design Table component, trigger the Ant Design Table component to generate the split structure of the ant-table-header table header area and the ant-table-body table body area;

[0044] Setting the `scroll={{y:'100%'}}` property is key to triggering the internal structural splitting of the Ant Design Table component. When `scroll.y` is set to 100%, the Ant Design Table component automatically splits itself into two independent DOM nodes: the `ant-table-header` header area and the `ant-table-body` body area. The header area displays the table column names, and the body area displays the list data. This split structure is the foundation for achieving a fixed header and a scrollable body, providing node support for subsequent height adaptation through CSS constraints. If this property is not set, the Table component will naturally expand with the content and will not form an independent scrollable area.

[0045] S5. Establish the height chain within the Ant Design Table component. Define the height chain node as a collection of multi-layered wrapper nodes formed by the Table component during rendering and loading states. The height chain node must include at least .ant-spin-nested-loading, .ant-spin-container, .ant-table, and .ant-table-container. Set the styles height:100%, display:flex, and flex-direction:column uniformly to all height chain nodes using CSS, so that the height and flex calculations are passed layer by layer along the multi-layered wrapper nodes. If there is an additional intermediate carrier node that causes height truncation, include the intermediate carrier node in the height chain node collection and apply the same style constraints.

[0046] During normal rendering and loading, the Ant Design Table component generates multiple nested wrapper nodes (height link nodes). If these nodes are not height-constrained, the height of the second container cannot be passed to the table body area, causing scroll.y='100%' to lose its reference and the table body scrolling to fail. The key point of this step is to establish a height link, and the specific operations are as follows:

[0047] Determine the height link node set: The height link node set must contain at least .ant-spin-nested-loading (nested container in the loading state), .ant-spin-container (content container in the loading state), .ant-table (root node of the Table component), and .ant-table-container (container node of the Table component); if an additional intermediate carrier node is introduced due to Ant Design version updates or business style extensions, and causes the height to be truncated when passing from the second container to the table body area, the intermediate carrier node is directly included in the height link node set;

[0048] .ant-spin-nested-loading is the name of the outer container class for nested loading states in Ant Design. It is used to control the layout and positioning of the loading state, ensuring that the loading animation is centered and covers the target component without breaking the original component's layout structure.

[0049] The .ant-spin-container is the class name of the state container in Ant Design, used to wrap the actual business components (such as the Table itself).

[0050] .ant-table is the root container class name of the Ant Design Table component, which contains all parts of the Table component (table header, table body, pagination, borders, styles, etc.).

[0051] .ant-table-container is a child container of .ant-table, specifically designed to hold the core content of the table (table header, table body, scrollable area).

[0052] Set uniform height link styles: Set the same CSS style combination for all height link nodes: height:100%, display:flex, flex-direction:column; where height:100% ensures that each node fills the height of its parent node, realizing the layer-by-layer propagation of height; display:flex, flex-direction:column ensure that each node is vertically flexible, making height propagation compatible with flex calculation and avoiding gaps in height propagation.

[0053] To enable CSS styles: The above CSS styles can be written using CSSModules in conjunction with the :global selector, or using the global selector method of ordinary CSS. This method does not require modifying the source code of Ant Design components. It can achieve style constraints on the height link nodes by simply overriding external styles, ensuring compatibility with the Ant Design component library and adapting to different versions of the Ant Design Table component.

[0054] After step S5 is completed, the height of the second container will be passed layer by layer to ant-table-header and ant-table-body through the height link node, providing a complete link guarantee for subsequent height allocation.

[0055] S6. Constrain the scaling and scrolling rules of the table header and body. Set the CSS style flex:00auto to the ant-table-header header area to keep the header area at its natural height and fixed at the top. Set the CSS style flex:1 and min-height:0 to the ant-table-body body area to make the body area fill the remaining height in the second container, and generate a vertical scrollbar by the overflow mechanism of the AntDesign Table component itself.

[0056] After separating the table header and body in the Table component and fully establishing the height hierarchy, CSS style constraints are used to fix the table header, ensure the table body fills the remaining height, and allow it to scroll automatically. The specific steps are as follows:

[0057] Header area constraints: Set the CSS style flex:00auto to the ant-table-header header area; where flex:00 means that the header area does not participate in the flexible height distribution and will not be stretched or shrunk, and auto means that the header area maintains its own natural height (determined by factors such as column name and font size), ultimately achieving a fixed position of the header area above the table, which does not move with the table body scrolling;

[0058] ant-table-header is the exclusive CSS class name for the table header area in the Ant Design Table component, used to identify and control the style and layout of the table header (thead) section.

[0059] Table body area constraints: Set the CSS style `flex:1` and `min-height:0` for the table body area of ​​`ant-table-body`; where `flex:1` means that the table body area will fill all the remaining height within the second container (i.e., the height of the second container minus the natural height of the table header area), achieving adaptive height of the table body; `min-height:0` solves the problem of child items not being able to shrink in flex layout, ensuring that the table body area will not expand the container when the amount of data is small, and can form a scrollable area normally when the amount of data is large; the vertical scrolling of the table body area is implemented by the overflow mechanism of the Ant Design Table component itself, without the need to set an additional overflow style;

[0060] The `ant-table-body` can be seen as a display box for table data; all the actual data rows of the table are wrapped in this box. When there is a lot of table data, a scrollbar will appear in this box, allowing users to scroll to view all the data.

[0061] The purpose of min-height:0 is to break the default minimum height limit of an element (min-height:auto), allowing the element to be compressed to any height.

[0062] Width collapse prevention constraint: To prevent the table from collapsing due to too few columns or too short content, or to prevent horizontal scrolling misjudgment due to incorrect column width calculation, the CSS style width:100% and min-width:100% is set for the table element in the content child node inside the Ant Design Table component. This ensures that the table width at least fills the second container, improving the aesthetics and stability of the layout.

[0063] Step S6 is the key step to achieve a fixed table header and an adaptive scrolling table body. Through precise flex style constraints, the height difference between the table header and the table body is achieved. This is all driven by CSS and requires no JavaScript logic.

[0064] S7. Achieve precise height allocation between the table area and the pagination area: Set the style of the second container with height:calc(100%-H) using CSS, so that the sum of the height of the second container and the fixed height H of the third container is equal to the total height of the first container, thus achieving precise height allocation between the table area and the pagination area.

[0065] To ensure that the height of the first container is fully utilized, and that the sum of the heights of the table area and the pagination area equals the total height of the first container, thus avoiding issues such as height gaps and overflow, this step precisely sets the height of the second container: The second container is set with the CSS style `height: calc(100%-H)`, where `H` is the fixed height of the third container set in step S3; `calc(100%-H)` means that the height of the second container is equal to the total height of the first container minus the fixed height of the third container, so that the sum of the heights of the second and third containers is exactly equal to the total height of the first container.

[0066] This height setting enables precise height allocation between the table area and the pagination area, ensuring that the height of the first container is fully and reasonably utilized, while avoiding issues such as height overlap and white space between the two areas; if step S3 is skipped (no pagination / bottom toolbar), the CSS style height:100% is set for the second container, so that the second container fills the entire height of the first container.

[0067] Furthermore, the method for constraining the scaling and scrolling rules of the table header and body in step S6 includes: setting the CSS style of width:100% and min-width:100% for the table element in the content child node inside the AntDesign Table component to ensure that the table at least fills the second container and avoids table width collapse or misjudgment of horizontal scrolling.

[0068] `width: 100%` means that the width of an element will completely inherit the width of its parent element. `min-width: 100%` means that the width of an element cannot be less than 100% of the width of its parent element.

[0069] Furthermore, the method for establishing the height link within the Ant Design Table component in step S5 includes: writing CSS styles using CSSModules in conjunction with the :global selector, so that the styles take effect on the internal wrapper nodes of the Ant Design Table component without modifying the source code of the Ant Design component.

[0070] The :global selector is a special syntax used in front-end development to declare global style rules in a modular or scoped CSS environment.

[0071] Furthermore, the parent container can be any one of the following in the front-end management system: sidebar layout container, drawer container, card container, tabs container, modal container, or page main body flexible layout container.

[0072] Furthermore, the fixed height H in step S3 is 40px-60px, and can be parametrically adjusted according to the design specifications and interaction requirements of the front-end page.

[0073] Furthermore, this CSS-driven height-adaptive layout method is encapsulated as a generic PageTable component. By parameterizing the fixed height H of the third container, it can be reused seamlessly across different front-end pages without requiring separate parameter tuning for the toolbars and layout structures of different pages.

[0074] Furthermore, the CSS-driven height adaptive layout method based on the AntDesign table component also includes: when the amount of data in the AntDesign Table component changes, the size of the parent container changes, or the page window is scaled, the height of the table body area is adaptively adjusted according to the container changes through the automatic redistribution mechanism of flex layout, without the need to write additional JavaScript listening and recalculation logic.

[0075] Furthermore, the masking layer in step S3 is a semi-transparent layer that perfectly matches the size of the third container. The CSS style of the masking layer includes pointer-events:auto, which enables the interception of interactions with the third container. At the same time, the masking layer does not affect the transmission of height links or the stability of the layout structure.

[0076] The key processes in the practical application of this invention include the following steps:

[0077] Page rendering process: The parent container determines the available height → The outer flex of the PageTable passes the height → The Table enables scroll.y='100%' to split the structure → CSS fixes the table header, fills the remaining space and scrolls the table body → The pagination is fixed at the bottom.

[0078] Loading interaction flow: Table enters loading → Spin container maintains 100% height link and flex structure → Table height and scrolling are not disrupted → Pagination area overlay intercepts clicks to avoid accidental operation.

[0079] Container size change process: layout collapse / window scaling / parent container height change → flex automatically reallocates → table body automatically adjusts height and scrolls, no need to listen or recalculate.

[0080] This invention addresses typical failure modes of Ant Design Table component layout in front-end development, providing targeted solutions through the style constraints outlined in the above steps to ensure layout stability. The typical failure modes and corresponding solutions are as follows:

[0081] Failure Mode 1: The outer container is a flex layout, and the child items lack min-height:0, causing the scroll area to fail to shrink, resulting in table body overflow and double scrollbars on the page; Solution: Set min-height:0 for the first container in step S2, and set min-height:0 for the table body area in step S6. By using the double min-height:0 constraint, the scroll area can shrink normally, eliminating table body overflow and double scrollbars;

[0082] Failure Mode 2: When the Table component is in a loading (Spin) nested state, the inner wrapper node does not inherit the height, resulting in scroll.y='100%' having no reference and the table body scrolling failing; Solution: In step S5, establish the height link by setting height:100%+flex vertical layout for nodes such as .ant-spin-nested-loading and .ant-spin-container in the loading state, ensuring that the height is passed layer by layer from the second container to the table body area, so that scroll.y='100%' always has a clear reference;

[0083] Failure Mode 3: The pager / bottom toolbar participates in height allocation or is squeezed, causing layout jitter and the pager to be obscured; Solution: In step S3, set a fixed height H+flex-shrink:0 for the third container so that the pagination area does not participate in flexible height allocation. In step S7, use the calc function to achieve precise height allocation between the table area and the pagination area to ensure that the pager is always fixed below the table and is not squeezed or obscured.

[0084] Failure Mode 4: Table width collapses, causing misjudgment of horizontal scrolling; Solution: In step S6, set width:100%+min-width:100% for the table element inside the table to ensure that the table fills the container and avoid width collapse and misjudgment of horizontal scrolling.

[0085] Failure Mode 5: When the window is resized, the container is collapsed / expanded, or the tabs are switched, the table height cannot adapt automatically and requires additional listening and recalculation. Solution: The whole method is based on the height transfer mechanism of flex layout. When the window is resized or the container size changes, flex layout will automatically redistribute the height. The height of the table body area will adapt and adjust in real time with the container change, without any JavaScript listening and recalculation logic.

[0086] Preferably, the CSS-driven height-adaptive layout method of the present invention can be abstracted into a general Page Table component, encapsulating the multi-layer container structure, CSS styles, loading state handling, and height link constraints within the component, exposing an API consistent with the Ant Design Table component, and setting the pagination height as a configurable parameter. In one embodiment of the present invention, the encapsulation is based on the React framework, achieving parameterized configuration and seamless reuse across pages. The key points of the encapsulation are as follows:

[0087] Parameterized configuration: The fixed height H of the third container is used as a configurable parameter of the component (e.g., props.paginationHeight=52). Users can flexibly adjust it according to the design specifications of different pages without modifying the CSS styles inside the component.

[0088] Internal structure encapsulation: The structure and CSS styles of the first, second, and third containers are encapsulated inside the component, and the API (such as columns, dataSource, scroll, onChange, etc.) consistent with the Ant Design Table component is exposed to the outside world, ensuring that the user's usage habits remain unchanged and reducing the learning cost;

[0089] Loading state encapsulation: The loading state judgment and mask layer display are integrated inside the component. When the user passes loading={true}, a mask layer is automatically added to the third container without the user having to write the mask layer logic separately.

[0090] High-level link style encapsulation: The CSS styles of high-level link nodes are encapsulated in the component's style file. The combination of local scope and global coverage of styles is achieved through CSSModules+:global, avoiding conflicts with business styles.

[0091] Unrestricted reuse: The encapsulated PageTable component can be used directly in any parent container with a computable height, such as sidebar layouts, drawers, cards, tabs, and modals, without the need for separate parameter tuning for different containers or pages, thus completely solving the problem of poor reusability in existing solutions.

[0092] The encapsulated PageTable component is used in much the same way as the native Ant Design Table component, requiring only a few additional configuration parameters. The encapsulated component can be reused seamlessly across different front-end pages and nested containers, offering extremely high reusability. It eliminates the need for separate parameter tuning for different page toolbars and layout structures, significantly improving front-end development efficiency and reducing code maintenance costs.

[0093] This invention is applicable to front-end management systems developed based on the React framework and Ant Design component library, and is especially suitable for scenarios where tables need to be nested in various containers such as sidebar layouts, drawers, cards, tabs, and modals, and where the table header is fixed, the table body is scrollable, and the pager position is stable.

[0094] The present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the CSS-driven height-adaptive layout method based on the Antd table component as described above.

[0095] The present invention also provides a computer device, the computer device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps of the CSS-driven height adaptive layout method based on Antd table components as described above.

[0096] Compared with the prior art, the beneficial effects of the present invention are as follows:

[0097] The CSS-driven height-adaptive layout method based on the Antd table component provided by this invention adopts pure CSS-driven operation, completely abandoning JavaScript height-related logic. The entire process achieves adaptive layout solely through CSS style constraints and the height transfer mechanism of flex layout. No JavaScript code is needed for height measurement, calculation, monitoring, and recalculation, completely eliminating the high code complexity and maintenance costs caused by JavaScript logic in existing solutions. Simultaneously, it reduces DOM read / write operations, avoids synchronous layout calculations and layout jitter, and improves page rendering performance and smoothness, particularly in high-frequency filtering and tab cutting scenarios. In scenarios involving container collapse / expansion and window scaling, the page performance is more stable. Only requiring a calculable height from the parent container, the Table component can achieve height self-adaptation within any container, including sidebar layouts, drawers, cards, tabs, modals, and the main page's flexible layout. This strong height adaptability overcomes the limitations of existing solutions, such as poor adaptability to fixed pixel heights, strong viewport binding to vh units, and high coupling between positioning and layout. When the size of the parent container or the page window changes, the flex layout automatically redistributes the height, with the table body area height adjusting in real-time without any manual intervention. By establishing a unified height chain within the Ant Design Table component and setting consistent height and flex style constraints for multi-layered wrapper nodes in the loading state, the height is ensured to be passed layer by layer from the outer container to the table body area, enabling scrolling.The y='100%' setting provides a clear reference standard, completely resolving issues such as table body scrolling failure, double scrollbars, and table body overflow in existing solutions, achieving consistent layout effects between normal and loading states. The pagination / bottom toolbar is encapsulated as an independent third container, constrained by a fixed height and flex-shrink:0 to exclude it from flexible height allocation. The calc function then precisely allocates the height of the table area and pagination area, resolving issues like paginators being squeezed, obscured, or drifting in existing solutions. It also eliminates layout defects such as outer double scrollbars, table body overflow, and excessive height, improving page aesthetics and user experience. Style overriding of internal nodes in the Ant Design Table component is achieved through CSS Modules+:global selectors or global CSS selectors, without modifying the Ant Design component's source code, demonstrating excellent non-intrusiveness. Furthermore, the definition of height link nodes is compatible, adapting to different versions of Ant Design. If a new wrapper node is introduced in a version update for the Table component, it only needs to be added to the height link node set and the same style constraints applied, resulting in extremely low upgrade costs. Based on the universal flex layout mechanism, CSS style constraints are simple and intuitive. The encapsulated generic component is used in essentially the same way as the native Ant Design Table component, requiring only a few additional parameterized configurations. Front-end developers do not need to deeply understand the internal structure of the Ant Design Table component to quickly get started, reducing the development threshold and learning cost. Attached Figure Description

[0098] Various other advantages and benefits will become apparent to those skilled in the art upon reading the following detailed description of preferred embodiments. The accompanying drawings are for illustrative purposes only and are not intended to limit the invention.

[0099] In the attached diagram:

[0100] Figures 1-6 This is a code example diagram illustrating the application of the CSS-driven height-adaptive layout method based on the Antd table component in a page scenario according to an embodiment of the present invention.

[0101] Figure 7 This is a page rendering of an embodiment of the present invention;

[0102] Figure 8 This is a flowchart of a CSS-driven height-adaptive layout method based on the Antd table component, according to an embodiment of the present invention.

[0103] Figure 9 This is a schematic diagram of the configuration of a computer device according to an embodiment of the present invention. Detailed Implementation

[0104] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of systems and products consistent with some aspects of this disclosure as detailed in the appended claims.

[0105] The terminology used in this disclosure is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. The singular forms “a,” “the,” and “the” as used in this disclosure and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any and all possible combinations of one or more of the associated listed items.

[0106] It should be understood that although the terms first, second, third, etc., may be used in this disclosure to describe various information, such information should not be limited to these terms. These terms are used only to distinguish information of the same type from one another. For example, without departing from the scope of this disclosure, first information may also be referred to as second information, and similarly, second information may also be referred to as first information. Depending on the context, the word "if" as used herein may be interpreted as "when," "when," or "in response to determination."

[0107] The embodiments of the present invention will be described in further detail below.

[0108] Example

[0109] This invention provides a CSS-driven height-adaptive layout method based on the Ant Design table component. Utilizing the vertical height transfer mechanism of flex layout, it achieves height adaptation of the Ant Design Table component through CSS style constraints. Figure 8 As shown, it includes the following steps:

[0110] S1. Determine the height reference base so that the parent container of the Ant Design Table component provides a computable height, or so that the parent container is in a flex layout chain that can pass on height downwards;

[0111] In this embodiment, the parent container is the drawer container in the front-end management system.

[0112] S2. Construct an outer vertically flexible container. Define the first container as the outermost container of the Table component, and deploy the second and third containers inside the first container. Set the display:flex, flex-direction:column, flex:1, min-height:0, and overflow:hidden properties of the first container using CSS to make the first container form a vertically flexible layout and serve as the basic container for height distribution, while avoiding the appearance of double scrollbars on the outer layer.

[0113] S3. Set a fixed-height bottom functional area. If the front-end page has functional areas that need to be fixed below the table, such as a pagination or bottom toolbar, define a third container as an independent container for this functional area. Place the third container as a child node of the first container below the second container. If there is no such functional area, skip this step. In this case, the first container will only contain the second container. Set a fixed height H (value between 40px and 60px) and flex-shrink:0 style for the third container using CSS to prevent the third container from participating in height distribution or being squeezed. When the Table component is in a loading state, apply a mask layer to the third container and disable interaction.

[0114] Specifically, the mask layer is a semi-transparent layer that perfectly matches the size of the third container. The CSS style of the mask layer includes pointer-events:auto, which enables the interception of interactions with the third container. At the same time, the mask layer does not affect the transmission of height links or the stability of the layout structure.

[0115] S4. Trigger the split structure of the table header and body, define the second container as the table area container that holds the Ant Design Table component, deploy the Ant Design Table component in the second container, set the scroll={{y:'100%'}} property on the Table component, and trigger the Ant Design Table component to generate the split structure of the ant-table-header table header area and the ant-table-body table body area.

[0116] S5. Establish the height chain within the Ant Design Table component. Define the height chain node as a collection of multi-layered wrapper nodes formed by the Table component during rendering and loading states. The height chain node must include at least .ant-spin-nested-loading, .ant-spin-container, .ant-table, and .ant-table-container. Set the styles height:100%, display:flex, and flex-direction:column uniformly to all height chain nodes using CSS, so that the height and flex calculations are passed layer by layer along the multi-layered wrapper nodes. If there is an additional intermediate carrier node that causes height truncation, include the intermediate carrier node in the height chain node collection and apply the same style constraints.

[0117] Specifically, CSS styles are written using CSSModules in conjunction with the :global selector, so that the styles apply to the internal wrapper nodes of the AntDesign Table component without modifying the AntDesign component's source code.

[0118] S6. Constrain the scaling and scrolling rules of the table header and body. Set the CSS style flex:00auto to the ant-table-header header area to keep the header area at its natural height and fixed at the top. Set the CSS style flex:1 and min-height:0 to the ant-table-body body area to make the body area fill the remaining height in the second container, and generate a vertical scrollbar by the overflow mechanism of the AntDesign Table component itself.

[0119] Specifically, set the CSS style width:100% and min-width:100% for the table element in the content child node inside the Ant Design Table component to ensure that the table at least fills the second container and avoid table width collapse or misjudgment of horizontal scrolling.

[0120] S7. To achieve precise height allocation between the table area and the pagination area, the style of the second container is set to height:calc(100%-H) using CSS, so that the sum of the height of the second container and the fixed height H of the third container is equal to the total height of the first container, thus completing the precise height allocation between the table area and the pagination area.

[0121] When the data volume of the Ant Design Table component changes, the size of the parent container changes, or the page window is scaled, the height of the table body area is automatically adjusted according to the container changes through the flex layout's automatic redistribution mechanism, without the need to write additional JavaScript listeners and recalculation logic.

[0122] This CSS-driven height-adaptive layout method is encapsulated as a generic PageTable component. By parameterizing the fixed height H of the third container, it can be reused in different front-end pages without the need for separate parameter tuning for the toolbars and layout structures of different pages.

[0123] A practical application of this invention in a webpage scenario, as shown in the example code. Figures 1-6 As shown:

[0124] 1) ingle / index.tsx (e.g.) Figure 1 (as shown)

[0125] 2) age / index.tsx (e.g.) Figure 2 (as shown)

[0126] 3) page / index.module.css (such as Figure 3 (as shown)

[0127] 4) page-table / index.tsx (such as Figure 4 (as shown)

[0128] 5) table / antd.module.css (such as Figure 5 (as shown)

[0129] 6) journal-table / index.tsx (such as Figure 6 (As shown).

[0130] Figure 7 The above example screenshots show the effect of the Ant Design Table component's CSS-driven height-adaptive layout, which eliminates issues such as double scrollbars, table body overflow, and pagination compression.

[0131] The CSS-driven height-adaptive layout method in this embodiment successfully achieves height-adaptive layout of the Ant DesignTable component within the container, fully meeting all the requirements of the page scenario: no JavaScript height measurement, calculation, listening, or recalculation logic is used throughout the process, and it is completed solely through CSS; the table header is fixed, the table body scrolls adaptively, and the paginator is fixed at the bottom, with no overflow, no obstruction, and no double scrollbars; the height link is transmitted normally during loading, the table body scrolling does not fail, and the paginator interaction is effectively intercepted; when the container size and data volume change, the table height automatically adapts, resulting in high layout stability.

[0132] The CSS-driven height-adaptive layout method based on the Antd table component of this invention has strong industrial applicability. The encapsulated PageTable component can be reused in different containers without difference, requiring only parameterized adjustment of the pagination height. It has high reusability and can be widely used in various front-end systems developed based on the React framework and Ant Design component library, including enterprise back-end management systems, e-commerce management platforms, financial risk control systems, government management systems, data visualization platforms, etc. This method can be directly encapsulated as a general component and integrated into the front-end component library to achieve cross-project and cross-team reuse, greatly improving front-end development efficiency and reducing code maintenance costs. At the same time, the core idea of ​​this method can be migrated to the table component layout of other UI component libraries (such as ElementUI, Vuetify, etc.), with good technology transferability and expansion space.

[0133] The implementation of this invention requires no additional hardware equipment; only the corresponding CSS styles and component structures need to be written during the front-end development process. The development cost is low, the implementation difficulty is small, and it can be quickly deployed to actual projects. It improves component reusability and page rendering performance and can be widely used in the table layout development of front-end management systems.

[0134] This invention also provides a computer device. Figure 9 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention; see the accompanying drawings. Figure 9 As shown, the computer device includes: an input device 23, an output device 24, a memory 22, and a processor 21; the memory 22 is used to store one or more programs; when the one or more programs are executed by the one or more processors 21, the one or more processors 21 implement the CSS-driven height-adaptive layout method based on Antd table components provided in the above embodiments; wherein the input device 23, the output device 24, the memory 22, and the processor 21 can be connected via a bus or other means. Figure 9 Taking the example of a connection between China and Israel via a bus.

[0135] The memory 22, as a read / write storage medium for a computing device, can be used to store software programs and computer-executable programs, such as the program instructions corresponding to the CSS-driven height-adaptive layout method based on the Antd table component described in this embodiment of the invention. The memory 22 may primarily include a program storage area and a data storage area. The program storage area may store the operating system and at least one application program required for a function; the data storage area may store data created based on the use of the device. Furthermore, the memory 22 may include high-speed random access memory and non-volatile memory, such as at least one disk storage device, flash memory device, or other non-volatile solid-state storage device. In some instances, the memory 22 may further include memory remotely located relative to the processor 21, and these remote memories can be connected to the device via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0136] Input device 23 can be used to receive input digital or character information, and generate key signal inputs related to user settings and function control of the device; output device 24 may include display devices such as a display screen.

[0137] The processor 21 executes various functional applications and data processing of the device by running software programs, instructions and modules stored in the memory 22, thereby realizing the above-mentioned CSS-driven height adaptive layout method based on Antd table components.

[0138] The computer equipment provided above can be used to execute the CSS-driven height adaptive layout method based on Antd table components provided in the above embodiments, and has corresponding functions and beneficial effects.

[0139] This invention also provides a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to execute the CSS-driven height-adaptive layout method based on the Antd table component provided in the above embodiments. The storage medium can be any type of memory device or storage device, including: mounting media such as CD-ROM, floppy disk, or magnetic tape; computer system memory or random access memory such as DRAM, DDR RAM, SRAM, EDO RAM, Rambus RAM, etc.; non-volatile memory such as flash memory, magnetic media (e.g., hard disk or optical storage); registers or other similar types of memory components; the storage medium may also include other types of memory or combinations thereof; furthermore, the storage medium may reside in a first computer system in which the program is executed, or it may reside in a different second computer system connected to the first computer system via a network (such as the Internet); the second computer system can provide program instructions to the first computer for execution. The storage medium includes two or more storage media that may reside in different locations (e.g., in different computer systems connected via a network). The storage medium may store program instructions (e.g., specifically implemented as a computer program) executable by one or more processors.

[0140] Of course, the computer-executable instructions provided in the embodiments of the present invention are not limited to the CSS-driven height adaptive layout method based on Antd table components described in the above embodiments, but can also execute related operations in the CSS-driven height adaptive layout method based on Antd table components provided in any embodiment of the present invention.

[0141] The technical solution of the present invention has been described above with reference to the preferred embodiments shown in the accompanying drawings. However, it will be readily understood by those skilled in the art that the scope of protection of the present invention is obviously not limited to these specific embodiments. Without departing from the principles of the present invention, those skilled in the art can make equivalent changes or substitutions to the relevant technical features, and the technical solutions after these changes or substitutions will all fall within the scope of protection of the present invention.

[0142] The above description is merely a preferred embodiment of the present invention and is not intended to limit the invention. Various modifications and variations can be made to the present invention by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A CSS-driven height-adaptive layout method based on Antd table components, characterized in that... By leveraging the vertical height propagation mechanism of flex layout and using CSS style constraints to achieve adaptive height for the Ant Design Table component, the following steps are included: S1. Determine the height reference base so that the parent container of the Ant Design Table component provides a computable height, or so that the parent container is in a flex layout chain that can pass on height downwards; S2. Construct an outer vertically flexible container. Define the first container as the outermost container of the Table component, and deploy the second and third containers inside the first container. Set the display:flex, flex-direction:column, flex:1, min-height:0, and overflow:hidden properties of the first container using CSS to make the first container form a vertically flexible layout and serve as the basic container for height distribution, while avoiding the appearance of double scrollbars on the outer layer. S3. Set a fixed-height bottom functional area. If the front-end page has functional areas that need to be fixed below the table, such as a pagination bar or a bottom toolbar, define a third container as an independent container for this functional area. Place the third container as a child node of the first container below the second container. If there is no such functional area, skip this step. In this case, the first container will only contain the second container. Set a fixed height H and flex-shrink:0 for the third container using CSS to prevent the third container from participating in height distribution or being squeezed. When the Table component is in a loading state, apply a mask layer to the third container and disable interaction. S4. Trigger the split structure of the table header and body, define the second container as the table area container that holds the Ant Design Table component, deploy the Ant Design Table component in the second container, set the scroll={{y:'100%'}} property on the Table component, and trigger the Ant Design Table component to generate the split structure of the ant-table-header table header area and the ant-table-body table body area. S5. Establish the height chain within the Ant Design Table component. Define the height chain node as a collection of multi-layered wrapper nodes formed by the Table component during rendering and loading states. The height chain node must include at least .ant-spin-nested-loading, .ant-spin-container, .ant-table, and .ant-table-container. Set the styles height:100%, display:flex, and flex-direction:column uniformly to all height chain nodes using CSS, so that the height and flex calculations are passed layer by layer along the multi-layered wrapper nodes. If there is an additional intermediate carrier node that causes height truncation, include the intermediate carrier node in the height chain node collection and apply the same style constraints. S6. Constrain the scaling and scrolling rules of the table header and body. Set the CSS style flex:00auto to the ant-table-header header area to keep the header area at its natural height and fixed at the top. Set the CSS style flex:1 and min-height:0 to the ant-table-body body area to make the body area fill the remaining height in the second container, and generate a vertical scrollbar by the overflow mechanism of the AntDesign Table component itself. S7. To achieve precise height allocation between the table area and the pagination area, the style of the second container is set to height:calc(100%-H) using CSS, so that the sum of the height of the second container and the fixed height H of the third container is equal to the total height of the first container, thus completing the precise height allocation between the table area and the pagination area.

2. The CSS-driven height-adaptive layout method based on Antd table components according to claim 1, characterized in that, The method for constraining the scaling and scrolling rules of the table header and body in step S6 includes setting the CSS style of width:100% and min-width:100% for the table element in the content child node inside the Ant Design Table component to ensure that the table at least fills the second container and avoids table width collapse or misjudgment of horizontal scrolling.

3. The CSS-driven height-adaptive layout method based on Antd table components according to claim 1, characterized in that, The method for establishing the height link within the Ant Design Table component in step S5 includes: writing CSS styles using CSSModules in conjunction with the :global selector, so that the styles take effect on the internal wrapper nodes of the Ant Design Table component without modifying the source code of the Ant Design component.

4. The CSS-driven height-adaptive layout method based on Antd table components according to claim 1, characterized in that, The parent container can be any one of the following in the front-end management system: sidebar layout container, drawer container, card container, tabs container, modal container, or page main body flexible layout container.

5. The CSS-driven height-adaptive layout method based on Antd table components according to claim 1, characterized in that, The fixed height H in step S3 is 40px-60px, and can be parametrically adjusted according to the design specifications and interaction requirements of the front-end page.

6. The CSS-driven height-adaptive layout method based on Antd table components according to claim 1, characterized in that, This CSS-driven height-adaptive layout method is encapsulated as a generic PageTable component. By parameterizing the fixed height H of the third container, it can be reused in different front-end pages without the need for separate parameter tuning for the toolbars and layout structures of different pages.

7. The CSS-driven height-adaptive layout method based on Antd table components according to claim 1, characterized in that, Also includes: When the data volume of the Ant Design Table component changes, the size of the parent container changes, or the page window is scaled, the height of the table body area is automatically adjusted according to the container changes through the flex layout's automatic redistribution mechanism, without the need to write additional JavaScript listeners and recalculation logic.

8. The CSS-driven height-adaptive layout method based on Antd table components according to claim 1, characterized in that, The masking layer in step S3 is a semi-transparent layer that perfectly matches the size of the third container. The CSS style of the masking layer includes pointer-events:auto, which enables the interception of interactions with the third container. At the same time, the masking layer does not affect the transmission of height links or the stability of the layout structure.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps of the CSS-driven height-adaptive layout method based on the Antd table component as described in any one of claims 1-8.

10. A computer device, the computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the CSS-driven height-adaptive layout method based on the Antd table component as described in any one of claims 1-8.

Images