fix(ktableview): row-expanded prop and event [KHCP-14243]

Kong · Nov 26, 2024 · facac70 · facac70
1 parent a941be5
commit facac70
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/sandbox/pages/SandboxTableView/SandboxTableView.vue b/sandbox/pages/SandboxTableView/SandboxTableView.vue
@@ -129,12 +129,13 @@
           </template>
         </KTableView>
       </SandboxSectionComponent>
-      <SandboxSectionComponent title="rowExpandable">
+      <SandboxSectionComponent title="rowExpandable & rowExpanded">
         <KTableView
           :data="tableData"
           :headers="headers()"
           :pagination-attributes="{ totalCount: tableData.length }"
           :row-expandable="getRowExpandable"
+          :row-expanded="getRowExpanded"
         >
           <template #action-items>
             <SandboxTableViewActions />
@@ -628,6 +629,8 @@ const getRowBulkAction = (data: Record<string, any>): RowBulkAction => {
 
 const getRowExpandable = (row: Record<string, any>): boolean => row.id % 2 === 0
 
+const getRowExpanded = (row: Record<string, any>): boolean => row.id % 4 === 0
+
 const getRowOneTwoLink = (row: Record<string, any>): RowLink => {
   if (row.id === 1) {
     return getRowLinksRouter(row)

diff --git a/src/components/KTableView/KTableView.vue b/src/components/KTableView/KTableView.vue
@@ -387,6 +387,7 @@ import type {
   PageSizeChangeData,
   TableViewProps,
   TableViewSelectState,
+  RowExpandPayload,
 } from '@/types'
 import { EmptyStateIconVariants, TableViewHeaderKeys } from '@/types'
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30, KUI_SPACE_60 } from '@kong/design-tokens'
@@ -422,12 +423,13 @@ const props = withDefaults(defineProps<TableViewProps>(), {
   hidePagination: false,
   paginationAttributes: () => ({}),
   rowExpandable: () => false,
+  rowExpanded: () => false,
   hideHeaders: false,
   nested: false,
   hidePaginationWhenOptional: false,
   hideToolbar: false,
   /**
-   * KTableData props defaults
+   * KTableView props defaults
    */
   data: () => ([]),
   headers: () => ([]),
@@ -445,7 +447,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
+  (e: 'update:row-expanded', data: RowExpandPayload): void
 }>()
 
 const attrs = useAttrs()
@@ -974,20 +976,35 @@ const emitTablePreferences = (): void => {
 }
 
 const hasExpandableRows = computed((): boolean => !props.nested && props.data.some((row: Record<string, any>) => props.rowExpandable(row)))
+const expandableRowHeader = { key: TableViewHeaderKeys.EXPANDABLE, label: 'Expandable rows controls', hideLabel: true }
+/**
+ * Get the expanded rows from the prop
+ */
+const getExpandedRows = (): number[] => {
+  const initialExpandedRows: number[] = []
+
+  props.data.forEach((row, index) => {
+    if (props.rowExpanded(row)) {
+      initialExpandedRows.push(index)
+    }
+  })
+
+  return initialExpandedRows
+}
+const expandedRows = ref<number[]>(getExpandedRows())
 /**
  * Toggle visibility of expendable row content
  */
-const expandableRowHeader = { key: TableViewHeaderKeys.EXPANDABLE, label: 'Expandable rows controls', hideLabel: true }
-const expandedRows = ref<number[]>([])
 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)
+    emit('update:row-expanded', { row, state: false })
   } else {
     expandedRows.value = [...expandedRows.value, rowIndex]
-    emit('row-expand', row)
+    emit('update:row-expanded', { row, state: true })
   }
 }
 
@@ -1157,7 +1174,7 @@ watch([() => props.data, dataSelectState], (newVals) => {
     bulkActionsSelectedRows.value = [...oldSelectedRows, ...newSelectedRows]
   }
 
-  expandedRows.value = []
+  expandedRows.value = getExpandedRows()
 }, { deep: true, immediate: true })
 
 watch(bulkActionsSelectedRows, (newVal) => {

diff --git a/src/types/table.ts b/src/types/table.ts
@@ -203,6 +203,10 @@ interface TablePropsShared {
    * Enable expandable rows
    */
   rowExpandable?: (row: Record<string, any>) => boolean
+  /**
+   * A function that conditionally specifies whether a row is expanded or not
+   */
+  rowExpanded?: (row: Record<string, any>) => boolean
   /**
    * Hide the table header
    */
@@ -283,3 +287,8 @@ export enum TableViewHeaderKeys {
   ACTIONS = 'actions',
   BULK_ACTIONS = 'bulkActions',
 }
+
+export interface RowExpandPayload {
+  row: Record<string, any>
+  state: boolean
+}