fix(sqllab): preserve multiple whitespaces in query result cells #36090

adriancerejo · 2025-11-12T19:43:07Z

SUMMARY

Add white-space: pre-wrap CSS to AG Grid cells to preserve multiple consecutive whitespaces in SQL Lab query results. Previously, HTML default behavior collapsed multiple spaces into single spaces, causing issues with financial data like option symbols that require exact whitespace preservation.

Changes:

Add white-space: pre-wrap to .ag-cell in ThemedAgGridReact
Add test to verify table renders with whitespace data

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TESTING INSTRUCTIONS

Go to SQL Lab
Run a query with multiple spaces:

SELECT 'double  space' as text
   UNION ALL
   SELECT 'triple   space'
   UNION ALL
   SELECT 'multiple    spaces     here'

Verify the result table preserves the multiple spaces (not collapsed)

ADDITIONAL INFORMATION

Has associated issue: DB Result Cell collapses whitespaces between characters #36042
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

Fixes apache#36042 Add white-space: pre-wrap CSS to AG Grid cells to preserve multiple consecutive whitespaces in SQL Lab query results. Previously, HTML default behavior collapsed multiple spaces into single spaces, causing issues with financial data like option symbols that require exact whitespace preservation. Changes: - Add white-space: pre-wrap to .ag-cell in ThemedAgGridReact - Add test to verify table renders with whitespace data

bito-code-review · 2025-11-12T19:43:17Z

Code Review Agent Run #baf350

Actionable Suggestions - 0

Review Details

Files reviewed - 2 · Commit Range: c343b5c..c343b5c
- superset-frontend/packages/superset-ui-core/src/components/ThemedAgGridReact/index.tsx
- superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Default Agent You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

AI Code Review powered by

korbit-ai

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Global white-space pre-wrap breaks cell layout ▹ view
	Performance impact from forced text wrapping in grid cells ▹ view

Files scanned

File Path	Reviewed
superset-frontend/packages/superset-ui-core/src/components/ThemedAgGridReact/index.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

korbit-ai · 2025-11-12T19:45:54Z

