No way to customize TableRow

[mkf-simpson]

When I use DataTable, I would like to have a way to add some custom CSS to rows depending on a row's value. It seems there is no anything how I could customize rows.

[metonym]

A data-row attribute is set on each row; the value is the row.id. You could then use CSS to target specific rows.

[data-row="a"] {
  color: red;
}

Would that work for your use case?

[mkf-simpson]

It works only depending on row.id, but my case requires applying styles depending on other values in a row. For example, I have row: {id: string, name: string, value: number}. I want to change the background for those rows whose value is less than 0.

[metonym]

You could compute the row IDs that contain a certain value and use those IDs to style the corresponding rows.

In the following example:

1. Get row IDs with rows with a port value of 80
2. Create a CSS selector that matches [data-row="<id>"]
3. Inject the styles in svelte:head, which are applied globally

Svelte REPL

<script>
  import { DataTable } from "carbon-components-svelte";

  const rows = Array.from({ length: 6 }).map((_, i) => ({
    id: i,
    name: "Load Balancer " + (i + 1),
    protocol: "HTTP",
    port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
    rule: i % 3 ? "Round robin" : "DNS delegation",
  }));

  const rowsWithPort80 = rows
    .filter((row) => row.port === 80)
    .map((row) => row.id);

  const selectors = rowsWithPort80.map((id) => `[data-row="${id}"]`).join(",");

  const styles = `
    <style>
      ${selectors} {
        outline: 2px solid blue;
      }
    <\/style>
  `;
</script>

<svelte:head>
  {@html styles}
</svelte:head>

<DataTable
  headers={[
    { key: "name", value: "Name" },
    { key: "protocol", value: "Protocol" },
    { key: "port", value: "Port" },
    { key: "rule", value: "Rule" },
  ]}
  {rows}
/>

[mkf-simpson]

It works! Thank you! I never thought of managing styles this way. 🤔

By the way, this code surprisingly does not work with Svelte Kit because you cannot write the <style> tag in a string. So the code should be:

// ¯\_(ツ)_/¯
const styles = "<sty" + `le>
      ${selectors} {
        outline: 2px solid blue;
      }
    <\/st` + "yle>";