fix: address pr feedback

docs/components/table-view.md

@@ -544,7 +544,7 @@ A boolean to enable expanding each table row. Useful for providing additional in
 </KTableView>
 ```
 
-### hideHeader
+### hideHeaders
 
 A boolean to hide table headers. Only recomended when used in nested table. Refer to [Expandable Rows](#expandable-rows) section documentation for more details. Defaults to `false`.
 
@@ -719,7 +719,7 @@ Both parent and nested tables in this example contain static data for demonstrat
 A nested table that complements the parent table requires some special handling:
 
 * The `nested` prop must be set to `true`
-* Table headers can be hidden using the [`hideHeader` prop](#hideheader). Value still need to be passed through the `headers` prop, and this is where the `nestedHeaders` slot prop becomes useful. It returns an array of header objects, simplifying the synchronization of column visibility when it is enabled in the parent table
+* Table headers can be hidden using the [`hideHeaders` prop](#hideHeaders). Value still need to be passed through the `headers` prop, and this is where the `nestedHeaders` slot prop becomes useful. It returns an array of header objects, simplifying the synchronization of column visibility when it is enabled in the parent table
 * To better align the columns of the parent and nested tables, the `columnWidths` slot prop can be utilized. It returns an object that can be passed to the nested table through the [`tablePreferences` prop](#tablepreferences). Each time a column is resized in the parent table, the nested table will be updated accordingly
 
 :::warning NOTE
@@ -748,7 +748,7 @@ If bulk actions is enabled in parent table, it will be disabled in the nested ta
     <KTableView
       :headers="nestedHeaders"
       :data="cpData"
-      hide-header
+      hide-headers
       nested
       :pagination-attributes="{ totalCount: cpData.length }"
       :table-preferences="{ columnWidths }"
@@ -780,7 +780,7 @@ If bulk actions is enabled in parent table, it will be disabled in the nested ta
     <KTableView
       :headers="nestedHeaders"
       :data="nestedData"
-      hide-header
+      hide-headers
       nested
       :pagination-attributes="{ totalCount: nestedData.length }"
       :table-preferences="{ columnWidths }"
@@ -1254,6 +1254,10 @@ Emitted when the user performs sorting, resizes columns or toggles column visibi
 
 Emitted when user interacts with checkboxes in bulk actions column. Payload is array of selected table row objects.
 
+### row-expand
+
+Emitted when row is expanded (when [`expandableRows` prop](#expandablerows) is `true`). Payload is expanded row data.
+
 <script setup lang="ts">
 import { ref } from 'vue'
 import { AddIcon, SearchIcon, MoreIcon } from '@kong/icons'

sandbox/pages/SandboxTableView/SandboxTableView.vue

@@ -281,7 +281,7 @@
             <KTableView
               :data="tableData"
               :headers="nestedHeaders"
-              hide-header
+              hide-headers
               nested
               :pagination-attributes="{ totalCount: tableData.length }"
               :table-preferences="{ columnWidths }"
@@ -371,7 +371,7 @@
             <KTableView
               :data="tableData"
               :headers="nestedHeaders"
-              hide-header
+              hide-headers
               nested
               :pagination-attributes="{ totalCount: tableData.length }"
               :table-preferences="{ columnWidths }"
@@ -403,7 +403,7 @@
             <KTableView
               :data="tableData"
               :headers="nestedHeaders"
-              hide-header
+              hide-headers
               nested
               :pagination-attributes="{ totalCount: tableData.length }"
               :row-link="getRowOneTwoLink"

src/components/KTableView/KTableView.cy.ts

@@ -510,12 +510,27 @@ describe('KTableView', () => {
       })
     })
 
-    it('does not display table header when hideHeader prop is true', () => {
+    it('emits row-expand event when row is expanded', () => {
       mount(KTableView, {
         props: {
           headers: options.headers,
           data: options.data,
-          hideHeader: true,
+          expandableRows: true,
+        },
+      })
+
+      cy.getTestId('expandable-row-control').eq(0).click().then(() => {
+        cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'row-expand').and('have.length', 1)
+      })
+    })
+
+
+    it('does not display table header when hideHeaders prop is true', () => {
+      mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+          hideHeaders: true,
         },
       })
 

src/components/KTableView/KTableView.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="k-table-view"
-    :class="{ 'hide-header': hideHeader }"
+    :class="{ 'hide-headers': hideHeaders }"
   >
     <div
       v-if="hasToolbarSlot"
@@ -121,7 +121,7 @@
           }"
         >
           <thead
-            v-if="!hideHeader"
+            v-if="!hideHeaders"
             :class="{ 'is-scrolled': isScrolledVertically }"
           >
             <tr
@@ -322,7 +322,7 @@
                       :class="{ 'expanded': expandedRows.includes(rowIndex) }"
                       data-testid="expandable-row-control"
                       type="button"
-                      @click="toggleRow(rowIndex)"
+                      @click="toggleRow(rowIndex, row)"
                     >
                       <ChevronRightIcon class="expandable-row-control-icon" />
                     </button>
@@ -570,7 +570,7 @@ const props = defineProps({
   /**
    * Hide the table header
    */
-  hideHeader: {
+  hideHeaders: {
     type: Boolean,
     default: false,
   },
@@ -595,6 +595,7 @@ const emit = defineEmits<{
   (e: 'get-next-offset'): void
   (e: 'get-previous-offset'): void
   (e: 'row-select', data: TableViewData): void
+  (e: 'row-expand', data: any): void
 }>()
 
 const attrs = useAttrs()
@@ -1092,14 +1093,15 @@ const emitTablePreferences = (): void => {
  */
 const expandableRowHeader = { key: TableViewHeaderKeys.EXPANDABLE, label: 'Expandable rows controls', hideLabel: true }
 const expandedRows = ref<number[]>([])
-const toggleRow = async (rowIndex: number): Promise<void> => {
+const toggleRow = async (rowIndex: number, row: any): Promise<void> => {
   setActualColumnWidths()
   await nextTick()
 
   if (expandedRows.value.includes(rowIndex)) {
     expandedRows.value = expandedRows.value.filter((row) => row !== rowIndex)
   } else {
     expandedRows.value = [...expandedRows.value, rowIndex]
+    emit('row-expand', row)
   }
 }
 

src/styles/mixins/_tables.scss

@@ -331,7 +331,7 @@
                     );
                   }
 
-                  &.hide-header {
+                  &.hide-headers {
                     th,
                     td {
                       &:first-child {