What is the purpose of html data attributes?

Definitionally:

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData().

data- attributes don't do much, but they are the standard place one might put data that could accompany an element.

When information is sent from the server, we might store some data on a root div and then with a JavaScript framework like React, render that div on the client and seek something like data-rows to find out what information should be in the rows in a list within the element. This is one of many ways we might pass data in, we might do it via a fetch request to the server, but when we get the data we may want somewhere in the HTML to store it. data- is there to be that place.