Products

[phale]

Hey @natejacobson,  yes, you can theme Smart Grid with custom CSS in a Blazor project. Just make sure your CSS overrides are loaded after the Smart UI styles. You can target specific classes in the grid using <code data-start=”209″ data-end=”217″>::deep or use <code data-start=”225″ data-end=”237″>!important if needed. Let me know what part you’re trying to style.

[phale]

<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>

[phale]

Thanks for sharing the link, Markov. That demo makes it a lot clearer how server-side features work with the Smart Grid in Angular. Appreciate it!

[phale]

“Thanks, Markov! Just to clarify, tbettinazzi was asking about search on the Ethresear.ch forum, not the HTMLElements one. Does Ethresear.ch have a search feature or workaround?”

[phale]

“@tbettinazzi@axioma I’ve handled similar cases by setting fixed widths for the known columns and then using <code data-start=”169″ data-end=”180″>flex-grow in CSS for the dynamic ones so they share leftover space. Or like Markov said, calculate the widths in JS and assign them. Depends how precise you need it. Good luck!”

[phale]

“Great tips, Fmhome improvement! I love the idea of floating shelves, they make a room feel so open. Multi-functional furniture has been a game changer for me too. Thanks for sharing!”

[phale]

Thanks for the clarification, Markov. I just ran into a similar issue with Korean locale settings, so this helps a lot. I’ll double-check the <code data-start=”142″ data-end=”152″>messages object and try setting the locale as you described.

[phale]

<p data-start=”0″ data-end=”10″>Hi Markov,</p>
<p data-start=”12″ data-end=”271″>Thanks for confirming the update is planned. I’m running into the same issue; users mostly rely on Ctrl+V, so having consistent behavior across paste methods is pretty important. Looking forward to the next release and the improvements to Excel table handling.</p>
<p data-start=”273″ data-end=”350″>If there’s any recommended workaround in the meantime, it’d be great to know.</p>

[phale]

Yep, you don’t need to create a separate tooltip for every button. Since you’re only using around 10 different messages, just add a class (like <code data-start=”212″ data-end=”226″>.has-tooltip) and a <code data-start=”234″ data-end=”248″>data-tooltip attribute to each button. Then use a bit of JavaScript to show the right tooltip on hover based on that attribute. That way, you’re only creating one tooltip at a time and not loading hundreds when the page starts.

[Author]

Posts