feat(demo): add responsive step demo

[flang]

Example demonstrates how to use responsive step feature and how to hide the grid when all columns are hidden

Close #95

[javier-godoy]

The problem in #95 is that, whatever the initial configuration of the Grid (as reported, "all columns invisible"), the changes from the responsive step will only be applied after the client-side has measured the component, causing a certain flickering.

If visibility: hidden works (since you use that in the example, I guess it does), the Grid should be first rendered with visibility: hidden until the component is measured.

[flang]

I think hiding the grid when all columns are hidden shouldn't be addon responsibility. It's user choice whether hiding the grid or not by add a listener when a responsive step event is triggered. User should also take care of the initial flickering if decied to hide the grid in any step.

[sonarcloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[javier-godoy]

Placing the responsibility on the addon for managing grid visibility makes the implementation more convenient for users. It abstracts away the complexity of handling grid visibility and flickering, making the addon more user-friendly. Users can focus on defining responsive steps and let the addon take care of the details. Having the addon manage grid visibility ensures consistency across different implementations. It also makes the codebase more maintainable and less error-prone. If each user had to manually handle grid visibility, it could lead to varied implementations and potential issues.

Moreover, it's not that they "decide to hide the grid in any step", but that there will always be flickering in some device (thus any use of the feature would have to implement the workaround in order to prevent flickering).

[flang]

In that case I'd create an opt-in feature to hide the grid when all columns are hidden.

[javier-godoy]

But the issue has never been "hide the grid when all columns are hidden" but "Show Grid once [the first] ResponsiveStep applies". Regardless of how you configure the responsive steps, there will be some flickering until the first responsive step applies.