Skip to content

feat(QueryResultTable): add per-row clipboard copy button to query re… #3741

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Arunkoo wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(QueryResultTable): add per-row clipboard copy button to query re… #3741

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
29408c4
fix(QueryResultTable): fix binary-string regression, collision-safe c…
Arunkoo Apr 2, 2026
234cbe4
fix(QueryResultTable): generate copy column name dynamically to avoid…
Arunkoo Apr 3, 2026
96c81c4
fix(QueryResultTable): skip copy column when data columns are empty t…
Arunkoo Apr 3, 2026
b0f1392
fix(QueryResultTable): exclude header row from single-row TSV copy, c…
Arunkoo Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 29 additions & 6 deletions src/components/QueryResultTable/QueryResultTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';

import DataTable from '@gravity-ui/react-data-table';
import type {Column, Settings} from '@gravity-ui/react-data-table';
import {ClipboardButton} from '@gravity-ui/uikit';

import type {ColumnType, KeyValueRow} from '../../types/api/query';
import {cn} from '../../utils/cn';
Expand All @@ -28,32 +29,53 @@ export const b = cn('ydb-query-result-table');

const WIDTH_PREDICTION_ROWS_COUNT = 100;

//helper function to convert a row to TSV format for copying to clipboard
const rowToTsv = (row: KeyValueRow) =>
Comment thread
astandrik marked this conversation as resolved.
Outdated
Object.values(row)
.map((v) => (typeof v === 'object' ? JSON.stringify(v) : String(v)))
.join('\t');

const copyColumn: Column<KeyValueRow> = {
Copy link
Copy Markdown
Collaborator

@astandrik astandrik Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid a fixed synthetic column name for the copy action

This action column uses a hard-coded name, copy_action, but query results can legally contain a column with the same alias. In that case QueryResultTable passes duplicate column names to react-data-table, which uses column names as accessors and state keys, so a query like SELECT 1 AS "copy_action" can make the real result column ambiguous and lead to the wrong data being extracted or rendered for one of the columns.

Copy link
Copy Markdown
Contributor Author

@Arunkoo Arunkoo Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@astandrik The fixed copy column name is now generated dynamically inside useMemo by checking against actual column names in the result. Starts with 'copy', and if that already exists as a query result column it wraps to '_copy_', then '__copy__' and so on until a unique name is found. This guarantees no collision with any real query column name regardless of what the user queries.

name: '__copy_action__',
header: '',
width: 40,
render: ({row}) => (
<ClipboardButton
text={rowToTsv(row)}
view="flat-secondary"
size="s"
title={i18n('action.copy-row')}
/>
),
};
const prepareTypedColumns = (columns: ColumnType[], data: KeyValueRow[] | undefined) => {
if (!columns.length) {
return [];
}

const dataSlice = data?.slice(0, WIDTH_PREDICTION_ROWS_COUNT);

return columns.map(({name, type}) => {
const dataColumns = columns.map(({name, type}) => {
const columnType = getColumnType(type);

const column: Column<KeyValueRow> = {
name,
width: getColumnWidth({data: dataSlice, name}),
align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT,
render: ({row}) => {
const data = row[name];
const rowData = row[name];
const normalizedData =
columnType === 'binary-string' && typeof data === 'string'
? JSON.stringify(data).slice(1, -1)
: String(data);
columnType === 'binary-string' && typeof rowData === 'string'
? JSON.stringify(rowData).slice(1, -1)
: String(rowData);
return <Cell value={normalizedData} />;
},
};

return column;
});

return [...dataColumns, copyColumn];
};

const prepareGenericColumns = (data: KeyValueRow[] | undefined) => {
Expand All @@ -63,7 +85,7 @@ const prepareGenericColumns = (data: KeyValueRow[] | undefined) => {

const dataSlice = data?.slice(0, WIDTH_PREDICTION_ROWS_COUNT);

return Object.keys(data[0]).map((name) => {
const dataColumns = Object.keys(data[0]).map((name) => {
const column: Column<KeyValueRow> = {
name,
width: getColumnWidth({data: dataSlice, name}),
Expand All @@ -73,6 +95,7 @@ const prepareGenericColumns = (data: KeyValueRow[] | undefined) => {

return column;
});
return [...dataColumns, copyColumn];
};

const getRowIndex = (_: unknown, index: number) => index;
Expand Down
3 changes: 2 additions & 1 deletion src/components/QueryResultTable/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"empty": "Table is empty"
"empty": "Table is empty",
"action.copy-row": "Copy row"
}
3 changes: 2 additions & 1 deletion src/components/QueryResultTable/i18n/ru.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"empty": "Таблица пустая"
"empty": "Таблица пустая",
"action.copy-row": "Скопировать строку"
}
Loading