fix(ktable): props.headers should be reactive [MA-3028] (#2262)

- Copy changes to internal ref on prop change.
- Update tests.
- Type `headers` prop and loosen type restrictions.

src/components/KTable/KTable.cy.ts

@@ -425,6 +425,36 @@ describe('KTable', () => {
       cy.get('.table').find('.sort-icon').last().click()
       cy.get('.table').find('td:nth-child(4)').first().should('has.text', 'Just now')
     })
+
+    it('reacts to changes in headers', () => {
+      mount(KTable, {
+        propsData: {
+          fetcher: () => {
+            return {
+              data: largeDataSet,
+            }
+          },
+          loading: false,
+          headers: [
+            { label: 'Name', key: 'name' },
+          ],
+        },
+      }).then((component) => {
+        cy.get('.table').find('th').should('have.length', 1)
+        cy.getTestId('table-header-name').should('be.visible').then(() => {
+          component.wrapper.setProps({
+            headers: [
+              { label: 'Name', key: 'name' },
+              { label: 'ID', key: 'id' },
+            ],
+          }).then(() => {
+            cy.get('.table').find('th').should('have.length', 2)
+            cy.getTestId('table-header-id').should('be.visible')
+            cy.get('.table').find('td').eq(1).should('contain', '517526354743085')
+          })
+        })
+      })
+    })
   })
 
   describe('sorting', () => {

src/components/KTable/KTable.vue

@@ -432,7 +432,7 @@ const props = defineProps({
    * A prop to pass in an array of headers for the table
    */
   headers: {
-    type: Array,
+    type: Array as PropType<TableHeader[]>,
     default: () => [],
   },
   /**
@@ -861,13 +861,20 @@ const initData = () => {
 
   // get table headers
   if (props.headers && props.headers.length) {
-    tableHeaders.value = props.headers as TableHeader[]
+    tableHeaders.value = props.headers
   }
 
   // trigger setting of tableFetcherCacheKey
   hasInitialized.value = true
 }
 
+// Ensure `props.headers` are reactive.
+watch(() => props.headers, (newVal: TableHeader[]) => {
+  if (newVal && newVal.length) {
+    tableHeaders.value = newVal
+  }
+}, { deep: true })
+
 const previousOffset = computed((): string | null => offsets.value[page.value - 1])
 
 // once `initData()` finishes, setting tableFetcherCacheKey to non-falsey value triggers fetch of data

src/types/table.ts

@@ -17,7 +17,7 @@ export interface TableHeader {
   /** Must be unique for each column */
   key: string
   /** Visible column header text */
-  label: string
+  label?: string
   /** In a nutshell, this property defines whether sort icon should be displayed next to the column header and whether the column header will emit sort event upon clicking on it */
   sortable?: boolean
   /** Allow toggling column visibility */