superset-frontend/packages/superset-ui-core/src/components/ThemedAgGridReact/index.tsx

        height: 100%;
        .ag-cell {
          -webkit-font-smoothing: antialiased;
+          white-space: pre-wrap;


Global white-space pre-wrap breaks cell layout

Tell me more

What is the issue?

The CSS property white-space: pre-wrap is applied globally to all ag-grid cells, which will force all cell content to preserve whitespace and wrap text, potentially breaking the layout and functionality of cells that should not wrap.

Why this matters

This global styling can cause unintended visual issues such as excessive vertical spacing in cells with normal text, broken alignment in numeric columns, and poor readability in cells that are designed to display single-line content. It may also interfere with ag-grid's built-in text handling and column sizing algorithms.

Suggested change ∙ Feature Preview

Remove the global white-space: pre-wrap rule and instead apply it conditionally through column definitions or cell renderers where text wrapping is specifically needed:

.ag-cell { -webkit-font-smoothing: antialiased; /* Remove: white-space: pre-wrap; */ }

Then apply wrapping selectively via columnDefs:

const columnDefs = [ { field: 'description', cellStyle: { 'white-space': 'pre-wrap' }, // Only for specific columns } ];

Provide feedback to improve future suggestions

_{💬 Looking for more details? Reply to this comment to chat with Korbit.}

korbit-ai · 2025-11-12T19:45:54Z

superset-frontend/packages/superset-ui-core/src/components/ThemedAgGridReact/index.tsx

        height: 100%;
        .ag-cell {
          -webkit-font-smoothing: antialiased;
+          white-space: pre-wrap;


Performance impact from forced text wrapping in grid cells

Tell me more

What is the issue?

Adding white-space: pre-wrap to all ag-grid cells forces text wrapping and preserves whitespace, which can significantly impact rendering performance in large grids.

Why this matters

This CSS property forces the browser to calculate text wrapping for every cell, potentially causing layout thrashing and slower scrolling performance in grids with many rows or columns. The performance impact scales with grid size.

Suggested change ∙ Feature Preview

Consider applying white-space: pre-wrap conditionally only to cells that need it, or use a CSS class that can be selectively applied:

.ag-cell.wrap-text { white-space: pre-wrap; }

Then apply the class only to specific column definitions that require text wrapping via the cellClass property in ag-grid column definitions.

Provide feedback to improve future suggestions

_{💬 Looking for more details? Reply to this comment to chat with Korbit.}

Copilot

Pull Request Overview

This PR fixes whitespace collapsing in SQL Lab query result cells by adding white-space: pre-wrap CSS to AG Grid cells. Previously, multiple consecutive spaces in query results were collapsed into single spaces due to HTML's default rendering behavior.

Key changes:

Added white-space: pre-wrap to .ag-cell in ThemedAgGridReact component
Added test coverage to verify data with multiple whitespaces renders correctly

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
superset-frontend/packages/superset-ui-core/src/components/ThemedAgGridReact/index.tsx	Added `white-space: pre-wrap` CSS property to all AG Grid cells to preserve consecutive whitespaces
superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx	Added test case to verify whitespace preservation in table rendering

Copilot · 2025-11-13T18:28:49Z

superset-frontend/packages/superset-ui-core/src/components/ThemedAgGridReact/index.tsx

        height: 100%;
        .ag-cell {
          -webkit-font-smoothing: antialiased;
+          white-space: pre-wrap;


The white-space: pre-wrap CSS property may cause performance issues in tables with many rows or long text content due to increased reflow calculations. Consider applying this only when needed (e.g., via a prop or specific column configuration) rather than globally to all cells. AG Grid provides cellClass or cellStyle options in column definitions for selective application.

Suggested change

white-space: pre-wrap;

/*

* Do NOT set white-space: pre-wrap globally for all cells.

* If you need pre-wrap for specific columns, use AG Grid's cellClass or cellStyle in your columnDefs:

* { field: 'myField', cellClass: 'pre-wrap-cell' }

* and define the CSS:

* .pre-wrap-cell { white-space: pre-wrap; }

*/

pull-request-size bot added the size/M label Nov 12, 2025

github-actions bot added the packages label Nov 12, 2025

dosubot bot added the sqllab Namespace | Anything related to the SQL Lab label Nov 12, 2025

korbit-ai bot suggested changes Nov 12, 2025

View reviewed changes

sadpandajoe requested review from Copilot and msyavuz November 13, 2025 18:25

Copilot started reviewing on behalf of sadpandajoe November 13, 2025 18:26 View session

Copilot finished reviewing on behalf of sadpandajoe November 13, 2025 18:26

Copilot AI reviewed Nov 13, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(sqllab): preserve multiple whitespaces in query result cells #36090

fix(sqllab): preserve multiple whitespaces in query result cells #36090

adriancerejo commented Nov 12, 2025 •

edited

Loading

Uh oh!

bito-code-review bot commented Nov 12, 2025 •

edited

Loading

Code Review Agent Run #baf350

Uh oh!

korbit-ai bot left a comment •

edited

Loading

Uh oh!

korbit-ai bot Nov 12, 2025

Uh oh!

korbit-ai bot Nov 12, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

-          white-space: pre-wrap;
+          /*
+           * Do NOT set white-space: pre-wrap globally for all cells.
+           * If you need pre-wrap for specific columns, use AG Grid's cellClass or cellStyle in your columnDefs:
+           *   { field: 'myField', cellClass: 'pre-wrap-cell' }
+           * and define the CSS:
+           *   .pre-wrap-cell { white-space: pre-wrap; }
+           */

fix(sqllab): preserve multiple whitespaces in query result cells #36090

Are you sure you want to change the base?

fix(sqllab): preserve multiple whitespaces in query result cells #36090

Conversation

adriancerejo commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

bito-code-review bot commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #baf350

Uh oh!

korbit-ai bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Uh oh!

korbit-ai bot Nov 12, 2025

Choose a reason for hiding this comment

Global white-space pre-wrap breaks cell layout

What is the issue?

Why this matters

Suggested change ∙ Feature Preview

Provide feedback to improve future suggestions

Uh oh!

korbit-ai bot Nov 12, 2025

Choose a reason for hiding this comment

Performance impact from forced text wrapping in grid cells

What is the issue?

Why this matters

Suggested change ∙ Feature Preview

Provide feedback to improve future suggestions

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

adriancerejo commented Nov 12, 2025 •

edited

Loading

bito-code-review bot commented Nov 12, 2025 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading