Color rows based on cell value

[manasigr]

Is there a way to customize back ground color for rows based on data in a cell? I need the color of the row to be red for rule: "Round Robin" and green if rule:"DNS Delegation" Example:

<script>
    import { DataTable, Pagination } from "carbon-components-svelte";
  
    let rows = Array.from({ length: 10 }).map((_, i) => ({
      id: i,
      name: "Load Balancer " + (i + 1),
      protocol: "HTTP",
      port: 3000 + i * 10,
      rule: i % 2 ? "Round robin" : "DNS delegation",
    }));
    let pageSize = 5;
    let page = 1;
  </script>
  
  <DataTable
    sortable
    title="Load balancers"
    description="Your organization's active load balancers."
    headers={[
      { key: "name", value: "Name" },
      { key: "protocol", value: "Protocol" },
      { key: "port", value: "Port" },
      { key: "rule", value: "Rule" },
    ]}
    {pageSize}
    {page}
    {rows}
  />
  <Pagination
    bind:pageSize
    bind:page
    totalItems={rows.length}
    pageSizeInputDisabled
  />
  <style>
    :global(.round-robin) {
        background-color: red;
    }
    :global(.dns-delegation) {
        background-color: green;
    }
  </style>

[manasigr]

<script>
    import { DataTable, Pagination } from "carbon-components-svelte";
    import { CellTower, LogicalPartition } from "carbon-icons-svelte";
    import { onMount } from "svelte";

    let rows = Array.from({ length: 10 }).map((_, i) => ({
        id: i,
        name: "Load Balancer " + (i + 1),
        protocol: "HTTP",
        port: 3000 + i * 10,
        rule: i % 2 ? "Round robin" : "DNS delegation",
    }));
    let pageSize = 5;
    let page = 1;
    const rr = rows
        .filter((row) => row.rule === "Round robin")
        .map((row) => row.id);
    const dns = rows
        .filter((row) => row.rule === "DNS delegation")
        .map((row) => row.id);
    let rule1 = rr.map((id) => `[data-row="${id}"]`).join(",");
    let rule2 = dns.map((id) => `[data-row="${id}"]`).join(",");
    const styles = `
    <style>
      ${rule1} {
        --cds-layer: red;
      }
      ${rule2} {
        --cds-layer: green;
      }
    <\/style>
  `;
</script>

<svelte:head>
    {@html styles}
</svelte:head>
<DataTable
    id="events-table"
    sortable
    title="Load balancers"
    description="Your organization's active load balancers."
    headers={[
        { key: "name", value: "Name" },
        { key: "protocol", value: "Protocol" },
        { key: "port", value: "Port" },
        { key: "rule", value: "Rule" },
    ]}
    {pageSize}
    {page}
    {rows}
></DataTable>

<Pagination
    bind:pageSize
    bind:page
    totalItems={rows.length}
    pageSizeInputDisabled
/>

[metonym]

Check out the docs on slotted cells: https://svelte.carbondesignsystem.com/components/DataTable#slotted-cells

Related discussion: #1756