Data Grid
Issues
There are known styling issues with sortable columns when used in a NextJS app.
A data grid is a component designed to display large volumes in a structured and organized manner. It structures data into rows and columns, making it easy for users to visualize, analyze, and interact with the information. The data grid also improves user experience by providing features like sorting, filtering, and editing.
The Datagrid component offers a robust solution for displaying and managing tabular data. It supports essential features such as sorting and filtering, allowing users to organize and refine data easily. With multi-selection capabilities, users can perform bulk actions like deleting or exporting records efficiently. The component also includes in-line editing for quick data modifications directly within the grid, and expandable rows for showcasing additional details without cluttering the main view. Additionally, users can reorder columns to customize their data layout, ensuring an intuitive and flexible user experience tailored to their specific needs.
- Users can select one or multiple rows for bulk actions.
- Row selection can persist across pages when pagination is used in the Datagrid, ensuring users can perform bulk actions on rows even if they navigate away from the current view.
- Users can set a default selected row on initial load, useful for pre-populating forms or automatically highlighting the most relevant data for their specific use case.
- Users can easily undo multiple selections at once using the select/deselect all feature located in the Datagrid’s header, streamlining bulk actions.
- Users can apply sorting to multiple columns simultaneously, enabling more complex data analysis by arranging data based on different criteria.
- Filtering in our Datagrid is enabled through integrated Halstack components, such as Dropdowns, and is applied at the row level for precise data refinement.
- Users can modify data directly within the grid cells, allowing for quick and intuitive updates without navigating away from the grid. This feature is particularly valuable for large datasets, where edits need to be made directly within the data source for efficiency and real-time updates.
- Changes made through in-line editing are immediately reflected in the Datagrid, giving users real-time feedback on their edits.
- Additionally, when editing permissions are required, the Datagrid can be configured with other Halstack components, such as the Button, to enable editing only after the button is activated.
- The Datagrid component allows users to reveal additional information for specific rows without cluttering the main view. This optimizes space efficiency and improves user experience by offering access to in-depth information when needed, all while maintaining a clean and organized grid layout.
- The expanded area can display various content types, such as additional data fields, images, or action buttons, enhancing the data presentation.
- The re-ordering feature of our Datagrid allows users to rearrange columns according to their preferences by dragging and dropping them, enhancing the personalized data viewing experience.
- By letting users prioritize the most relevant columns, this feature helps them access and analyze data more efficiently. It is also designed to be user-friendly, enabling quick adjustments with minimal effort.
- As users drag columns, visual indicators guide them, making it clear where the column will be placed when dropped.
- Data contextualization: provide context within the grid by labeling columns clearly, ensuring users understand the significance of the data they are viewing.
- Column alignment: although data can be aligned in columns however the user chooses, it must be aligned consistently across columns to enhance readability:
- Text: aligned to the left for natural reading flow.
- Numbers and currencies: align numbers, currencies, and other quantitative data to the right for clear comparison, especially when dealing with decimals or aligning figures by their numerical place value.
- Dates and times: aligned to the left for readability, as users generally read these like text, but consider right-aligning if dates need to be compared sequentially.
- Actions: align action buttons or interactive elements (such as "Edit" or "Delete") to the center or right, depending on layout consistency. Centering actions can make them more accessible and distinguishable from data fields.
- Booleans: align checkboxes or toggles to the center to visually separate them from text or data and create a clear, interactive area.
- Icons: aligned to the center or next to their corresponding text, with spacing, to maintain clarity and improve the user interface.
- Column sizing: make sure that columns are sized appropriately for the type of data they display (e.g. dates should not take up too much space, neither do numerical values, which must take only the minimal space it requires for them to be shown without truncation).
- Clear default sorting: Set a sensible default sorting order for columns to help users quickly access the most relevant data when they first interact with the grid.
- Clear filters option: when filtering data, include a button to clear all filters at once, allowing users to quickly reset their views and return to the unfiltered dataset.
- Accessible bulk actions: ensure that bulk actions, such as “Delete” or “Export,” are easily accessible once rows are selected, facilitating efficient data management. Consider also implementing confirmation prompts for bulk actions to prevent accidental data loss and ensure users are intentional with their actions.
- Use of expandable rows: use expandable rows to display additional information that isn’t crucial for immediate viewing, but avoid overusing this feature to prevent increased cognitive load on users.
- Limit expandable content: use expandable rows sparingly to avoid overwhelming users, ensuring that only essential supplementary information is included.
- Scrolling: the Datagrid supports both horizontal and vertical scrolling to handle extensive data sets, ensuring all rows and columns are accessible without cluttering the UI. While the component supports scrolling, it is designed to prioritize displaying the most essential data upfront, minimizing the need for scrolling to reduce potential user confusion and enhance accessibility.