From 5830c3e522779527640e3059d7d83ea46437d034 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Thu, 18 Feb 2021 13:52:36 +0300 Subject: [PATCH] ADd docs --- src/views/datatable/DataTableDoc.vue | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue index 3d27982d2..895be3d7d 100755 --- a/src/views/datatable/DataTableDoc.vue +++ b/src/views/datatable/DataTableDoc.vue @@ -907,7 +907,15 @@ matchModes: [ -
Flex Scroll
+
Column Widths of a Scrollable Table
+

Scrollable table uses flex layout in vertical scrolling with auto size. As a result use flex property when giving + a width to a column. When horizontal scrolling is enabled, this is not a requirement as columns in horizontal scrolling do not have auto size.

+

+
+ +
Flex Scroll

In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds to the dialog size changes such as maximizing.
-
Full Page Scroll
+
Full Page Scroll

FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the full page demo for an example.
-
Horizontal Scrolling
+
Horizontal Scrolling

For horizontal scrolling only, it is required to set scrollDirection to "horizontal" and give widths to columns.
-
Horizontal and Vertical Scrolling
+
Horizontal and Vertical Scrolling

Set scrollDirection to "both" and give widths to columns to scroll both ways.
-
Frozen Rows
+
Frozen Rows

Frozen rows are used to fix certain rows while scrolling, this data is defined with the frozenValue property.
-
Frozen Columns
+
Frozen Columns

Certain columns can be frozen by using the frozen property of the column component. In addition alignFrozen is available to define whether the column should be fixed on the left or right.