•
Flat - simple data-first material table, but with a little customization
•
Raised - table turns into a card
•
Smooth - acquires soft color saturation
•
Filled - painted completely (specific case, for example for an accent)
As you can see from the GIF above, certain attention is paid to the states: onHover, onClick, and sorting. This type of detailing became possible through the use of design-tokens from Figma that were transferred to developers in a clear manner. They had only to intercept the necessary shades from the color system in the
Setproduct Design System and fasten it into the ready-made React framework to get such data-grid, which would suit us completely. Thus, future users of our system will have many options, based on the same component of the table, but stylized variously through SCSS.