
Fixed header function
When scrolling data, the header is fixed to facilitate viewing the header information of each column
The fixed header of this component adopts the double header
method. When there is a common problem, the column is not aligned. Please add some styles according to your actual situation.
Please set the width of each column as much as possible to avoid the problem of misalignment of column width
Set Height=200
and IsFixedHeader="true"
fixed header
Demo
Example of vertical scroll bar after more data is loaded
Please set a column width, allow a column width not set, auto-fill
Set the Height=200
and IsFixedHeader="true"
fixed header, when the displayed data on each page is 10
rows, the height exceeds the set value 200
, A vertical scroll bar appears on the Table component
Demo
All columns are set to width, and a horizontal scroll bar will automatically appear when the screen is too small
Set the AllowResizing
property while fixing the header so that the column width can be adjusted
Demo
By setting the Height
parameter to fix the header,
, by setting AllowResizing
, the parameter allows the column width to be adjusted
Do not set the Height
value to adapt the height through the parent container
Demo
In this example, the Table
table component cannot set the height because the height may not be known. The parent container may get the height through the style. At this time, the Table
component will try to Use adaptive fill to fill the height, this application scenario is the most in actual combat, in this example, the simulated parent height is 300px
Table
inside Dialog
Demo
Tips for using theTable
with a fixed header in the Dialog
:
Dialog
should assign values to theClass
parameter of DialogOption
. In this example, it is set todialog-table
. This operation is to enable us to customize the style to locate theTable
component's parent container in the Dialog
and set its height, Here you can use the writing method of adaptive height height: calc (100vh - 400px);
; When the parent container of a Table
component has a height, the component itself will perform adaptive height adaptation through calculation<style>
.dialog-table .modal-body {
height: calc(100vh - 400px);
overflow: hidden;
}
</style>
B station related video link
交流群