fix(ktableview): hide-toolbar prop [KHCP-13110]

Kong · Sep 25, 2024 · edff6b0 · edff6b0
1 parent 30c615e
commit edff6b0
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/docs/components/table-data.md b/docs/components/table-data.md
@@ -319,10 +319,6 @@ Set this to `false` to disable ability to sort.
 
 Set this to `true` to hide pagination when the table record count is less than or equal to the page size. Defaults to `false`.
 
-### hideToolbar
-
-Prop for hiding toolbar. Useful when elements provided in the toolbar are not actionable (for example, when toolbar contains filter controls, however the fetcher returns no results as there are no records to filter by).
-
 ## Events
 
 ### state

diff --git a/docs/components/table-view.md b/docs/components/table-view.md
@@ -556,6 +556,10 @@ A boolean to hide table headers. Only recomended when used in nested table. Refe
 
 A boolean to disable some of the table features like column visibility, column resizing, bulk actions and hide toolbar element in nested tables. Refer to [Expandable Rows](#expandable-rows) section documentation for more details. Defaults to `false`.
 
+### hideToolbar
+
+Prop for hiding toolbar. Useful when elements provided in the toolbar are not actionable (for example, when toolbar contains filter controls, however the fetcher returns no results as there are no records to filter by).
+
 ## States
 
 ### Empty

diff --git a/src/components/KTableData/KTableData.vue b/src/components/KTableData/KTableData.vue
@@ -18,6 +18,7 @@
     :hide-headers="hideHeaders"
     :hide-pagination="hidePagination || !showPagination"
     :hide-pagination-when-optional="hidePaginationWhenOptional"
+    :hide-toolbar="hideToolbar"
     :loading="loading || isTableLoading"
     :max-height="maxHeight"
     :nested="nested"
@@ -200,6 +201,7 @@ const props = withDefaults(defineProps<TableDataProps>(), {
   hideHeaders: false,
   nested: false,
   hidePaginationWhenOptional: false,
+  hideToolbar: false,
   /**
    * KTableData props defaults
    */
@@ -210,7 +212,6 @@ const props = withDefaults(defineProps<TableDataProps>(), {
   initialFetcherParams: () => ({}),
   clientSort: false,
   sortable: true,
-  hideToolbar: false,
 })
 
 const slots = useSlots()

diff --git a/src/components/KTableView/KTableView.vue b/src/components/KTableView/KTableView.vue
@@ -428,6 +428,7 @@ const props = withDefaults(defineProps<TableViewProps>(), {
   hideHeaders: false,
   nested: false,
   hidePaginationWhenOptional: true,
+  hideToolbar: false,
   /**
    * KTableData props defaults
    */
@@ -493,7 +494,7 @@ const isScrolledHorizontally = ref<boolean>(false)
 const sortColumnKey = ref('')
 const sortColumnOrder = ref<SortColumnOrder>('desc')
 const isClickable = ref(false)
-const hasToolbarSlot = computed((): boolean => !props.nested && (!!slots.toolbar || hasColumnVisibilityMenu.value || showBulkActionsToolbar.value))
+const hasToolbarSlot = computed((): boolean => !props.hideToolbar && !props.nested && (!!slots.toolbar || hasColumnVisibilityMenu.value || showBulkActionsToolbar.value))
 const isActionsDropdownHovered = ref<boolean>(false)
 const tableWrapperStyles = computed((): Record<string, string> => ({
   maxHeight: getSizeFromString(props.maxHeight),

diff --git a/src/types/table.ts b/src/types/table.ts
@@ -208,6 +208,10 @@ interface TablePropsShared {
    * A boolean to hide pagination when total table records number is less than or equal to page size
    */
   hidePaginationWhenOptional?: boolean
+  /**
+   * A prop for hiding the toolbar
+   */
+  hideToolbar?: boolean
 }
 
 export interface TableViewProps extends TablePropsShared {
@@ -232,7 +236,6 @@ export interface TableDataProps extends TablePropsShared {
   sortHandlerFunction?: (param: SortHandlerFunctionParam) => Record<string, any>[]
   sortable?: boolean
   hidePaginationWhenOptional?: boolean
-  hideToolbar?: boolean
 }
 
 export interface TableDataFetcherParams {