[Bug ]DataGrid: Multiple visual bugs in documentation examples

[oliveres]

DataGrid: Multiple visual bugs in documentation examples

Description

I found several visual bugs in the DataGrid component examples that affect both the documentation demos and real-world implementations.

---

Bug 1: Double border in Sub Data Grid example

Location: Sub Data Grid example

Problem: The OrderItemsSubTable component has two nested containers with borders, causing a visible double border effect.

Current code:

<div className="bg-card rounded-lg border border-muted-foreground/20">
    <DataGridContainer>
        ...
    </DataGridContainer>
</div>

Both the outer div and DataGridContainer have borders (DataGridContainer has border border-border rounded-lg by default).

Fix:

<DataGridContainer className="bg-card">
    ...
</DataGridContainer>

Or use <DataGridContainer border={false}> if you want to keep the outer div.

---

Bug 2: headerSticky: true breaks rounded corners

Problem: When using tableLayout={{ headerSticky: true }}, the table's rounded corners "fade" into transparency with a gradient-like visual glitch.

Reproduction: Add headerSticky: true to any DataGrid tableLayout prop.

Workaround: Don't use headerSticky: true until fixed.

---

Bug 3: columnsResizable: true causes double border on right edge

Problem: When using resizable columns, there's a visible double border on the right edge of the table header.

Root cause: Missing columnResizeMode: 'onChange' in useReactTable options and/or missing enableResizing: false on the last column.

Fix: The "Resizable Columns" example works correctly because it has proper configuration. Other examples with columnsResizable: true should follow the same pattern:

// In useReactTable:
const table = useReactTable({
    columnResizeMode: 'onChange',  // Required
    // ...
});

// Last column should have:
{
    id: 'lastColumn',
    enableResizing: false,  // Prevents double border
    // ...
}

---

Environment

• ReUI DataGrid component
• Tailwind CSS v4
• React 19 / Next.js 16