feat(ui): add TableSection abstraction for list views by JarrodMFlesch · Pull Request #16756 · payloadcms/payload

JarrodMFlesch · 2026-05-27T14:58:25Z

Summary

Refactors hierarchy tables and group-by tables to use a shared layout abstraction called TableSection. Previously these two table types had inconsistent padding, headers, and dividers—hierarchy tables used custom margins while group-by tables had their own styling. Now both share the same compound component structure with consistent 48px headers, proper dividers between grouped sections, and unified action slot positioning for bulk selection and pagination.

The pagination controls in both table types now use SimplePagination, a minimal prev/next component that fits within the table header. This replaces the larger pagination component that was awkward in grouped contexts.

Also adds GroupByControl, a dropdown for selecting the group-by field that adapts to the current theme. The theme prop propagates from Popup through PopupList to RadioGroup items, allowing the control to render correctly in both light and dark mode contexts.

Minor fixes include preventing scroll jumps when list query params update and handling undefined fields in WhereBuilder conditions.

TableSection provides a consistent structure for list tables: - Root wrapper with automatic dividers between sections - Header with heading and action slots (48px height) - Content area with gutter padding - Footer for pagination controls ListControlsBar provides a simple container for search/filter controls.

- renderTable: wrap tables in TableSection with header/content/footer - List view: remove wrapper div, simplify structure - HierarchyList: use TableSection and ListControlsBar - GroupByHeader: simplify to just render ListSelection (heading moved to TableSectionHeader) - Remove redundant layout styles now handled by TableSection

Update test selectors from .group-by-header to .table-section__header and .group-by-header__heading to .table-section__heading

- NoListResults: add margin for proper alignment with tables - PageControls/Table: remove redundant margin/padding now in TableSection

github-actions · 2026-05-27T15:07:39Z

📦 esbuild Bundle Analysis for payload

This analysis was generated by esbuild-bundle-analyzer. 🤖

Meta File	Out File	Size (raw)	Note
packages/next/meta_index.json	esbuild/index.js	1.04 MB	⚠️ +830 B (+0.1%)
packages/payload/meta_index.json	esbuild/index.js	1.41 MB	✅ No change
packages/payload/meta_shared.json	esbuild/exports/shared.js	192.51 KB	✅ No change
packages/richtext-lexical/meta_client.json	esbuild/exports/client_optimized/index.js	304.12 KB	✅ No change
packages/ui/meta_client.json	esbuild/exports/client_optimized/index.js	1.26 MB	⚠️ +7.20 KB (+0.6%)
packages/ui/meta_shared.json	esbuild/exports/shared_optimized/index.js	18.56 KB	✅ No change

Largest paths

