import type { Ref, PropType } from 'vue'
import { ref, watch, computed, onMounted, useAttrs, useSlots } from 'vue'
-import { v1 as uuidv1 } from 'uuid'
+import { v4 as uuidv4 } from 'uuid'
import KButton from '@/components/KButton/KButton.vue'
import KEmptyState from '@/components/KEmptyState/KEmptyState.vue'
import KSkeleton from '@/components/KSkeleton/KSkeleton.vue'
@@ -250,6 +257,7 @@ import {
EmptyStateIconVariants,
} from '@/types'
import { KUI_COLOR_TEXT, KUI_ICON_SIZE_20 } from '@kong/design-tokens'
+import ColumnVisibilityMenu from './ColumnVisibilityMenu.vue'
const { useDebounce, useRequest, useSwrvState } = useUtilities()
@@ -273,6 +281,14 @@ const props = defineProps({
type: Boolean,
default: false,
},
+ /**
+ * Used to customize the initial state of the table.
+ * Column visibility/width.
+ */
+ tablePreferences: {
+ type: Object as PropType,
+ default: () => ({}),
+ },
/**
* Enable client side sort - only do this if using a fetcher
* that returns static data
@@ -541,7 +557,7 @@ const emit = defineEmits<{
const attrs = useAttrs()
const slots = useSlots()
-const tableId = computed((): string => props.testMode ? 'test-table-id-1234' : uuidv1())
+const tableId = computed((): string => props.testMode ? 'test-table-id-1234' : uuidv4())
const defaultFetcherProps = {
pageSize: 15,
page: 1,
@@ -552,13 +568,23 @@ const defaultFetcherProps = {
}
const data = ref[]>([])
const headerRow = ref()
-const tableHeaders: Ref = ref([])
+// all headers
+const tableHeaders = ref([])
+// currently visible headers
+const visibleHeaders = ref([])
// highest priority - column currently being resized (mouse may be completely outside the column)
const resizingColumn = ref('')
// column the user is currently hovering over the resize handle for (may be hovered on the adjacent column to what we want to resize)
const resizerHoveredColumn = ref('')
// lowest priority - currently hovered resizable column (mouse is somewhere in the | )
const currentHoveredColumn = ref('')
+const hasColumnVisibilityMenu = computed((): boolean => tableHeaders.value.filter((header: TableHeader) => header.hidable).length > 0)
+// columns whose visibility can be toggled
+const visibilityColumns = computed((): TableHeader[] => tableHeaders.value.filter((header: TableHeader) => header.hidable))
+// visibility preferences from the host app (initialized by app)
+const visibilityPreferences = computed((): Record => props.tablePreferences.columnVisibility || {})
+// current column visibility state
+const columnVisibility = ref>({})
const total = ref(0)
const isScrolled = ref(false)
const page = ref(1)
@@ -572,7 +598,7 @@ const hasNextPage = ref(true)
const isClickable = ref(false)
const hasInitialized = ref(false)
const nextPageClicked = ref(false)
-const hasToolbarSlot = computed((): boolean => !!slots.toolbar)
+const hasToolbarSlot = computed((): boolean => !!slots.toolbar || hasColumnVisibilityMenu.value)
/**
* Utilize a helper function to generate the column slot name.
@@ -702,7 +728,7 @@ const columnStyles = computed(() => {
const getHeaderClasses = (column: TableHeader, index: number): Record => {
return {
// display the resize handle on the right side of the column if resizeColumns is enabled, hovering current column, and not the last column
- 'resize-hover': resizeHoverColumn.value === column.key && props.resizeColumns && index !== tableHeaders.value.length - 1,
+ 'resize-hover': resizeHoverColumn.value === column.key && props.resizeColumns && index !== visibleHeaders.value.length - 1,
'truncated-column resizable': props.resizeColumns,
// display sort control if column is sortable, label is visible, and sorting is not disabled
sortable: !props.disableSorting && !column.hideLabel && !!column.sortable,
@@ -1007,6 +1033,7 @@ const tablePreferences = computed((): TablePreferences => ({
sortColumnKey: sortColumnKey.value,
sortColumnOrder: sortColumnOrder.value as 'asc' | 'desc',
...(props.resizeColumns ? { columnWidths: columnWidths.value } : {}),
+ ...(hasColumnVisibilityMenu.value ? { columnVisibility: columnVisibility.value } : {}),
}))
const emitTablePreferences = (): void => {
@@ -1040,6 +1067,17 @@ const getTestIdString = (message: string): string => {
return msg
}
+watch([columnVisibility, tableHeaders], (newVals) => {
+ const newVisibility = newVals[0]
+ const newHeaders = newVals[1]
+ const newVisibleHeaders = newHeaders.filter((header: TableHeader) => newVisibility[header.key] !== false)
+
+ if (JSON.stringify(newVisibleHeaders) !== JSON.stringify(visibleHeaders.value)) {
+ visibleHeaders.value = newVisibleHeaders
+ emitTablePreferences()
+ }
+}, { deep: true, immediate: true })
+
watch(fetcherData, (fetchedData: any) => {
if (fetchedData?.length && !data.value.length) {
data.value = fetchedData
@@ -1138,7 +1176,10 @@ export const defaultSorter = (key: string, previousKey: string, sortOrder: strin
}
.k-table-toolbar {
+ column-gap: var(--kui-space-50, $kui-space-50);
+ display: flex;
margin-bottom: var(--kui-space-80, $kui-space-80) !important;
+ width: 100%;
& > :deep(*) {
display: flex;
diff --git a/src/types/table.ts b/src/types/table.ts
index dfa1830f08..fb5c0fa63e 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -11,6 +11,8 @@ export interface TablePreferences {
sortColumnOrder?: SortColumnOrder
/** The customized column widths, if resizing is allowed */
columnWidths?: Record
+ /** Column visibility, if visibility is toggleable */
+ columnVisibility?: Record
}
export const TablePaginationTypeArray = ['default', 'offset'] as const
@@ -21,6 +23,7 @@ export interface TableHeader {
key: string
label: string
sortable?: boolean
+ hidable?: boolean
hideLabel?: boolean
useSortHandlerFn?: boolean
}
| |