Using custom html data attribute in Thymeleaf/Springboot

If you don't need to do anything "dynamic" for an attribute, you should be able to include it directly in your document as in your first code snippet, even if it's non-standard or a data- prefixed attribute. If that's not working for you, presumably there's something else going on causing whatever issue you're seeing.

Your second code block has a typo: td:attr is how one creates a generic attribute of any type in Thymeleaf, but you have td:atrr instead. I'm assuming that's just a transcription error in your posting, but typos are one of those things computers are quite picky about.

In your second code block (which is what you'd want especially if you needed to specify the contents of a custom attribute dynamically), there are three levels of quoting: In the outer HTML, within the Thymeleaf th:attr syntax, and then quoting within the value that you're putting there. Most languages (including HTML/XML, Thymeleaf, and JSON) support using either double or single quotes interchangeably to help with these levels of nesting, but once you have three levels it can be a bit trickier. You need to escape the inner double-quotes from being parsed by the outer level, and since you're using HTML/XML in the outer level you want to use its method of escaping quotes, leaving something like this:

<div class="gallery" th:attr="data-flickity='{ &quot;cellAlign&quot;: &quot;left&quot;, &quot;contain&quot;: true }'">

Or alternatively, you could quote the second layer instead of the third layer and use single-quotes on the outer layer:

<div class="gallery" th:attr='data-flickity=&apos;{ "cellAlign": "left", "contain": true }&apos;'>