feat: redesign data table toolbar and add row selection context menu [PR1] - #3714
Open
BRaimbault wants to merge 11 commits into
Open
feat: redesign data table toolbar and add row selection context menu [PR1]#3714BRaimbault wants to merge 11 commits into
BRaimbault wants to merge 11 commits into
Conversation
Contributor
|
🚀 Deployed on https://pr-3714.maps.netlify.dhis2.org |
BRaimbault
force-pushed
the
feat/datatable-pr1-toolbar
branch
from
July 6, 2026 17:31
fdf69f4 to
3de8004
Compare
Adds clearDataFilters(layerId) action creator and the corresponding
DATA_FILTERS_CLEAR_ALL reducer case that resets dataFilters to {} for
the target layer. Used by the new "Clear filters" button in the toolbar.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Returns the total number of rows before filtering (totalCount) and after filtering (filteredCount) so the toolbar can show "X of Y rows". Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces the 20px grey strip with a 36px toolbar that shows:
- Active layer name (truncated with ellipsis)
- Row count ("X of Y rows" when filtered, "Y rows" otherwise)
- "Clear filters" button (only visible when filters are active)
- Close button
Adds onCountChange callback prop to DataTable so BottomPanel can
display the post-filter row count without reading useTableData directly.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Extends highlightFeature with an optional zoom:true flag. When a table row is clicked (plain click, not Ctrl+click), dispatches highlightFeature with zoom:true. Layer.js watches for this in componentDidUpdate and calls panToFeature(), which uses getFeaturesById() to compute the feature's bounding box and calls map.fitBounds() to pan and zoom to the feature. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
BRaimbault
force-pushed
the
feat/datatable-pr1-toolbar
branch
from
July 27, 2026 09:45
34435f4 to
6541b3a
Compare
|
BRaimbault
changed the title
BRaimbault
changed the title
BRaimbault
marked this pull request as ready for review
August 4, 2026 15:21
HendrikThePendric
approved these changes
Aug 20, 2026
HendrikThePendric
left a comment
HendrikThePendric
left a comment
Contributor
There was a problem hiding this comment.
Left some minor suggestions, but this is looking very tidy 🚀
Comment on lines
+106
to
+115
| let rowCountLabel = null | ||
| if (totalCount !== null && filteredCount !== null) { | ||
| rowCountLabel = | ||
| filteredCount < totalCount | ||
| ? i18n.t('{{filtered}} of {{total}} rows', { | ||
| filtered: filteredCount, | ||
| total: totalCount, | ||
| }) | ||
| : i18n.t('{{total}} rows', { total: totalCount }) | ||
| } |
Contributor
There was a problem hiding this comment.
MINOR: Could be nice to wrap in useMemo, not because this is an expensive calculation, but simply because you can then use a const instead of let and return null early.
Comment on lines
+141
to
+148
| style={{ | ||
| top: nameTooltipPos.top, | ||
| left: nameTooltipPos.left, | ||
| color: nameTooltipPos.color, | ||
| fontSize: nameTooltipPos.fontSize, | ||
| lineHeight: nameTooltipPos.lineHeight, | ||
| paddingLeft: nameTooltipPos.paddingLeft, | ||
| }} |
Contributor
There was a problem hiding this comment.
MINOR: You can simplify this, provided there will never be any non-style fields.
Suggested change
| style={{ | |
| top: nameTooltipPos.top, | |
| left: nameTooltipPos.left, | |
| color: nameTooltipPos.color, | |
| fontSize: nameTooltipPos.fontSize, | |
| lineHeight: nameTooltipPos.lineHeight, | |
| paddingLeft: nameTooltipPos.paddingLeft, | |
| }} | |
| style={nameTooltipPos} |
Works for null too
Comment on lines
+52
to
+55
| layerType !== BOUNDARY_LAYER && | ||
| layerType !== FACILITY_LAYER && | ||
| layerType !== EVENT_LAYER && | ||
| layerType !== GEOJSON_URL_LAYER |
Contributor
There was a problem hiding this comment.
MINOR: Maybe store these layers in a Set in the module scope and do sth like !UNDRILLABLE_LAYERS.has(layer)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of DHIS2-21456
Description
Replaces the 20px data table control strip with a full 36px toolbar and adds a right-click context menu to table rows. First of a series of PRs improving the data table experience.
Toolbar (
BottomPanel)X of Y rowswhen filters are active,X rowsotherwise)Row context menu (
TableContextMenu)GeoJSON URL layer
getGeojsonFeatureProfileutility keeps the profile format consistent across map click, map context menu, and table context menuBug fixes
highlightFeaturewhen the map layer has no highlight methodQuality checklist
Add N/A to items that are not applicable.
Screenshots
supporting images