diff --git a/docs/components/table-data.md b/docs/components/table-data.md index 7b109a5e33..ebb6a1219e 100644 --- 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 index 4e9a8cdc18..cd6cf71524 100644 --- 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 index 56a8793269..d0f5b5b965 100644 --- 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(), { hideHeaders: false, nested: false, hidePaginationWhenOptional: false, + hideToolbar: false, /** * KTableData props defaults */ @@ -210,7 +212,6 @@ const props = withDefaults(defineProps(), { initialFetcherParams: () => ({}), clientSort: false, sortable: true, - hideToolbar: false, }) const slots = useSlots() diff --git a/src/components/KTableView/KTableView.vue b/src/components/KTableView/KTableView.vue index 141d977293..6864217347 100644 --- a/src/components/KTableView/KTableView.vue +++ b/src/components/KTableView/KTableView.vue @@ -428,6 +428,7 @@ const props = withDefaults(defineProps(), { hideHeaders: false, nested: false, hidePaginationWhenOptional: true, + hideToolbar: false, /** * KTableData props defaults */ @@ -493,7 +494,7 @@ const isScrolledHorizontally = ref(false) const sortColumnKey = ref('') const sortColumnOrder = ref('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(false) const tableWrapperStyles = computed((): Record => ({ maxHeight: getSizeFromString(props.maxHeight), diff --git a/src/types/table.ts b/src/types/table.ts index 5e7f605ba6..58bf14fd9a 100644 --- 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[] sortable?: boolean hidePaginationWhenOptional?: boolean - hideToolbar?: boolean } export interface TableDataFetcherParams {