# Table input row colour

**URL:** <https://talk.observablehq.com/t/table-input-row-colour/7681>\
**Category:** Help\
**Created:** [March 2, 2023, 9:59am UTC](https://talk.observablehq.com/t/table-input-row-colour/7681 "2023-03-02T09:59:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![fallenartist](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fallenartist/32/7501_2.png) [@fallenartist](https://talk.observablehq.com/u/fallenartist)\
**Post date:** [March 2, 2023, 9:59am UTC](https://talk.observablehq.com/t/table-input-row-colour/7681/1 "2023-03-02T09:59:03Z")

</div>

Hello, I’m trying to set row background colour depending on data category but having issues with passing on the data to a function. Can you help? Ta

```auto
viewof bilansx = Inputs.table(bilans, {
   format: { kategoria: bgcol(d => d.kategoria) }
})

```

```auto
function bgcol(col) {
  return x => htl.html`<div style="
    background: ${col.kategoria === "Wydatki" ? "#fde9d2" : "#a9e4f3"};
    float: left;
    width: 100%; 
    display: block;">${x}`
}

```

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [March 2, 2023, 10:17am UTC](https://talk.observablehq.com/t/table-input-row-colour/7681/2 "2023-03-02T10:17:27Z")

</div>

maybe try this instead:

```auto
viewof bilansx = Inputs.table(bilans, {
   format: { kategoria: (d) => bgcol(d.kategoria) }
})

```

---

<div class="post-metadata">

**Author:** ![fallenartist](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fallenartist/32/7501_2.png) [@fallenartist](https://talk.observablehq.com/u/fallenartist)\
**Post date:** [March 2, 2023, 10:46am UTC](https://talk.observablehq.com/t/table-input-row-colour/7681/3 "2023-03-02T10:46:22Z")

</div>

Thanks but it doesn’t seem to work: [Bilans utrzymania pracowni / Aleksander | Observable](https://observablehq.com/d/75523440e8191a7e)

Is data used in the table accessible in options as well? Functions [here](https://observablehq.com/@observablehq/input-table#cell-716) load the data again?

---

<div class="post-metadata">

**Author:** ![fallenartist](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fallenartist/32/7501_2.png) [@fallenartist](https://talk.observablehq.com/u/fallenartist)\
**Post date:** [March 2, 2023, 12:43pm UTC](https://talk.observablehq.com/t/table-input-row-colour/7681/4 "2023-03-02T12:43:01Z")

</div>

Strangely, I’m seeing the correct output in console but can’t get background to use colour hex string. Any ideas why?

```auto
format: {
    kategoria: d => bgcol(d)
  },

```

```auto
function bgcol(d) {
  const col = d === "Wydatki" ? "#fde9d2" : "#a9e4f3";
  console.log(col);
  return x => htl.html`<div style="
    background: ${col};
    float: left;
    width: 100%; 
    display: block;">${x}`
}

```

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 3, 2023, 12:22am UTC](https://talk.observablehq.com/t/table-input-row-colour/7681/5 "2023-03-03T00:22:35Z")

</div>

You don’t need `width: 100%` or `display: block` for a `div`, both are the defaults.

The “easiest” way to do this _within_ the Inputs.table options is to access the entire item from your format callback:

```auto
  format: (value, i, rows) => bgcol(rows[i].kategoria) // ...

```

And then apply that formatter to multiple rows.

I would probably take a mixed approach though that also injects some styles. Let me whip up an example …

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 3, 2023, 1:03am UTC](https://talk.observablehq.com/t/table-input-row-colour/7681/6 "2023-03-03T01:03:44Z")

</div>

The implementation turned out messier than i would have liked, but it works reasonably well. I’ve used a sequential color scale in this demonstration.

https://observablehq.com/embed/c6a878b457d1f69a@latest?cells=table

---

<div class="post-metadata">

**Author:** ![fallenartist](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fallenartist/32/7501_2.png) [@fallenartist](https://talk.observablehq.com/u/fallenartist)\
**Post date:** [March 3, 2023, 9:34am UTC](https://talk.observablehq.com/t/table-input-row-colour/7681/7 "2023-03-03T09:34:16Z")

</div>

Thank you. Well, something’s not right.

This: `kategoria: (value, i, rows) => bgcol(rows[i].kategoria)`

is the same as this: `kategoria: d => bgcol(d)`

Right? Both seem to pass correct data onto the function (“Wydatki” and “Wpływy” value).

However, the function fails and is returning the function itself to the cell.

But when I do `kategoria: bgcol("Wydatki")` then all is fine.

Why is this?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 3, 2023, 10:03am UTC](https://talk.observablehq.com/t/table-input-row-colour/7681/8 "2023-03-03T10:03:24Z")

</div>

> [@fallenartist](#):
>
> Why is this?

Right now your `bgcol()` returns a function which only uses the initial argument to `bgcol()`. Change it to the following and it will work:

```javascript
bgcol = d => htl.html`<div style="background: ${
  d === "Wydatki" ? oranges(0) : blues(0)
}">${d}`

```

---

<div class="post-metadata">

**Author:** ![fallenartist](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fallenartist/32/7501_2.png) [@fallenartist](https://talk.observablehq.com/u/fallenartist)\
**Post date:** [March 3, 2023, 3:16pm UTC](https://talk.observablehq.com/t/table-input-row-colour/7681/9 "2023-03-03T15:16:31Z")

</div>

It does work, thanks.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 4, 2023, 5:02pm UTC](https://talk.observablehq.com/t/table-input-row-colour/7681/10 "2023-03-04T17:02:06Z")

</div>

I’ve added an importable helper to the notebook:

```javascript
import {colorTable} from "@mootari/colored-table-rows"

```

```javascript
colorTable(colorData, {
  // Required: Specify the column that contains the color value.
  colorColumn: "rowColor",
  // Optionally specify a color opacity.
  colorOpacity: .3,
  // Any additional table options ...
})

```