feat(admin-ui): use virtual datatable in admin app by rsbh · Pull Request #1373 · raystack/frontier

rsbh · 2026-02-09T09:21:58Z

Summary

This PR updates the following tables to use Virtualized DataTable.

Organizations
Users
Audit Logs
Invoices

Technical Details

Test Plan

Manual testing completed
Build and type checking passes

vercel · 2026-02-09T09:22:04Z

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

Project	Deployment	Actions	Updated (UTC)
frontier	Ready	Preview, Comment	Feb 16, 2026 8:25am

coderabbitai · 2026-02-09T09:22:19Z

📝 Walkthrough

Summary by CodeRabbit

Style
- Changed column width constraints from maximum to minimum width specifications in table views
- Updated table container height and scrolling overflow behavior
Performance
- Implemented virtualized table rendering in organization, user, audit log, and invoice management views
Chores
- Updated admin interface dependencies

Walkthrough

This PR updates the Apsara dependency version and introduces virtual scrolling to data tables across the admin application by replacing DataTable.Content with DataTable.VirtualizedContent while adjusting table styling to use minimum column widths and fixed container heights instead of maximum constraints.

Changes

Cohort / File(s)	Summary
Dependency Update `web/apps/admin/package.json`	Updated "@raystack/apsara" from "^0.53.2" to "^0.56.2"
DataTable Virtualization in Admin Pages `web/apps/admin/src/pages/organizations/list/index.tsx`, `web/apps/admin/src/pages/users/list/list.tsx`	Replaced DataTable.Content with DataTable.VirtualizedContent and added rowHeight and groupHeaderHeight props to enable virtual scrolling.
DataTable Virtualization in Admin Views `web/lib/admin/views/audit-logs/index.tsx`, `web/lib/admin/views/invoices/index.tsx`	Replaced DataTable.Content with DataTable.VirtualizedContent and configured row/group header heights for virtual rendering.
Column & Table Styling in Admin Pages `web/apps/admin/src/pages/organizations/list/columns.tsx`, `web/apps/admin/src/pages/organizations/list/list.module.css`, `web/apps/admin/src/pages/users/list/list.module.css`	Updated column styling: added per-column style blocks, changed name-column from max-width 200px to min-width 300px, added creator-column, and changed table-wrapper from max-height with overflow:scroll to height with overflow:auto.
Table Styling in Admin Views `web/lib/admin/views/audit-logs/audit-logs.module.css`, `web/lib/admin/views/invoices/invoices.module.css`	Changed column widths from max-width constraints to min-width 300px and updated table containers from max-height with overflow:scroll to height with overflow:auto.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	Description covers Summary and lists the four affected tables, but Technical Details and Test Plan sections lack substantive content and test checkboxes remain incomplete.	Complete the Test Plan checkboxes to confirm manual testing and build checks were performed; optionally add technical details about virtualization benefits or row height configurations.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adopting virtualized datatable components across admin app screens.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into `main`

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

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat_admin_ui_virtual_table

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

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

coveralls · 2026-02-09T09:28:04Z

Pull Request Test Coverage Report for Build 22055275872

Details

0 of 0 changed or added relevant lines in 0 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 38.24%

Totals
Change from base Build 22052862464:	0.0%
Covered Lines:	16107
Relevant Lines:	42121

💛 - Coveralls

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@web/apps/admin/src/pages/audit-logs/list/list.module.css`:
- Around line 53-59: The .table-content-container CSS currently has two height
declarations; remove the redundant height: 100% so only height: calc(100vh -
90px) remains in the .table-content-container rule, leaving overflow, width and
position untouched to ensure the intended viewport-based height is applied.

🧹 Nitpick comments (2)

web/apps/admin/src/pages/organizations/list/list.module.css (1)
40-44: Consider avoiding the hard-coded 90px height offset.

A fixed offset can drift if the navbar/toolbar height changes (wrapping, responsive layouts), leading to double scroll or clipped space. A CSS variable keeps it in sync.
Optional tweak (keeps current fallback)
 .table-wrapper {
   /* Navbar Height + Toolbar height */
-  height: calc(100vh - 90px);
+  height: calc(100vh - var(--admin-list-header-height, 90px));
   overflow: auto;
 }
web/apps/admin/src/pages/organizations/list/columns.tsx (1)
56-63: Avoid duplicated magic widths for column sizing.

The 300px width is repeated across multiple columns; consider centralizing it in constants to reduce drift during future tweaks.
Example consolidation
+const NAME_COL_WIDTH = 300;
+const CREATOR_COL_WIDTH = 300;
+const PLAN_COL_WIDTH = 250;
...
       styles: {
-        cell: { flex: '0 0 300px' },
-        header: { flex: '0 0 300px' }
+        cell: { flex: `0 0 ${NAME_COL_WIDTH}px` },
+        header: { flex: `0 0 ${NAME_COL_WIDTH}px` }
       },

web/lib/admin/views/audit-logs/audit-logs.module.css

coderabbitai

🧹 Nitpick comments (1)

web/apps/admin/src/pages/organizations/list/columns.tsx (1)

56-63: Consider removing redundant width specifications.

The column uses both classNames (referencing CSS with min-width: 300px) and inline styles with flex: '0 0 300px'. The flex shorthand sets a fixed 300px width that overrides the CSS min-width behavior. If the intent is a fixed width, the classNames width styling becomes redundant; if the intent is a minimum width, the inline styles override that.

rsbh changed the title ~~Feat admin UI virtual table~~ feat(admin-ui): use virtual datatable in admin app Feb 9, 2026

rsbh requested review from paanSinghCoder and rohanchkrabrty February 9, 2026 09:22

coderabbitai bot reviewed Feb 9, 2026

View reviewed changes

web/lib/admin/views/audit-logs/audit-logs.module.css Show resolved Hide resolved

rsbh added 7 commits February 16, 2026 12:23

chore: update apsara

7a4a7a2

chore: update apsara version

5c4f93c

chore: use VirtualizedContent in org list table

52b7344

fix: styles issue in org list

3153231

feat: add VirtualizedContent in users list

56022ce

feat: use VirtualizedContent in audit log table

23eb3db

feat: add VirtualizedContent to Invoice table

cb28bd0

rsbh force-pushed the feat_admin_ui_virtual_table branch from 4f25d14 to cb28bd0 Compare February 16, 2026 08:24

vercel bot deployed to Preview February 16, 2026 08:25 View deployment

paanSinghCoder approved these changes Feb 16, 2026

View reviewed changes

coderabbitai bot reviewed Feb 16, 2026

View reviewed changes

rsbh merged commit de246c4 into main Feb 16, 2026
8 checks passed

rsbh deleted the feat_admin_ui_virtual_table branch February 16, 2026 08:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(admin-ui): use virtual datatable in admin app#1373

feat(admin-ui): use virtual datatable in admin app#1373
rsbh merged 7 commits intomainfrom
feat_admin_ui_virtual_table

rsbh commented Feb 9, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Feb 9, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Feb 9, 2026 •

edited

Loading

Summary by CodeRabbit

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

coveralls commented Feb 9, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

rsbh commented Feb 9, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Technical Details

Test Plan

Uh oh!

vercel bot commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

coveralls commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Test Coverage Report for Build 22055275872

Details

💛 - Coveralls

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rsbh commented Feb 9, 2026 •

edited by coderabbitai bot

Loading

vercel bot commented Feb 9, 2026 •

edited

Loading

coderabbitai bot commented Feb 9, 2026 •

edited

Loading

coveralls commented Feb 9, 2026 •

edited

Loading