<p data-start=”106″ data-end=”224″>You can bind data to the Smart Table in Vue by using the <code data-start=”163″ data-end=”170″>:data binding. Just pass your array of objects like this:</p>
<div class=”contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary”>
<div class=”flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary select-none rounded-t-2xl”>html</div>
<div class=”sticky top-9″>
<div class=”absolute end-0 bottom-0 flex h-9 items-center pe-2″>
<div class=”bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs”><button class=”flex gap-1 items-center select-none py-1″ aria-label=”Copy”>Copy</button><span class=”” data-state=”closed”><button class=”flex items-center gap-1 py-1 select-none”>Edit</button></span></div>
</div>
</div>
<div class=”overflow-y-auto p-4″ dir=”ltr”><code class=”whitespace-pre! language-html”><span class=”hljs-tag”><<span class=”hljs-name”>smart-table</span></span> <span class=”hljs-attr”>:data</span>=<span class=”hljs-string”>”myDataArray”</span>><span class=”hljs-tag”></<span class=”hljs-name”>smart-table</span></span>>
</div>
</div>
<p data-start=”287″ data-end=”377″ data-is-last-node=”” data-is-only-node=””>Make sure <code data-start=”297″ data-end=”310″>myDataArray is defined in your component’s <code data-start=”342″ data-end=”350″>data() or from a Vuex store, etc.</p>
.
