KTable link to current page

develop | Release notes

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 without sorting functionality

This is an example to show how KTable can be used without any sorting functionality, as a simple table. 


      <KTable
        :headers="headers"
        :rows="rows"
        caption="Non Sortable Table"
      />

    

  data() {
    return {
      headers: [
        { label: 'Name', dataType: 'string' },
        { label: 'Age', dataType: 'number' },
        { label: 'City', dataType: 'string' },
      ],
      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'],
      ]
    };
  },
Non-sortable table
Name Age City
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

Table with Default Sorting

The KTable can be used with default 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 default sorting enabled. 


      <KTable
        :headers="headers"
        :rows="rows"
        caption="Table with built-in sorting"
        sortable
      />

    

  data() {
    return {
      headers: [
        { label: 'Name', dataType: 'string' },
        { label: 'Age', dataType: 'number' },
        { label: 'City', dataType: 'string' },
      ],
      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'],
      ]
    };
  },
In-Built Sorting Table
Name Age City
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

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. 


      <KTable
        :headers="slotHeaders"
        :rows="slotRows"
        caption="Table showing use of slots"
        sortable
      >
    <template #header="{ header, colindex }">
      <span>{ header.label } (Local)</span>
    </template>
    <template #cell="{ content, rowIndex, colIndex }">
      <span v-if="colIndex === 1">{ content } years old</span>
      <span v-else-if="colIndex === 4"><KButton>Test</KButton></span>
      <span v-else>{ content }</span>
    </template>
  </KTable>

    

  data() {
    return {
      slotHeaders: [
        { label: 'Name', dataType: 'string' },
        { label: 'Age', dataType: 'number' },
        { label: 'City', dataType: 'string' },
        { label: 'Joined', dataType: 'date' },
        { label: 'Misc', dataType: 'undefined' },
      ],
      slotRows: [
        ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
        ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
        ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
        ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
      ],
    };
  },
Table showing use of slots
Name (Local) Age (Local) City (Local) Joined (Local) Misc (Local)
John Doe28 years oldNew York2022-01-15T00:00:00Z
Jane Smith34 years oldLos Angeles2021-12-22T00:00:00Z
Samuel Green22 years oldChicago2023-03-10T00:00:00Z
Alice Johnson30 years oldHouston2020-07-18T00:00:00Z

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. 


      <KTable
        :headers="headersWithCustomWidths"
        :rows="customRows"
        caption="Table showing columns with custom widths"
        sortable
      />

    

  data() {
    return {
      headersWithCustomWidths: [
        { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%' },
        { label: 'Age', dataType: 'number', minWidth: '100px', width: '33%' },
        { label: 'City', dataType: 'string', minWidth: '200px', width: '25%' },
        { label: 'Joined', dataType: 'date', minWidth: '150px', width: '20%' },
        { label: 'Misc', dataType: 'undefined', minWidth: '100px', width: '20%' },
      ],
      customRows: [
        ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
        ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
        ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
        ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
      ],
    };
  },
Table showing columns with custom widths
Name Age City Joined Misc
John Doe 28 New York 2022-01-15T00:00:00Z N/A
Jane Smith 34 Los Angeles 2021-12-22T00:00:00Z N/A
Samuel Green 22 Chicago 2023-03-10T00:00:00Z N/A
Alice Johnson 30 Houston 2020-07-18T00:00:00Z N/A

Props
#

Name Description Type Default Required
headers
#
An array of objects { label, dataType, minWidth, width }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.
 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
disableDefaultSorting
#
Disables the default sorting when sortable is true. Facilitates integration with externally sorted data.
 boolean false —
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 —

Slots
#

Name Description
header
#
Scoped slot for customizing the content of each header cell. Provides a header object header and its column index colIndex.
cell
#
Scoped slot for customizing the content of each data cell. Provides the content of a data cell content, its row index rowIndex, its column index colIndex, and the corresponding whole row object row.