diff --git a/dashboard/src2/components/devtools/database/ResultTable.vue b/dashboard/src2/components/devtools/database/ResultTable.vue index d34d009350..f1883e5ccf 100644 --- a/dashboard/src2/components/devtools/database/ResultTable.vue +++ b/dashboard/src2/components/devtools/database/ResultTable.vue @@ -7,6 +7,7 @@ import { } from '@tanstack/vue-table'; import { computed, ref } from 'vue'; import { unparse } from 'papaparse'; +import MaximizedIcon from '~icons/lucide/maximize-2'; const props = defineProps({ columns: { type: Array, required: true }, @@ -15,7 +16,9 @@ const props = defineProps({ enableCSVExport: { type: Boolean, default: true }, actionHeaderLabel: { type: String }, actionComponent: { type: Object }, - actionComponentProps: { type: Object, default: {} } + actionComponentProps: { type: Object, default: {} }, + isTruncateText: { type: Boolean, default: false }, + truncateLength: { type: Number, default: 100 } }); const generateData = computed(() => { @@ -43,6 +46,19 @@ const table = useVueTable({ const cols = props.columns.map(column => { return { id: column, + cell: cellProps => { + const value = cellProps.getValue(); + if (props.isTruncateText) { + if ( + value && + typeof value === 'string' && + value.length > props.truncateLength + ) { + return `${value.substring(0, props.truncateLength)}...`; + } + } + return value; + }, header: column, accessorKey: column, enableSorting: false, @@ -62,6 +78,26 @@ const table = useVueTable({ getPaginationRowModel: getPaginationRowModel() }); +const isTextTruncated = cell => { + const value = cell.getValue(); + return ( + props.isTruncateText && + value && + typeof value === 'string' && + value.length > props.truncateLength + ); +}; + +const fullViewDialogHeader = ref(null); +const fullViewDialogBody = ref(null); +const showFullViewDialog = ref(false); +const handleViewFull = cell => { + const fullText = cell.getValue(); + fullViewDialogHeader.value = cell.column.columnDef.header; + fullViewDialogBody.value = fullText; + showFullViewDialog.value = true; +}; + const pageLength = computed(() => table.getState().pagination.pageSize); const currPage = computed(() => table.getState().pagination.pageIndex + 1); @@ -94,6 +130,22 @@ const downloadCSV = async () => {