fix(data_table): resolve blank cells for non-camelCase column keys

[zain2983]

fix(data_table): resolve blank cells for non-camelCase column keys (#6108)

---

All Submissions:

• Have you followed the guidelines stated in [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) file?
• Have you checked to ensure there aren't any other open [Pull Requests](https://github.com/reflex-dev/reflex/pulls) for the desired changed?

Type of change

• Bug fix (non-breaking change which fixes an issue)

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

---

Description

When rx.data_table receives data as a runtime Var and columns as a static list of strings, any column key that isn't already fully lowercase renders with blank cells.

This happens because Grid.js infers each column's lookup id by camelCasing the column name string. So a key like "Route" gets inferred as "route", which no longer matches the actual key in the data. Since data is a runtime Var, the keys aren't available at build time, so normalising columns alone can't fix it.

The fix converts each plain column string into the { id, name } object format that Grid.js also supports. When id is set explicitly, Grid.js skips the camelCase inference entirely and uses it directly as the lookup key. This ensures the key always matches regardless of casing. Columns already in object format are left untouched, so this is fully backward-compatible.

Closes #6108

[greptile-apps]

Greptile Overview

Greptile Summary

Fixes blank cells in rx.data_table when column keys use non-lowercase casing. Grid.js infers column IDs by camelCasing column name strings, causing mismatches with actual data keys. The fix explicitly sets both id and name fields in column objects to prevent Grid.js from applying camelCase transformation, ensuring keys match regardless of casing.

• Transforms string column names to {"id": col, "name": col} format when columns is a LiteralVar containing a list
• Preserves existing column objects unchanged for backward compatibility
• Only applies to static column definitions (LiteralVar), not runtime Var columns

Confidence Score: 4/5

• Safe to merge with one potential edge case to verify
• The fix is targeted and backward-compatible. It only transforms string columns in LiteralVar format. However, the fix doesn't handle runtime Var columns (non-LiteralVar), which may still exhibit the same camelCase issue if columns are dynamically provided
• Pay attention to reflex/components/gridjs/datatable.py:130-137 - verify runtime Var columns don't need the same transformation

Important Files Changed

Filename	Overview
reflex/components/gridjs/datatable.py	Transforms string column names to {id, name} dict format to fix Grid.js camelCase inference issue with non-lowercase keys

Sequence Diagram

sequenceDiagram
    participant User
    participant DataTable
    participant GridJS
    
    User->>DataTable: Create with data (runtime Var) + columns (string list)
    DataTable->>DataTable: _render() called
    
    alt columns is LiteralVar with list
        DataTable->>DataTable: Transform strings to {id, name} dicts
        Note over DataTable: {"id": "Route", "name": "Route"}
    else columns already dicts or non-LiteralVar
        DataTable->>DataTable: Leave columns unchanged
    end
    
    DataTable->>GridJS: Pass transformed columns + data
    GridJS->>GridJS: Use explicit id, skip camelCase inference
    GridJS->>User: Render table with correct keys

Loading

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Transformation only applies to LiteralVar. Verify runtime Var[list[str]] columns don't need the same fix

Prompt To Fix With AI

This is a comment left during a code review.
Path: reflex/components/gridjs/datatable.py
Line: 130:137

Comment:
Transformation only applies to `LiteralVar`. Verify runtime `Var[list[str]]` columns don't need the same fix

How can I resolve this? If you propose a fix, please make it concise.

[masenf]

these should not be reformatted; our doc generator specifically looks for comments preceeding props, so if you write it like this, our doc generator breaks

[masenf]

reflex code style avoids these kind of fancy block comments

[masenf]

Remove the emoji from the comments

[masenf]

prefer to use Var Operations to construct the javascript expression

self.columns = self.columns.foreach(
    lambda col: rx.cond(col.js_type() == 'string', {"id": col, "name": col}, col)
)

The code it generates is not as "pretty", but it's more likely to remain functional as the framework evolves and the code generation changes.

[masenf]

the other hashes in this file are important too, only the changed files should be updated here