diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue index bc0b176cd..801155d8e 100644 --- a/docs/pages/ktable.vue +++ b/docs/pages/ktable.vue @@ -61,12 +61,13 @@ -
- The KTable
can be used with sorting functionality, allowing you to sort data on the client side without the need for server requests. There are 4 permissible data types - string
,number
,date
and undefined
. Columns declared with undefined
data type are not sortable. This example demonstrates a table with sorting enabled. To allow client side sorting, set the sortable
attribute to true
.
+ The KTable
offers built-in sorting functionality. There are 4 permissible data types - string
,number
,date
and undefined
. Columns declared with undefined
data type are not sortable. This example demonstrates a table with sorting enabled via the sortable
prop.
+
- You can also notice that clicking the same header multiple times toggles the sort direction cyclically in the order of asc
, desc
and none
. The none
state is the default state when the table is loaded by default.
+ Clicking the same header multiple times toggles the sort direction cyclically in the order of ascending, descending, and unsorted.
- This is an example to show how KTable
can be used with the defaultSort
attribute to sort the table based on a particular column. This is useful if the table needs to be sorted based on any column from the beginning itself (by default). The defaultSort
attribute can be used irrespective of the sortable
attribute (as sortable
is used to configure whether the client has sorting capabilities or not).
+ This is an example to show how to use the defaultSort
prop to sort the table based on a particular column upon the initial load. The defaultSort
attribute can be used irrespective of the sortable
attribute.
@@ -247,7 +248,7 @@
- You can make use of the disableBuiltinSorting
attribute to disable all sorting functionality by the table component. This is useful when you want to display the data in a particular order or you want to define a custom sorting function.
+ For sortable
tables, you can use the disableBuiltinSorting
prop to disable built-in sort function. This is useful when the table receives already sorted data, for example when sorting is done by backend or a custom sorting function outside the table. In this case, when one of the header sort buttons is clicked, the table won't sort the column itself, but only emit the changeSort
event to notify the parent component to handle the sorting logic. The event contains column index of the header and the sort order in its payload.