How to dynamically change the backgound color of cell in DataTable?

[testforvln99]

I want to change the backgound color of cell in DataTable according to the changing value of the cell. I tried Theme component and Slot Cell but failed. How could I make it?

[EnzoVezzaro]

did you find a way to do this?

[theetrain]

Hello, it's possible to leverage :has to change the background-color of a Table cell. Note, this feature isn't yet available in Firefox (https://caniuse.com/css-has).

Demo: https://svelte.dev/repl/d5ad7e17e80c4637856e5026a656c0a6?version=3.55.1

<DataTable
  headers={headers}
  rows={rows}
>
	<svelte:fragment slot="cell" let:cell>
		{#if cell.value === 'HTTP'}
			<span class="highlight">{cell.value}</span>
		{:else}
			{cell.value}
		{/if}
	</svelte:fragment>
</DataTable>

<style>
	.highlight {
		background-color: yellow;
	}
        /* it's necessary to write the selector twice for Firefox */
	:global(.bx--data-table td):has(.highlight) {
		background-color: yellow;
	}
</style>