Overview
The KTable component is an accessible and customizable table component designed
to handle a variety of data presentation needs. The component is suitable for both simple
and complex data tables. It offers:
- Offers built-in sorting by default
- Integrates with already sorted data
- Keyboard navigation
- Dynamic column resizing
- Sticky headers
Usage
Table caption
A caption is required via the caption prop. Provide a concise and
translated string
that accurately describes the table’s content. See
MDN
for more.
Table without sorting functionality
This is an example to show how KTable can be used without any sorting
functionality, as a simple table.
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.
Table showing use of slots
This is an example to show how slots can be used in KTable. The table currently
provides slots for header and cell which can be used to customize
the table header and cell content respectively.
Table with custom column widths
This is an example to show how KTable can be used with custom column widths.
The column widths are defined in the headers prop. The
width property is used to define the overall width of the column. The
minWidth defines the minimum width of column, below which the column will not
shrink.
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.
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. If built-in sorting is
disabled via disableBuiltinSorting, defaultSort will have no
effect.
The defaultSort attribute takes an object with two properties -
columnId and direction. The columnId is the unique
identifier of the column based on which the table should be sorted. The
direction can be either asc or desc.
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
headers | An array of objects:
{ label, dataType, minWidth, width, columnId }
representing the headers of the table.
The dataType can be one of 'string', 'number', 'date', or 'undefined'.
label and dataType are required. minWidth and width are optional.
columnId is an unique identifier for the column, and can be a number or a string. | array | — | true |
rows | An array of arrays representing the rows of the table.
Each row should have the same number of elements as the headers array. | array | — | true |
caption | The caption of the table | string | — | true |
sortable | Enables or disables sorting functionality for the table headers. | boolean |
false
| — |
emptyMessage | The message to display when the table is empty. | string |
'No data available'
| — |
dataLoading | Indicates whether the data is currently being loaded. | boolean |
false
| — |
defaultSort | Indicates whether the table is to be sorted by default by any header or not.
By default it is an empty object which means no default sorting is to be used.
It accepts a configuration object { columnId, direction }.
columnId references a columnId defined for a header in headers.
This specifies a column by which the table should be sorted when initially loaded.
direction can be 'asc' for ascending or 'desc' for descending sort direction. | object |
{}
| — |
disableBuiltinSorting | Disables built-in sort function.
This is useful when you want to define your own sorting logic.
Refer to the examples above for more details. | boolean |
false
| — |
Slots
| Name | Description |
|---|---|
header | Scoped slot for customizing the content of each header cell. |
cell | Scoped slot for customizing the content of each data cell. |