fix issue with data table layout using Claude

[joshunrau]

• Fix UI layout bug in DataTable where the table doesn't fill its container when both initialState.columnPinning and rowActions are set
• Root cause: getTanstackTableState mutated the original columnPinning object from initialState, causing the __actions column ID to be
  pushed to right repeatedly on each re-render
• Replace mutation with an immutable spread to create a new object each call

Summary by CodeRabbit

• New Features

  • Added a date column to the DataTable displaying dates in ISO format.
  • Date column is pinned to the left side for consistent visibility.

• Bug Fixes

  • Improved column pinning behavior when row actions are enabled.

• Enhancements

  • Group headers now centered for better visual alignment.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 927a6c03-97e5-4033-863d-3c15f0d2fcc8

📥 Commits

Reviewing files that changed from the base of the PR and between 2f47be6 and 53faaba.

📒 Files selected for processing (2)

• src/components/DataTable/DataTable.stories.tsx
• src/components/DataTable/utils.tsx

---

Walkthrough

DataTable.stories.tsx now includes a date field in test data with column pinning configuration for the Grouped story, plus centered styling for group headers. The utils.tsx file refactors columnPinning reassignment in getTanstackTableState to maintain immutability when rowActions is enabled.

Changes

Cohort / File(s)	Summary
DataTable Stories Update src/components/DataTable/DataTable.stories.tsx	Payment dataset enhanced with date field populated via faker. Grouped story adds Date column with ISO string formatting and left-side pinning. Group headers ("Internal", "Details") marked as centered.
Column Pinning Logic src/components/DataTable/utils.tsx	getTanstackTableState refactored to reassign state.columnPinning object (instead of mutating in place) when rowActions is enabled, preserving existing settings while appending ACTIONS_COLUMN_ID to the right pinned columns.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix some minor styling issues with DataTable #89: Updates ACTIONS_COLUMN_ID behavior and header logic tied to row actions column pinning.
• add new DataTable component #61: Directly modifies the same DataTable files and introduces columnPinning state management patterns.

Suggested labels

released

Poem

📅 A date joins the table's dance,
Pinned left with immutable stance,
Headers centered, neat and bright,
State flows pure—left and right,
DataTable's elegance takes flight! 🚀

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-data-table-issue

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎉 This PR is included in version 6.3.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