• 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.

