Skip to content

console: add group rows to UniversalTable and migrate the billing ledger - #38045

Merged
leedqin merged 1 commit into
MaterializeInc:mainfrom
leedqin:universal-table-group-rows
Aug 5, 2026
Merged

console: add group rows to UniversalTable and migrate the billing ledger#38045
leedqin merged 1 commit into
MaterializeInc:mainfrom
leedqin:universal-table-group-rows

Conversation

@leedqin

@leedqin leedqin commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

UniversalTable / useUniversalTable:

  • getSubRows opts a table into expandable groups: caret, click and Enter/Space toggle, aria-expanded, indented children. onRowClick fires for leaf rows only. New initialExpanded shorthand.
  • Pagination counts group rows only, so children stay on the parent's page. Under manualPagination the pagination row model is bypassed, so paginateExpandedRows defaults to true there and expansion happens in the expanded row model instead.
  • Group tables filter from leaf rows by default. Searching a child keeps its parent group visible.
  • Footer rows render from columnDef.footer, styleable via footerSx and targetable via footerTestId. meta.isNumeric right-aligns a column's header, body cells, and footer cell. rowTestId gives rows per-row test ids.
  • Fix CNS-101: with autoResetPageIndex off, changing the global filter or a column filter could strand the user past the end of the filtered results ("page 4 of 2" on the cluster list). Filter changes now reset to page 1, routed through the caller's onPaginationChange. MaintainedObjects drops its local copy of the same reset.

Billing:

  • UnifiedLedger renders through useUniversalTable with a union row type (account or cluster) and static column defs. The Usage header derives from table.getIsSomeRowsExpanded() instead of lifted open-state.
  • LedgerTable.tsx is deleted. The ledger look (borderless child rows, tall top-bordered group rows, bordered total row) is recreated via rowSx and footerSx.
  • Note for design review: the collapse height animation is gone. It only ever worked outside Safari (SafariSafeCollapse fell back to an instant toggle) and required the grid + subgrid implementation this removes. Expansion is now an instant toggle in all browsers.

Motivation

Adding UI enhancements to the current table component/ library in the console to support grouped rows

Verification

For CNS-101 fix: Impersonated into customer environment with multiple pages to verify that page index and search filtering is working correctly
https://github.com/user-attachments/assets/30462829-45a2-4a3b-be5d-0a07033a749d

  • For Billing Ledger table, I have verified that the migration and using the grouped row keeps the same design and logic
image

Tips For Reviewers:

  • I would recommend starting review from the universal table guide and maybe see the billing ledger table for the grouped row usage

UniversalTable / useUniversalTable:
* getSubRows opts a table into expandable groups: caret, click and
  Enter/Space toggle, aria-expanded, indented children. onRowClick fires
  for leaf rows only. New initialExpanded shorthand.
* Pagination counts group rows only, so children stay on the parent's
  page. Under manualPagination the pagination row model is bypassed, so
  paginateExpandedRows defaults to true there and expansion happens in
  the expanded row model instead.
* Group tables filter from leaf rows by default. Searching a child keeps
  its parent group visible.
* Footer rows render from columnDef.footer, styleable via footerSx and
  targetable via footerTestId. meta.isNumeric right-aligns a column's
  header, body cells, and footer cell. rowTestId gives rows per-row
  test ids.
* Fix CNS-101: with autoResetPageIndex off, changing the global filter
  or a column filter could strand the user past the end of the filtered
  results ("page 4 of 2" on the cluster list). Filter changes now reset
  to page 1, routed through the caller's onPaginationChange.
  MaintainedObjects drops its local copy of the same reset.

Billing:
* UnifiedLedger renders through useUniversalTable with a union row type
  (account or cluster) and static column defs. The Usage header derives
  from table.getIsSomeRowsExpanded() instead of lifted open-state.
* LedgerTable.tsx is deleted. The ledger look (borderless child rows,
  tall top-bordered group rows, bordered total row) is recreated via
  rowSx and footerSx.
* Note for design review: the collapse height animation is gone.
  It only ever worked outside Safari (SafariSafeCollapse fell back to an
  instant toggle) and required the grid + subgrid implementation this
  removes. Expansion is now an instant toggle in all browsers.
@leedqin
leedqin requested a review from a team as a code owner August 4, 2026 14:22
@leedqin
leedqin requested review from Alphadelta14 and jdonelson and removed request for Alphadelta14 August 4, 2026 14:22
@leedqin leedqin added the A-CONSOLE Area: Console label Aug 4, 2026
@leedqin
leedqin merged commit 8e00b41 into MaterializeInc:main Aug 5, 2026
123 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-CONSOLE Area: Console

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants