Fix (DataTable): padding issues datatable

[paanSinghCoder]

Description

• fix: Navbar, Filters and table alignment is not proper.
  • padding: var(--rs-space-3) var(--rs-space-7) var(--rs-space-3) var(--rs-space-5); change this to padding: var(--rs-space-3) 0;
• fix: Table grouping section header title alignment is not there.
  • Unified the padding in Table and DatatTable both - padding: var(--rs-space-3);
• Memoize column definitions
  • Not memoizing columns inside DataTable because it won’t help when the parent passes a new array each render. consumers should pass a stable columns reference (e.g. via useMemo) instead, which is the usual pattern.
  • Added this as suggestion in the docs.

Before:

After:

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactor (no functional changes, no bug fixes just code improvements)
• Chore (changes to the build process or auxiliary tools and libraries such as documentation generation)
• Style (changes that do not affect the meaning of the code (white-space, formatting, etc))
• Test (adding missing tests or correcting existing tests)
• Improvement (Improvements to existing code)
• Other (please specify)

How Has This Been Tested?

[Describe the tests that you ran to verify your changes]

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (.mdx files)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

[Add screenshots here]

Related Issues

[Link any related issues here using #issue-number]

Summary by CodeRabbit

• Documentation

  • Added guidance on configuring stable column references to optimize filter, grouping, and sort performance

• Style

  • Refined spacing in data table and table component layouts

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Mar 10, 2026 0:01am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 679653d1-fa4d-45da-9394-e6eac14bdeda

📥 Commits

Reviewing files that changed from the base of the PR and between 14de0ba and b494338.

📒 Files selected for processing (3)

• apps/www/src/content/docs/components/datatable/index.mdx
• packages/raystack/components/data-table/data-table.module.css
• packages/raystack/components/table/table.module.css

---

📝 Walkthrough

Walkthrough

Documentation update adds guidance on maintaining stable column references to prevent unnecessary recomputation. CSS styling refinements reduce padding values and adjust width calculations across data-table and table components for consistency.

Changes

Cohort / File(s)	Summary
Documentation apps/www/src/content/docs/components/datatable/index.mdx	Added guidance under "Column Configuration" to use stable columns references (module scope or useMemo) to prevent recomputation of filters, grouping, and sort state.
CSS Styling packages/raystack/components/data-table/data-table.module.css, packages/raystack/components/table/table.module.css	Simplified padding values in toolbar and section headers from multi-value to single-value padding; adjusted display-popover width calculation by removing fixed space subtraction; minor selector spacing normalization.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• rohanchkrabrty

Poem

🐰 A bunny hops through CSS with glee,
Padding simplified, clean as can be!
Columns grow stable, no jitter or sway,
The table looks neater—hooray, hooray! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the main change - fixing padding issues in the DataTable component, which aligns with the CSS modifications and alignment improvements shown in the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/padding-issues-datatable

---

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.}