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 @@ -

Table with Sorting

+

Table with sorting

- 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.

@@ -233,9 +234,9 @@ -

Table with Default Sort

+

Table with default sort

- 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 @@

-

Sortable Table with Rows Sorted by 'Age' Column

+

Sortable table with rows sorted by 'Age' column

-

Unsortable Table with Rows Sorted by 'Age' Column

+

Unsortable table with rows sorted by 'Age' column

-

Disable Builtin Sorting

+

Disable built-in sorting

- 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.