Datatable Enhancements #197
Conversation
|
WalkthroughThe pull request introduces significant enhancements to the project's multilingual support and data presentation capabilities through the integration of a DataTables.js view. Key updates include the addition of translation keys for search functionalities, layout modifications for navigation to a new table view, and styling improvements for better user interaction. A new Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
_includes/js/table-js.html (1)
122-139: Consider refactoring duplicate render functionsThe
renderfunctions for handling keywords and markdown links have similar logic in lines 122-139 and 143-161. Refactoring the common functionality into a helper function could reduce code duplication and improve maintainability.Also applies to: 143-161
assets/lib/datatables/datatables.min.css (1)
13-26: Consider adding non-minified CSS files for easier maintenanceIncluding minified CSS directly in the repository makes it difficult to review and maintain the styles. Consider adding the non-minified versions of these CSS files to the repository and using a build process to minify them as part of your deployment pipeline.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
_data/config-table.csvis excluded by!**/*.csvassets/lib/datatables/DataTables-1.13.5/images/sort_asc.pngis excluded by!**/*.pngassets/lib/datatables/DataTables-1.13.5/images/sort_asc_disabled.pngis excluded by!**/*.pngassets/lib/datatables/DataTables-1.13.5/images/sort_both.pngis excluded by!**/*.pngassets/lib/datatables/DataTables-1.13.5/images/sort_desc.pngis excluded by!**/*.pngassets/lib/datatables/DataTables-1.13.5/images/sort_desc_disabled.pngis excluded by!**/*.pngassets/lib/datatables/datatables.min.jsis excluded by!**/*.min.js
📒 Files selected for processing (10)
_data/translations.yml(3 hunks)_includes/js/table-js.html(3 hunks)_layouts/browse.html(1 hunks)_layouts/cloud.html(1 hunks)_layouts/data.html(1 hunks)_layouts/list.html(1 hunks)_layouts/timeline_edtf.html(1 hunks)_sass/_custom.scss(6 hunks)assets/lib/datatables/datatables.min.css(1 hunks)pages/table.md(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- pages/table.md
🔇 Additional comments (10)
_includes/js/table-js.html (1)
3-8: Variables for translations are correctly assigned
The assignment of translation variables with default values ensures multilingual support and fallback options.
_layouts/data.html (1)
10-68: Navigation buttons are implemented correctly
The addition of the button group enhances user navigation between different views. The use of Bootstrap classes ensures a responsive design, and the inclusion of translation keys maintains multilingual support.
_layouts/cloud.html (1)
47-53: Consistent addition of the "Table" view button
The new "Table" button is consistently added to the view switcher, matching the style and structure of existing buttons. Accessibility considerations, such as aria-label, are appropriately handled.
_layouts/browse.html (1)
46-52: LGTM! The table view button implementation is consistent and accessible.
The new button follows the established patterns for navigation, properly implements accessibility attributes, and maintains consistent styling with other buttons in the group.
_layouts/list.html (1)
65-71: LGTM! Consistent implementation across layouts.
The table view button implementation maintains consistency with the browse layout, following the same patterns for accessibility, translations, and styling.
_sass/_custom.scss (3)
112-121: LGTM! Consistent styling for the search input.
The search input styling maintains consistency with the application's design system, including proper focus states and border colors.
194-196: LGTM! Well-structured table and SearchBuilder styling.
The table header and SearchBuilder component styling improves the visual hierarchy and maintains consistency with the application's design patterns.
Also applies to: 209-226
391-399: LGTM! Responsive layout adjustments.
The media queries appropriately handle layout adjustments for smaller screens, ensuring proper spacing and flexible growth.
_layouts/timeline_edtf.html (1)
68-74: LGTM! Well-implemented table view button.
The implementation follows best practices:
- Consistent with existing button styling
- Proper accessibility attributes
- Leverages translation system
_data/translations.yml (1)
647-650: LGTM! Complete table translations.
The translations for the table label are properly implemented in all supported languages (English, Spanish, and German).
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
_data/translations.yml (1)
Line range hint
649-668: Add missing Spanish translations for view optionsSome view options are missing Spanish translations while having English and German versions.
Add the missing Spanish translations:
view-objects: en: "Show object view" + es: "Mostrar vista de objetos" de: "Zeige Objektansicht" view-timeline: en: "Show objects on timeline" + es: "Mostrar objetos en línea de tiempo" de: "Zeige Objekte auf einer Zeitachse" view-subjects: en: "Show list of subjects" + es: "Mostrar lista de temas" de: "Zeige Liste mit Schlagwörtern" view-eras: en: "Show list of eras" + es: "Mostrar lista de épocas" de: "Zeige Liste der Epochen"
🧹 Nitpick comments (1)
_includes/js/table-js.html (1)
49-107: Consider adding error handling for export actionsThe layout configuration is well-structured, but consider adding error handling for export operations.
Add try-catch blocks around export operations:
action: function ( e, dt, node, config ) { + try { $('#dataModal').modal('show'); + } catch (error) { + console.error('Failed to show export modal:', error); + // Fallback action or user notification + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
_data/translations.yml(3 hunks)_includes/js/table-js.html(3 hunks)
🔇 Additional comments (4)
_includes/js/table-js.html (3)
3-8: LGTM: Translation variables properly initialized
The translation variables are correctly initialized with appropriate fallbacks, following i18n best practices.
35-38: LGTM: DataTable configuration is well structured
The DataTable initialization includes proper language handling and essential features like fixed headers and automatic width adjustment.
Also applies to: 45-48
166-171: LGTM: Initialization completion handler is well implemented
The initComplete function properly handles the SearchBuilder container visibility and search bar styling.
_data/translations.yml (1)
445-452: LGTM: Search translations are complete and consistent
The translations for quick and advanced search are properly implemented across all supported languages.
|
@maehr @koilebeit Do you have an opinion on which columns to display initially? At the moment, I have set title, date, description, subject, era, source, and rights to be visible initially. However, the description takes up a lot of space and other columns might be more useful. |
There was a problem hiding this comment.
Many thanks for the PR.
I have noticed two small things that I do not yet find optimal:
- the filter slot on the object page is now very small. Too small?
- If you activate too many columns, the table extends beyond the layout. could we solve this with a horizontal scrollbar like on the item page for a csv?
There was a problem hiding this comment.
Many thanks for the PR.
I have noticed two small things that I do not yet find optimal:
- the filter slot on the object page is now very small. Too small?
- If you activate too many columns, the table extends beyond the layout. could we solve this with a horizontal scrollbar like on the item page for a csv?
|
Not really related but also not nice: The LINK is messed up ;) |
There was a problem hiding this comment.
Thanks a lot for the PR. It already looks nice, but I could not dive into all features. @koilebeit do you have time to deep dive?
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
_sass/_custom.scss (1)
194-196: Consider scoping the table header stylesWhile the vertical alignment is correct, consider scoping this style to the specific DataTable class to avoid affecting other tables in the application.
-.table>thead { +.collection-table>thead { vertical-align: middle; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
_includes/js/table-js.html(3 hunks)_layouts/data.html(1 hunks)_sass/_custom.scss(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- _layouts/data.html
- _includes/js/table-js.html
🔇 Additional comments (4)
_sass/_custom.scss (4)
112-121: LGTM! Search input styling maintains consistency
The styling for #dt-search-0 follows the established pattern for form controls and maintains the project's color scheme.
228-230: Consider accessibility implications of hiding the close button
Hiding the .dtb-popover-close button might affect keyboard accessibility. Consider making it visually hidden but still accessible to screen readers.
209-211: 🛠️ Refactor suggestion
Reconsider hiding the SearchBuilder title
Hiding the title row completely might affect accessibility. Consider making it visually hidden but still accessible to screen readers.
.dtsb-titleRow {
- display: none;
+ @extend .visually-hidden;
}Likely invalid or redundant comment.
217-219: Review flex-wrap behavior for small screens
Preventing flex-wrap with !important might cause layout issues on small screens where space is limited.
✅ Verification successful
Overriding flex-wrap is safe in this context
The !important override for flex-wrap: nowrap on .dtsb-logicContainer is actually appropriate here. The DataTables SearchBuilder library already handles responsive behavior appropriately:
- For small screens (max-width: 550px), the parent criteria container switches to a column layout with
flex-direction: column - The logic container itself is positioned absolutely and transformed, making the
nowrapbehavior necessary for the logic buttons - The library's CSS ensures proper stacking and spacing of elements on mobile devices
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for existing responsive handling of SearchBuilder
rg -l "dtsb-logicContainer.*@media" --type css
Length of output: 89
Script:
#!/bin/bash
# Check the content of the file to understand the responsive behavior
rg "dtsb-logicContainer.*@media" -A 5 -B 5 --type css
Length of output: 7064
| .collection-table { | ||
| border: hidden; | ||
| } | ||
|
|
||
| table.dataTable.fixedHeader-floating,table.dataTable.fixedHeader-locked { | ||
| background-color: #ffe880; | ||
| } | ||
|
|
||
| .dt-scroll { | ||
| border: 6.5px solid #ffe880; | ||
| border-radius: .25rem; | ||
| } | ||
|
|
||
| .dt-scroll-head { | ||
| background-color: #ffe880; | ||
| } | ||
|
|
||
| .dt-scroll-body { | ||
| border: none !important; | ||
| } | ||
|
|
||
| thead, tbody, th, td { | ||
| border: none !important; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consolidate table border styles
There are multiple overlapping border-related rules with !important flags. Consider consolidating these styles to reduce specificity conflicts and improve maintainability.
.collection-table {
- border: hidden;
+ border: none;
+
+ .dt-scroll {
+ border: 6.5px solid #ffe880;
+ border-radius: .25rem;
+
+ thead, tbody, th, td {
+ border: none;
+ }
+ }
}
-table.dataTable.fixedHeader-floating,
-table.dataTable.fixedHeader-locked {
+.collection-table.fixedHeader-floating,
+.collection-table.fixedHeader-locked {
background-color: #ffe880;
}
-.dt-scroll {
- border: 6.5px solid #ffe880;
- border-radius: .25rem;
-}
-.dt-scroll-body {
- border: none !important;
-}
-thead, tbody, th, td {
- border: none !important;
-}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .collection-table { | |
| border: hidden; | |
| } | |
| table.dataTable.fixedHeader-floating,table.dataTable.fixedHeader-locked { | |
| background-color: #ffe880; | |
| } | |
| .dt-scroll { | |
| border: 6.5px solid #ffe880; | |
| border-radius: .25rem; | |
| } | |
| .dt-scroll-head { | |
| background-color: #ffe880; | |
| } | |
| .dt-scroll-body { | |
| border: none !important; | |
| } | |
| thead, tbody, th, td { | |
| border: none !important; | |
| } | |
| .collection-table { | |
| border: none; | |
| .dt-scroll { | |
| border: 6.5px solid #ffe880; | |
| border-radius: .25rem; | |
| thead, tbody, th, td { | |
| border: none; | |
| } | |
| } | |
| } | |
| .collection-table.fixedHeader-floating, | |
| .collection-table.fixedHeader-locked { | |
| background-color: #ffe880; | |
| } | |
| .dt-scroll-head { | |
| background-color: #ffe880; | |
| } |
| .row > :not(:has(.pagination)) { | ||
| flex-grow: 1; | ||
| } |
There was a problem hiding this comment.
💡 Codebase verification
Browser compatibility concern confirmed for :has() selector
The :has() selector is only supported in modern browsers since late 2022. Since there are no existing fallback patterns or @supports checks in the codebase, you should:
- Add a fallback style for browsers that don't support
:has():/* Fallback for browsers without :has support */ .row > * { flex-grow: 1; } /* Modern browsers */ .row > :not(:has(.pagination)) { flex-grow: 1; }
- Or use
@supportsfor progressive enhancement:/* Base styles */ .row > * { flex-grow: 1; } /* Enhanced styles for modern browsers */ @supports selector(:has(*)) { .row > :not(:has(.pagination)) { flex-grow: 1; } }
🔗 Analysis chain
Check browser compatibility for :has selector
The :has() selector is relatively new and might not be supported in all browsers. Consider adding a fallback.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for any existing fallback patterns in the codebase
rg ":has\(" --type css
Length of output: 80
Script:
#!/bin/bash
# Check for any @supports usage in CSS files that might indicate existing patterns for progressive enhancement
rg "@supports" --type css -A 2
Length of output: 30
Pull request
Proposed changes
Resolves #183 with a separate table-view for the browse page.
Types of changes
Checklist
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Style
Chores