How can I achieve the following?

You can see the image, there is separator between raw and columns, and want to arrange the buttons like same…how can I do it?

Can anyone suggest the functions, which component can I use to achieve the whole variants in single component? Also, wants variant count as well as “+” button like screenshot.

Select a component. On the RHS Design panel add a variant under “Properties”

Select the purple dotted border that appears around the variant. You can then change the name of the variant property to “State” and add another one for “Type”.

You can add more variants by clicking the purple “+” that appears at the bottom of the component when it is selected.

If you select an individual variant you can change the value of its properties on the right hand side under “Current variant”.

As far as the grid layout is concerned you can place these components anywhere you like within the purple dotted border, you can also resize the area by clicking and dragging on the border.

More on variants here