Introduction
During the development of an application to manage and monitor real-time manufacturing operations on the factory floor (MES or Manufacturing Execution System), the need arose to develop a robust data-grid component with advanced functionalities such as viewing and manipulating large volumes of data. The data-grid also needed to have other basic functionalities, such as sorting, filtering, and column grouping.
Example of Data-grid
Challenge
The biggest challenge in designing the component was balancing functionality and usability. On one hand, the data-grid required several built-in functionalities and a high level of customization for data visualization and editing. On the other hand, there was a need to keep the interface intuitive and accessible, even for users without advanced technical expertise. Additionally, we faced challenges related to the component's performance and ensuring it was reusable across new products, with plans to integrate it into our design system in the future.
Research and Benchmarking
The first step was to conduct a session with stakeholders to define the functionalities and configurations that would be implemented, distinguishing between those exclusive to the MES product and those that would be part of the component integrated into the design system.
List of the parts that make up the data-grid, grouping the functionalities and configurations to be implemented, those exclusive to the MES product, and those that would be part of the base component.
During this structured discussion, some functionalities emerged that had not been mentioned in earlier conversations, such as the ability to save configuration presets for
the data-grid and the option to pin columns.
Following this, we began a benchmark analysis of existing data-grids in the market, such as Ag-Grid and
Handsontable, evaluating their strengths and weaknesses. Between the two, Ag-Grid became the primary reference for our first version,
especially for filtering and grouping functionalities.
Demo of Ag-Grid
Prototyping and Componentization
With the requirements in hand, we distributed the functionalities and determined their placement relative to the data-grid. We then moved directly to prototyping, as we already had a design system with well-defined basic components and other patterns. We proceeded with high-fidelity prototyping using the existing design system.
Redefining the placement of data-grid functionalities and prioritizing the first functionalities to be prototyped.
We started the prototypes by defining the most basic interactions for the table cells, including cell selection and row selection. We also defined the possible interactions and functionalities for the table header and the table pagination modes.
Prototypes of basic interactions with the data-grid columns.
After defining these basic functionalities, we moved on to more complex features such as filtering, sorting, and grouping. We decided to centralize these three functionalities in a data-grid configuration panel, alongside the pre-defined configurations.
Grouping functionality of the data-grid.
Sorting functionality of the data-grid, where it is possible to sort by multiple columns.
In parallel, we also defined the construction of the components that would make up the data-grid. We chose to break the component into smaller subcomponents, such as the cell, header, footer, and the filter, sorting, and grouping panels.
Some of the components that make up the data-grid.
With the prototypes ready, we held another meeting with stakeholders and made some adjustments, particularly to the filter, which now needed to be a logical and more comprehensive filter.
The final component and some related functionalities can be viewed in this link.
Results
After development, the data-grid component was integrated into Plasma UI, the design system of Vetta in collaboration with SMS Digital. Other teams began using the component, which initially provided a standardization of basic interactions involving tables. Currently, about 70% of the products using Plasma UI utilize the component.
We also maintained open communication with the designers and developers using the data-grid to add new features and address potential corrections.