feat(results-grid): add customizable styling settings (#19614)

[kburtram]

Customizable Styling for Results Grid

Fixes #19614

Summary

Adds user-configurable styling options for the query results grid, giving users control over font, row density, grid lines, and alternating row colors. All styling is theme-aware — colors derive from VS Code's CSS custom properties so they look correct across light, dark, and high-contrast themes.

Changes

Fixed existing settings:

• mssql.resultsFontSize and mssql.resultsFontFamily now correctly apply to the modern React-based results grid. These settings were previously defined in package.json but had no effect on the current webview (reported in New Query Results pane does not follow existing font size and font family settings #18351, mssql.resultsFontSize Not changing the font size in the Results Window #18530, Results Window Font Does Not Change #1730).

New settings:

Setting	Type	Default	Description
mssql.resultsGrid.alternatingRowColors	boolean	false	Enables zebra-striping for alternating rows
mssql.resultsGrid.showGridLines	"both" | "horizontal" | "vertical" | "none"	"both"	Controls grid line visibility
mssql.resultsGrid.rowPadding	number | null	null	Extra vertical padding (0–10px) per row for density control

[kburtram]

Here are some test settings I used.

// "Dense Mode" — compact, monospace, no fluff
{
    "mssql.resultsFontSize": 11,
    "mssql.resultsFontFamily": "Cascadia Mono",
    "mssql.resultsGrid.alternatingRowColors": false,
    "mssql.resultsGrid.showGridLines": "horizontal",
    "mssql.resultsGrid.rowPadding": 0
}

// "Spreadsheet Vibes" — SSMS-ish, easy on the eyes
{
    "mssql.resultsFontSize": 13,
    "mssql.resultsFontFamily": "Segoe UI",
    "mssql.resultsGrid.alternatingRowColors": true,
    "mssql.resultsGrid.showGridLines": "both",
    "mssql.resultsGrid.rowPadding": 3
}

// "Accessibility / Large Display" — big text, roomy rows, high contrast
{
    "mssql.resultsFontSize": 20,
    "mssql.resultsFontFamily": "Consolas",
    "mssql.resultsGrid.alternatingRowColors": true,
    "mssql.resultsGrid.showGridLines": "both",
    "mssql.resultsGrid.rowPadding": 8
}

// "Minimalist" — clean, no grid lines, tight
{
    "mssql.resultsFontSize": 12,
    "mssql.resultsFontFamily": "Inter",
    "mssql.resultsGrid.alternatingRowColors": true,
    "mssql.resultsGrid.showGridLines": "none",
    "mssql.resultsGrid.rowPadding": 2
}

// "Stress Test" — max everything, break it
{
    "mssql.resultsFontSize": 24,
    "mssql.resultsFontFamily": "Comic Sans MS",
    "mssql.resultsGrid.alternatingRowColors": true,
    "mssql.resultsGrid.showGridLines": "none",
    "mssql.resultsGrid.rowPadding": 10
}

// "Null Gauntlet" — all defaults, should look identical to before
{
    "mssql.resultsFontSize": null,
    "mssql.resultsFontFamily": null,
    "mssql.resultsGrid.alternatingRowColors": false,
    "mssql.resultsGrid.showGridLines": "both",
    "mssql.resultsGrid.rowPadding": null
}

[Copilot]

Pull request overview

Adds new, theme-aware styling controls for the React-based query results grid and wires them through the extension’s configuration/state pipeline so users can customize grid appearance (font + density + grid lines + zebra striping).

Changes:

• Introduces GridSettings/GridLinesMode in shared webview state and propagates settings updates from the extension host to the webview.
• Updates React results grid rendering to apply font settings, row padding, alternating-row styling, and grid-line visibility via classes/CSS variables.
• Adds new mssql.resultsGrid.* settings to package.json and adds unit tests for new config constants.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
extensions/mssql/test/unit/queryResultUtils.test.ts	Adds tests around new grid settings constants/defaulting behavior.
extensions/mssql/src/sharedInterfaces/queryResult.ts	Adds shared GridSettings + GridLinesMode types to the webview state contract.
extensions/mssql/src/reactviews/pages/QueryResult/resultGrid.tsx	Uses grid settings for row height and disposes/recreates table on row padding change.
extensions/mssql/src/reactviews/pages/QueryResult/queryResultsGridView.tsx	Applies grid settings via CSS classes and CSS custom properties; applies font settings to container.
extensions/mssql/src/reactviews/media/slickgrid.css	Adds CSS for row padding, zebra striping, and grid line visibility modes.
extensions/mssql/src/queryResult/queryResultWebViewController.ts	Reads grid settings from VS Code config and pushes updates to open query result webviews on configuration changes.
extensions/mssql/src/constants/constants.ts	Adds new constants for resultsGrid.* configuration keys.
extensions/mssql/package.nls.json	Adds localized descriptions for the new settings.
extensions/mssql/package.json	Contributes new mssql.resultsGrid.* settings (alternating rows, grid lines mode, row padding).

[github-actions]

PR Changes

Category	Target Branch	PR Branch	Difference
vscode-mssql VSIX	6444 KB	6442 KB	⚪ -2 KB ( 0% )
sql-database-projects VSIX	7062 KB	7062 KB	⚪ 0 KB ( 0% )
data-workspace VSIX	535 KB	535 KB	⚪ 0 KB ( 0% )

[Copilot]

Pull request overview

Adds user-configurable, theme-aware styling options to the MSSQL query results grid webview, wiring new settings from VS Code configuration through the extension controller into the React/SlickGrid UI.

Changes:

• Introduces new results grid settings (alternating row colors, grid line visibility, row padding) and exposes them via shared webview state.
• Applies font and grid styling in the React results grid view and updates SlickGrid CSS to support zebra striping and configurable grid lines.
• Updates configuration-change handling so open results views/panels react to setting changes.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
localization/xliff/vscode-mssql.xlf	Adds localized string entries for the new grid settings.
extensions/mssql/package.nls.json	Adds NLS strings for new settings + enum descriptions.
extensions/mssql/package.json	Contributes new mssql.resultsGrid.* settings (types/defaults/enums/range).
extensions/mssql/src/constants/constants.ts	Adds constants for the new settings keys.
extensions/mssql/src/sharedInterfaces/queryResult.ts	Adds GridSettings/GridLinesMode and wires into webview state.
extensions/mssql/src/queryResult/queryResultWebViewController.ts	Reads new settings, propagates changes to open results UIs, and adds config change handling.
extensions/mssql/src/reactviews/pages/QueryResult/queryResultsGridView.tsx	Applies CSS classes + CSS custom property based on gridSettings and fontSettings.
extensions/mssql/src/reactviews/pages/QueryResult/resultGrid.tsx	Recreates SlickGrid table when row-height-affecting settings change; updates row height calculations.
extensions/mssql/src/reactviews/media/slickgrid.css	Adds CSS for row padding, zebra striping, and grid line modes.
extensions/mssql/test/unit/queryResultUtils.test.ts	Adds unit tests for new constants/default behavior (but currently not exercising production code paths).

[codecov-commenter]

Codecov Report

❌ Patch coverage is 43.66197% with 40 lines in your changes missing coverage. Please review.
✅ Project coverage is 72.94%. Comparing base (a1769e8) to head (cf6ea85).
⚠️ Report is 5 commits behind head on main.

Files with missing lines	Patch %	Lines
...ql/src/queryResult/queryResultWebViewController.ts	32.20%	40 Missing ⚠️

❌ Your patch status has failed because the patch coverage (43.66%) is below the target coverage (70.00%). You can increase the patch coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21655      +/-   ##
==========================================
- Coverage   72.95%   72.94%   -0.01%     
==========================================
  Files         331      331              
  Lines       99209    99264      +55     
  Branches     5582     5583       +1     
==========================================
+ Hits        72374    72405      +31     
- Misses      26835    26859      +24     

Files with missing lines	Coverage Δ
extensions/mssql/src/constants/constants.ts	100.00% <100.00%> (ø)
...tensions/mssql/src/sharedInterfaces/queryResult.ts	100.00% <100.00%> (ø)
...ql/src/queryResult/queryResultWebViewController.ts	42.67% <32.20%> (+0.11%)	⬆️

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

Adds user-configurable styling options for the React-based query results grid, wiring new mssql.resultsGrid.* settings from VS Code configuration into the query results webview state and CSS so the grid can be themed and customized.

Changes:

• Introduces new results-grid settings (alternating row colors, grid line visibility, row padding) and localizes their descriptions.
• Plumbs gridSettings through query result webview state and applies it in the grid React view + SlickGrid CSS.
• Ensures results font size/family changes propagate to the modern results grid and trigger table re-creation when row height changes.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
localization/xliff/vscode-mssql.xlf	Adds localized strings for new results-grid settings.
extensions/mssql/package.nls.json	Adds NLS entries for new results-grid setting descriptions and enums.
extensions/mssql/package.json	Contributes new mssql.resultsGrid.* settings (schema, defaults, enums).
extensions/mssql/src/constants/constants.ts	Adds constants for section-relative config keys used by the webview controller.
extensions/mssql/src/sharedInterfaces/queryResult.ts	Extends shared webview state with GridSettings and GridLinesMode.
extensions/mssql/src/queryResult/queryResultWebViewController.ts	Reads new settings from configuration and pushes updates to open results webviews.
extensions/mssql/src/reactviews/pages/QueryResult/queryResultsGridView.tsx	Applies settings via container classes/CSS variables (grid lines, zebra striping, row padding).
extensions/mssql/src/reactviews/pages/QueryResult/resultGrid.tsx	Recreates SlickGrid table when row-height-affecting settings change; adjusts row height calculation.
extensions/mssql/src/reactviews/media/slickgrid.css	Adds CSS for zebra striping, configurable grid lines, and row padding via CSS custom property.
extensions/mssql/test/unit/queryResultUtils.test.ts	Adds unit tests for new config key constants (and attempted defaults coverage).

Comments suppressed due to low confidence (1)

extensions/mssql/test/unit/queryResultUtils.test.ts:121

• The added “default gridSettings … when config is undefined” tests don’t exercise any production code—they’re just asserting behavior of the nullish coalescing operator on a stubbed object, and they also stub vscode.workspace.getConfiguration() without ever calling it. These tests won’t catch regressions in QueryResultWebviewController.getGridSettingsConfig() (including validation/defaulting of showGridLines). Consider replacing them with unit tests that call the real config-reading logic (or extracting that logic into a testable helper) and assert the resulting GridSettings object.

        // NOTE: Tests that previously attempted to verify default gridSettings by directly
        // applying `??` to `mockConfig.get(...)` without calling production code have been
        // removed because they did not exercise any real implementation.

        test("default gridSettings returns rowPadding=null when config is undefined", () => {
            const mockConfig = {
                get: sandbox.stub().returns(undefined),
            } as unknown as vscode.WorkspaceConfiguration;

            sandbox.stub(vscode.workspace, "getConfiguration").returns(mockConfig);

            const rowPadding = mockConfig.get(Constants.configResultsGridRowPadding) ?? null;
            expect(rowPadding).to.equal(null);
        });
    });

    suite("bucketizeRowCount", () => {
        const testCases: { value: number; expected: number }[] = [
            { value: 0, expected: 50 },
            { value: 49, expected: 50 },
            { value: 50, expected: 100 },
            { value: 99, expected: 100 },
            { value: 100, expected: 500 },
            { value: 499, expected: 500 },
            { value: 500, expected: 1000 },
            { value: 999, expected: 1000 },
            { value: 1000, expected: 5000 },
            { value: 4999, expected: 5000 },
            { value: 5000, expected: 10000 },
            { value: 12000, expected: 10000 },
        ];

        for (const { value, expected } of testCases) {
            test(`returns ${expected} for row count ${value}`, () => {
                expect(queryResultUtils.bucketizeRowCount(value)).to.equal(expected);

[Copilot]

Pull request overview

Adds theme-aware, user-configurable styling controls to the modern (React/SlickGrid) query results grid, and wires existing font settings so they actually apply to the current results grid implementation.

Changes:

• Introduces new mssql.resultsGrid.* settings for alternating row colors, grid line visibility, and row padding (density).
• Threads gridSettings through the query results webview state and applies it via CSS classes/CSS custom properties.
• Updates results grid sizing logic to account for font size and row padding changes (disposing/recreating the table when needed).

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
localization/xliff/vscode-mssql.xlf	Adds localized strings for the new settings (not reviewed for translation correctness).
extensions/mssql/package.nls.json	Adds NLS keys for new grid styling settings and enum descriptions.
extensions/mssql/package.json	Declares new user settings (alternating rows, grid lines mode, row padding with bounds).
extensions/mssql/src/constants/constants.ts	Adds section-relative constants for the new results grid settings keys.
extensions/mssql/src/sharedInterfaces/queryResult.ts	Adds GridSettings + GridLinesMode and includes gridSettings in the webview state.
extensions/mssql/src/queryResult/queryResultWebViewController.ts	Reads new settings from configuration and pushes updates to open results views/panels.
extensions/mssql/src/reactviews/pages/QueryResult/queryResultsGridView.tsx	Applies styling via container classes and CSS variable; fixes font family fallback to editor font var.
extensions/mssql/src/reactviews/pages/QueryResult/resultGrid.tsx	Updates row height/column width calculations and recreates tables when row-padding/font-size changes.
extensions/mssql/src/reactviews/media/slickgrid.css	Implements CSS for row padding, zebra striping, and grid line visibility modes.
extensions/mssql/test/unit/queryResultUtils.test.ts	Adds unit tests asserting new config key constants (plus an extra test needing adjustment).