These visualization shows top 20 largest paths in the bundle.

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████████████▋ }}}$ 82.8%, 861.29 KB
dist/views/Version	${{\color{Goldenrod}{ █▎ }}}$ 5.0%, 51.56 KB
dist/views/Dashboard	${{\color{Goldenrod}{ ▌ }}}$ 2.1%, 21.85 KB
dist/views/Document	${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 16.73 KB
dist/views/List	${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 15.51 KB
dist/elements/Nav	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 10.26 KB
dist/views/Root	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 9.93 KB
dist/views/API	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.13 KB
dist/views/Account	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.08 KB
dist/views/Versions	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 5.74 KB
dist/elements/DocumentHeader	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 4.69 KB
dist/views/Login	${{\color{Goldenrod}{ }}}$ 0.4%, 4.57 KB
dist/layouts/Root	${{\color{Goldenrod}{ }}}$ 0.3%, 3.56 KB
dist/views/ForgotPassword	${{\color{Goldenrod}{ }}}$ 0.3%, 3.15 KB
dist/views/CreateFirstUser	${{\color{Goldenrod}{ }}}$ 0.3%, 3.02 KB
dist/views/ResetPassword	${{\color{Goldenrod}{ }}}$ 0.2%, 2.42 KB
dist/templates/Default	${{\color{Goldenrod}{ }}}$ 0.2%, 2.04 KB
dist/views/Logout	${{\color{Goldenrod}{ }}}$ 0.2%, 1.96 KB
dist/views/Verify	${{\color{Goldenrod}{ }}}$ 0.1%, 1.31 KB
dist/utilities/initReq.js	${{\color{Goldenrod}{ }}}$ 0.1%, 1.15 KB
(other)	${{\color{Goldenrod}{ ████▎ }}}$ 17.2%, 178.36 KB

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ █████████████████ }}}$ 68.4%, 959.51 KB
dist/fields/hooks	${{\color{Goldenrod}{ ▊ }}}$ 3.1%, 44.07 KB
dist/collections/operations	${{\color{Goldenrod}{ ▋ }}}$ 2.9%, 40.23 KB
dist/versions/migrations	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 18.50 KB
dist/auth/operations	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 15.63 KB
dist/fields/config	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 13.41 KB
dist/globals/operations	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 13.40 KB
dist/utilities/configToJSONSchema.js	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 13.13 KB
dist/queues/operations	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 12.63 KB
dist/fields/validations.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 10.57 KB
dist/collections/config	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 9.53 KB
dist/bin/generateImportMap	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 9.44 KB
dist/config/orderable	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.92 KB
dist/uploads/fetchAPI-multipart	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.80 KB
dist/index.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.77 KB
dist/hierarchy/utils	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 7.65 KB
dist/database/migrations	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 7.54 KB
dist/collections/endpoints	${{\color{Goldenrod}{ }}}$ 0.4%, 6.23 KB
dist/auth/strategies	${{\color{Goldenrod}{ }}}$ 0.4%, 5.43 KB
dist/queues/config	${{\color{Goldenrod}{ }}}$ 0.4%, 5.31 KB
(other)	${{\color{Goldenrod}{ ███████▉ }}}$ 31.6%, 443.37 KB

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ███████████████████▉ }}}$ 79.5%, 150.12 KB
dist/fields/validations.js	${{\color{Goldenrod}{ █▍ }}}$ 5.6%, 10.57 KB
dist/config/orderable	${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 3.13 KB
dist/fields/baseFields	${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 2.79 KB
dist/utilities/deepCopyObject.js	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 2.54 KB
dist/auth/cookies.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.55 KB
dist/utilities/flattenTopLevelFields.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.42 KB
dist/fields/config	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 1.29 KB
dist/utilities/getVersionsConfig.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 1.04 KB
dist/utilities/flattenAllFields.js	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 943 B
dist/utilities/unflatten.js	${{\color{Goldenrod}{ }}}$ 0.4%, 779 B
dist/utilities/sanitizeUserDataForEmail.js	${{\color{Goldenrod}{ }}}$ 0.4%, 713 B
dist/utilities/getFieldPermissions.js	${{\color{Goldenrod}{ }}}$ 0.3%, 651 B
dist/collections/config	${{\color{Goldenrod}{ }}}$ 0.3%, 570 B
dist/bin/generateImportMap	${{\color{Goldenrod}{ }}}$ 0.3%, 561 B
dist/auth/sessions.js	${{\color{Goldenrod}{ }}}$ 0.3%, 525 B
dist/fields/getFieldPaths.js	${{\color{Goldenrod}{ }}}$ 0.3%, 485 B
dist/utilities/appendDateTimezoneSelectFields.js	${{\color{Goldenrod}{ }}}$ 0.2%, 451 B
dist/utilities/getSafeRedirect.js	${{\color{Goldenrod}{ }}}$ 0.2%, 423 B
dist/utilities/deepMerge.js	${{\color{Goldenrod}{ }}}$ 0.2%, 413 B
(other)	${{\color{Goldenrod}{ █████▏ }}}$ 20.5%, 38.61 KB

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path	Size
dist/features/blocks	${{\color{Goldenrod}{ ███ }}}$ 12.4%, 37.36 KB
dist/lexical/ui	${{\color{Goldenrod}{ ██▊ }}}$ 11.4%, 34.16 KB
dist/lexical/plugins	${{\color{Goldenrod}{ ██▋ }}}$ 10.9%, 32.88 KB
dist/features/experimental_table	${{\color{Goldenrod}{ ██▎ }}}$ 9.0%, 27.16 KB
dist/packages/@lexical	${{\color{Goldenrod}{ █▌ }}}$ 6.3%, 18.99 KB
dist/features/link	${{\color{Goldenrod}{ █▌ }}}$ 6.3%, 18.81 KB
dist/features/toolbars	${{\color{Goldenrod}{ █▍ }}}$ 5.5%, 16.58 KB
dist/features/upload	${{\color{Goldenrod}{ █▏ }}}$ 4.7%, 14.09 KB
dist/features/textState	${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 11.08 KB
dist/features/relationship	${{\color{Goldenrod}{ ▊ }}}$ 3.1%, 9.39 KB
dist/lexical/utils	${{\color{Goldenrod}{ ▋ }}}$ 2.9%, 8.79 KB
dist/features/converters	${{\color{Goldenrod}{ ▋ }}}$ 2.8%, 8.36 KB
dist/features/debug	${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 7.40 KB
dist/utilities/fieldsDrawer	${{\color{Goldenrod}{ ▌ }}}$ 2.4%, 7.29 KB
dist/lexical/config	${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 5.08 KB
dist/features/lists	${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 5.00 KB
dist/features/format	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 3.46 KB
dist/lexical/LexicalEditor.js	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 3.23 KB
dist/features/horizontalRule	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 3.18 KB
dist/field/Field.js	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 2.84 KB
(other)	${{\color{Goldenrod}{ █████████████████████▉ }}}$ 87.6%, 263.53 KB

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ███████████▋ }}}$ 46.5%, 579.79 KB
dist/elements/Hierarchy	${{\color{Goldenrod}{ ▉ }}}$ 3.5%, 44.00 KB
dist/elements/BulkUpload	${{\color{Goldenrod}{ ▌ }}}$ 2.3%, 28.06 KB
dist/views/HierarchyList	${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 20.40 KB
dist/elements/Table	${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 19.25 KB
dist/elements/WhereBuilder	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 17.34 KB
dist/views/Edit	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 17.27 KB
dist/forms/Form	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.87 KB
dist/fields/Relationship	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 15.47 KB
dist/fields/Blocks	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 15.11 KB
dist/fields/Upload	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 14.38 KB
dist/elements/QueryPresets	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 10.20 KB
dist/elements/PublishButton	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 9.01 KB
dist/elements/HTMLDiff	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.38 KB
dist/elements/LivePreview	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.25 KB
dist/elements/ReactSelect	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.84 KB
dist/fields/Array	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.75 KB
dist/views/List	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.75 KB
dist/elements/RelationshipTable	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.87 KB
dist/elements/Upload	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.61 KB
(other)	${{\color{Goldenrod}{ █████████████▍ }}}$ 53.5%, 667.18 KB

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

Path	Size
dist/graphics/Logo	${{\color{Goldenrod}{ ███████▊ }}}$ 31.1%, 5.57 KB
../../node_modules	${{\color{Goldenrod}{ ███▋ }}}$ 14.8%, 2.65 KB
dist/graphics/Icon	${{\color{Goldenrod}{ ██▏ }}}$ 8.5%, 1.52 KB
dist/utilities/formatDocTitle	${{\color{Goldenrod}{ █▊ }}}$ 7.4%, 1.32 KB
dist/providers/TableColumns	${{\color{Goldenrod}{ █▏ }}}$ 4.8%, 866 B
dist/utilities/getGlobalData.js	${{\color{Goldenrod}{ █ }}}$ 4.2%, 762 B
dist/utilities/api.js	${{\color{Goldenrod}{ █ }}}$ 4.2%, 756 B
dist/utilities/groupNavItems.js	${{\color{Goldenrod}{ █ }}}$ 4.1%, 734 B
dist/elements/Translation	${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 493 B
dist/utilities/handleTakeOver.js	${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 440 B
dist/utilities/traverseForLocalizedFields.js	${{\color{Goldenrod}{ ▌ }}}$ 2.2%, 399 B
dist/elements/withMergedProps	${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 339 B
dist/utilities/getNavGroups.js	${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 338 B
dist/utilities/getVisibleEntities.js	${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 329 B
dist/elements/WithServerSideProps	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 232 B
dist/utilities/handleGoBack.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 180 B
dist/fields/mergeFieldStyles.js	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 159 B
dist/utilities/handleBackToDashboard.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 152 B
dist/forms/Form	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 147 B
dist/utilities/abortAndIgnore.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 146 B
(other)	${{\color{Goldenrod}{ █████████████████▏ }}}$ 68.9%, 12.36 KB

Details

Next to the size is how much the size has increased or decreased compared with the base branch of this PR.

‼️: Size increased by 20% or more. Special attention should be given to this.
⚠️: Size increased in acceptable range (lower than 20%).
✅: No change or even downsized.
🗑️: The out file is deleted: not found in base branch.
🆕: The out file is newly found: will be added to base branch.

JarrodMFlesch added 5 commits May 27, 2026 10:55

test: update selectors for TableSection changes

928d110

Update test selectors from .group-by-header to .table-section__header and .group-by-header__heading to .table-section__heading

chore: adjust spacing for TableSection layout

a823a22

- NoListResults: add margin for proper alignment with tables - PageControls/Table: remove redundant margin/padding now in TableSection

fix(ui): prevent scroll on list query URL updates

59cf901

github-actions Bot added the created-by: Payload team label May 27, 2026

JarrodMFlesch changed the title ~~Fix/table section abstraction~~ feat(ui): add TableSection abstraction for list views May 27, 2026

JarrodMFlesch added 21 commits May 27, 2026 11:44

feat(ui): add SimplePagination component

621e704

chore: remove unused TableSection.Footer

52ef930

feat(ui): use SimplePagination in HierarchyTable

186c400

feat(ui): use SimplePagination in group-by tables

fff3211

chore: add TagItems and FolderItems test collections

7ec80b3

chore: remove collection-list bottom padding

d852826

feat(ui): add theme prop to Popup component

06d5d88

feat(ui): add MenuItem and RadioGroup components to PopupList

ffd0ef8

feat(ui): add size prop to Edit, Refresh, Trash, X, and Clipboard icons

b81b2e9

chore: replace static pixels with CSS variables

5490f86

chore: update components to use new PopupList APIs

6a4f566

chore(translations): add general:field to client keys

e2faa12

feat(ui): add GroupByControl component with theme auto support

49b844d

fix(ui): handle undefined field in WhereBuilder updateCondition

88bde51

updates sticky toolbar for group by

9297287

refactor(ui): rename ReducedField.value to fieldPath for clarity

b5794e0

chore(ui): add withMargin prop to NoListResults

ce7a01b

rm duplicate test

ebf4002

fix group by tests

50be6d0

fix group-by e2e

7a21f6e

chore: update access-control groupBy tests for popup UI

ac6b2de

JarrodMFlesch marked this pull request as ready for review May 28, 2026 18:07

JarrodMFlesch requested review from AlessioGr and jacobsfletch as code owners May 28, 2026 18:07

PatrikKozak self-assigned this May 28, 2026

PatrikKozak approved these changes May 28, 2026

View reviewed changes

JarrodMFlesch merged commit 8fd92df into main May 28, 2026
321 of 326 checks passed

JarrodMFlesch deleted the fix/table-section-abstraction branch May 28, 2026 18:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): add TableSection abstraction for list views#16756

feat(ui): add TableSection abstraction for list views#16756
JarrodMFlesch merged 26 commits into
mainfrom
fix/table-section-abstraction

JarrodMFlesch commented May 27, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 27, 2026 •

edited

Loading

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

JarrodMFlesch commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

github-actions Bot commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 esbuild Bundle Analysis for payload

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

JarrodMFlesch commented May 27, 2026 •

edited

Loading

github-actions Bot commented May 27, 2026 •

edited

Loading