Skip to content

Improve cell content detail view in data table renderer #103

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
masachika-kamada wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Improve cell content detail view in data table renderer #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9562d54
Update Node.js version requirement in documentation
masachika-kamada Jul 13, 2025
870ff53
Remove non-functional cell expand buttons
masachika-kamada Jul 13, 2025
7a0b638
Enhance cell detail view for all data types
masachika-kamada Jul 13, 2025
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
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@

### Prerequisites

1. [Node.js](https://nodejs.org/) 16.14.2
1. npm 8.15.2
1. [Node.js](https://nodejs.org/) 20.18.2 (see `.nvmrc` file)
1. npm 8.15.2 or later
1. Windows, macOS, or Linux
1. [Visual Studio Code](https://code.visualstudio.com/)
1. The following VS Code extensions:
Expand Down
128 changes: 104 additions & 24 deletions src/client/datatable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,12 @@ function renderOutput(value: OutputItem, element: HTMLElement) {
.ag-header-viewport {
overflow-x: hidden !important;
}
.ag-cell-wrapper .ag-cell-expand-button {
display: none !important;
}
.ag-cell .ag-cell-expand-button {
display: none !important;
}
`;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand Down Expand Up @@ -115,22 +121,33 @@ function renderDataTable(results: KustoResponseDataSet, ele: HTMLElement) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function DataTable(props: { columnDefs: any; rowData: any }) {
function onCellDoubleClicked(e: CellDoubleClickedEvent) {
if (columnDataType.get(e.colDef.field || '') === 'dynamic' && e.colDef.field) {
try {
const json =
typeof e.data[e.colDef.field] === 'string'
? JSON.parse(e.data[e.colDef.field])
: e.data[e.colDef.field];
console.info(`Displaying details for ${e.colDef.field}`);
setDetailsField(e.colDef.field);
setDetailsJson(json);
displayDetails(true);
} catch (ex) {
if (e.colDef.field) {
const fieldType = columnDataType.get(e.colDef.field);
const cellValue = e.data[e.colDef.field];

setDetailsField(e.colDef.field);

if (fieldType === 'dynamic') {
// JSON data - use ReactJson for pretty display
try {
const json = typeof cellValue === 'string' ? JSON.parse(cellValue) : cellValue;
console.info(`Displaying JSON details for ${e.colDef.field}`);
setDetailsJson(json);
setDetailsText(undefined);
displayDetails(true);
} catch (ex) {
// If JSON parsing fails, treat as text
console.info(`JSON parsing failed, displaying as text for ${e.colDef.field}`);
setDetailsText(String(cellValue || ''));
setDetailsJson(undefined);
displayDetails(true);
}
} else {
// Regular text data - display as formatted text
console.info(`Displaying text details for ${e.colDef.field}`);
setDetailsText(String(cellValue || ''));
setDetailsJson(undefined);
console.error(
`Failed to parse details into JSON for ${e.colDef.field} with data ${e.data[e.colDef.field]}`,
ex
);
displayDetails(true);
}
}
}
Expand All @@ -139,25 +156,45 @@ function DataTable(props: { columnDefs: any; rowData: any }) {
console.info(`Nothing to render`);
return;
}
try {
const json =
typeof e.data[detailsField] === 'string' ? JSON.parse(e.data[detailsField]) : e.data[detailsField];
console.info(`Displaying details for ${detailsField}`);
setDetailsJson(json);
} catch (ex) {

const fieldType = columnDataType.get(detailsField);
const cellValue = e.data[detailsField];

if (fieldType === 'dynamic') {
try {
const json = typeof cellValue === 'string' ? JSON.parse(cellValue) : cellValue;
console.info(`Displaying JSON details for ${detailsField}`);
setDetailsJson(json);
setDetailsText(undefined);
} catch (ex) {
console.info(`JSON parsing failed, displaying as text for ${detailsField}`);
setDetailsText(String(cellValue || ''));
setDetailsJson(undefined);
}
} else {
setDetailsText(String(cellValue || ''));
setDetailsJson(undefined);
}
}
const [detailsVisible, displayDetails] = React.useState<boolean>(false);
const [detailsField, setDetailsField] = React.useState<string | undefined>(undefined);
const [detailsJson, setDetailsJson] = React.useState<any>(undefined);
const [detailsText, setDetailsText] = React.useState<string | undefined>(undefined);
return (
<div className="ag-theme-balham" style={{ width: '100%', backgroundColor: 'white' }}>
<AgGridReact
domLayout="autoHeight"
pagination={true}
paginationPageSize={10}
defaultColDef={{ resizable: true, filter: true, sortable: true, floatingFilter: true }}
defaultColDef={{
resizable: true,
filter: true,
sortable: true,
floatingFilter: true,
wrapText: false,
autoHeight: false,
cellStyle: { overflow: 'hidden', textOverflow: 'ellipsis' }
}}
columnDefs={props.columnDefs}
rowData={props.rowData}
enableCellTextSelection={true}
Expand All @@ -167,8 +204,51 @@ function DataTable(props: { columnDefs: any; rowData: any }) {
onRowSelected={onRowSelected}
suppressFieldDotNotation={true}
></AgGridReact>
{detailsVisible && detailsJson && (
<ReactJson src={detailsJson} displayDataTypes={false} displayObjectSize={false} />
{detailsVisible && (detailsJson || detailsText) && (
<div
style={{
marginTop: '20px',
padding: '10px',
border: '1px solid #ccc',
borderRadius: '4px',
backgroundColor: '#f9f9f9'
}}
>
<div style={{ marginBottom: '10px', fontWeight: 'bold', fontSize: '14px' }}>
Details for column: {detailsField}
<button
style={{
float: 'right',
background: 'none',
border: 'none',
fontSize: '16px',
cursor: 'pointer'
}}
onClick={() => displayDetails(false)}
>
×
</button>
</div>
{detailsJson && <ReactJson src={detailsJson} displayDataTypes={false} displayObjectSize={false} />}
{detailsText && (
<div
style={{
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
maxHeight: '300px',
overflowY: 'auto',
padding: '10px',
backgroundColor: 'white',
border: '1px solid #ddd',
borderRadius: '2px',
fontFamily: 'monospace',
fontSize: '12px'
}}
>
{detailsText}
</div>
)}
</div>
)}
</div>
);
Expand Down