diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue index 801155d8e..831535b15 100644 --- a/docs/pages/ktable.vue +++ b/docs/pages/ktable.vue @@ -39,15 +39,15 @@ { label: 'Age', dataType: 'number', columnId: 'age' }, { label: 'City', dataType: 'string', columnId: 'city' }, ], - rows: [ - ['John Doe', 28, 'New York'], - ['Jane Smith', 34, 'Los Angeles'], - ['Samuel Green', 22, 'Chicago'], - ['Alice Johnson', 30, 'Houston'], - ['Michael Brown', 45, 'Phoenix'], - ['Emily Davis', 27, 'Philadelphia'], - ] - }; + rows: [ + ['John Doe', 28, 'New York'], + ['Jane Smith', 34, 'Los Angeles'], + ['Samuel Green', 22, 'Chicago'], + ['Alice Johnson', 30, 'Houston'], + ['Michael Brown', 45, 'Phoenix'], + ['Emily Davis', 27, 'Philadelphia'], + ] + }; }, @@ -64,10 +64,9 @@

Table with sorting

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

- Clicking the same header multiple times toggles the sort direction cyclically in the order of ascending, descending, and unsorted. + Clicking the same header multiple times toggles the sort direction cyclically in the order of ascending, descending, and unsorted.

@@ -233,7 +232,7 @@ - +

Table with default sort

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. @@ -264,7 +263,6 @@ caption="Unsortable Table with Rows Sorted by 'Age' Column" :defaultSort="{ columnId: 'age', direction: 'asc' }" /> - @@ -308,7 +306,7 @@ /> - +

Disable built-in sorting

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.