feat(ktable): add column resize support [khcp-11161] (#2105)

Add column resize support to `KTable` for [KHCP-11161](https://konghq.atlassian.net/browse/KHCP-11161).
Kong · Apr 4, 2024 · c448c49 · c448c49
1 parent 37356dc
commit c448c49
Show file tree

Hide file tree

Showing 5 changed files with 331 additions and 88 deletions.
diff --git a/docs/components/table.md b/docs/components/table.md
@@ -43,6 +43,16 @@ See [the State section](#error) about `hasError`
 
 See [the State section](#loading) about `isLoading`
 
+### resizeColumns
+
+Allow table column width to be resizable. Adjusting a column's width will trigger an `@update:table-preferences` event.
+
+<KTable :fetcher="tableOptionsFetcher" :headers="resizeHeaders" resize-columns />
+
+```html
+  <KTable :fetcher="fetcher" :headers="headers" resize-columns />
+```
+
 ### disablePaginationPageJump
 
 Set this to `true` to limit pagination navigation to `previous` / `next` page only.
@@ -749,7 +759,7 @@ Using a `KPop` inside of a clickable row requires some special handling. Non-cli
   <template v-slot:other>
     <div>
       <KPop title="Cool header">
-        <KButton>
+        <KButton appearance="tertiary">
           <template #icon>
             <KIcon
               icon="more"
@@ -782,7 +792,7 @@ Using a `KPop` inside of a clickable row requires some special handling. Non-cli
   <template v-slot:other>
     <div>
       <KPop title="Cool header">
-        <KButton>
+        <KButton appearance="tertiary">
           <template #icon>
             <KIcon
               icon="more"
@@ -910,6 +920,8 @@ interface TablePreferences {
   sortColumnKey?: string
   /** The order by which to sort the column, one of `asc` or `desc` */
   sortColumnOrder?: 'asc' | 'desc'
+  /** The customized column widths, if resizing is allowed */
+  columnWidths?: Record<string, number>
 }
 ```
 
@@ -1590,6 +1602,11 @@ export default defineComponent({
         { label: 'Description', key: 'description', sortable: true },
         { label: 'Enabled', key: 'enabled', sortable: false }
       ],
+      resizeHeaders: [
+        { label: 'Name', key: 'name' },
+        { label: 'ID', key: 'id' },
+        { label: 'Enabled', key: 'enabled' },
+      ],
       tableOptionsHeaders: [
         { label: 'Name', key: 'name' },
         { label: 'ID', key: 'id' },

diff --git a/sandbox/pages/SandboxTable.vue b/sandbox/pages/SandboxTable.vue
@@ -29,6 +29,7 @@
         :initial-fetcher-params="{
           pageSize: 30
         }"
+        resize-columns
       >
         <template #actions>
           <KDropdown>

diff --git a/src/components/KTable/KTable.cy.ts b/src/components/KTable/KTable.cy.ts
@@ -237,6 +237,20 @@ describe('KTable', () => {
 
       cy.get('.k-table').should('have.class', 'has-hover')
     })
+
+    it('renders column resize toggles when resizeColumns is set', () => {
+      mount(KTable, {
+        props: {
+          testMode: 'true',
+          headers: options.headers,
+          fetcher: () => { return { data: options.data } },
+          resizeColumns: true,
+        },
+      })
+
+      cy.get('.k-table').find('th.resizable').should('be.visible')
+      cy.get('.resize-handle').should('exist')
+    })
   })
 
   describe('data revalidates and changes as expected', () => {
@@ -276,7 +290,6 @@ describe('KTable', () => {
           fetcher: offsetPaginationFetcher,
           isLoading: false,
           headers: offsetPaginationHeaders,
-          offset: true,
         },
       })
 
@@ -570,7 +583,6 @@ describe('KTable', () => {
           paginationPageSizes: [10, 15, 20],
           hidePaginationWhenOptional: true,
           initialFetcherParams: { offset: null },
-          offset: true,
           cacheIdentifier: 'offset-pagination',
         },
       })
@@ -590,7 +602,6 @@ describe('KTable', () => {
           headers: options.headers,
           paginationPageSizes: [10, 15, 20],
           hidePaginationWhenOptional: true,
-          offset: true,
         },
       })
 
@@ -617,7 +628,6 @@ describe('KTable', () => {
           headers: options.headers,
           paginationPageSizes: [10, 15, 20],
           hidePaginationWhenOptional: true,
-          offset: true,
           searchInput: '',
           cacheIdentifier: 'search-example',
         },