# Conditionally format entire rows in Inputs.Table

**URL:** <https://talk.observablehq.com/t/conditionally-format-entire-rows-in-inputs-table/8166>\
**Category:** Help\
**Created:** [August 9, 2023, 8:57pm UTC](https://talk.observablehq.com/t/conditionally-format-entire-rows-in-inputs-table/8166 "2023-08-09T20:57:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![maumax](https://avatars.discourse-cdn.com/v4/letter/m/bbe5ce/32.png) [@maumax](https://talk.observablehq.com/u/maumax)\
**Post date:** [August 9, 2023, 8:57pm UTC](https://talk.observablehq.com/t/conditionally-format-entire-rows-in-inputs-table/8166/1 "2023-08-09T20:57:08Z")

</div>

Hi there,

I am an R user that is learning Observable. I would like to have a table with some entire rows formatted (e.g., with a background color) based on the values of a single cell. I could not find or did not understand how to set any existing property of the Table widget to fill an entire row with a background color (something similar to formatStyle() in R DT).

I tried changing the values in the array of objects by injecting some HTML, but it did not work. The html code is not rendered. Any help would be very appreciated.

This is the code I used (dataframe penguins)

```auto
function changeValueinHtml(value){
  const val = htl.html`<div style='background: #fde9d2; float: left; width: 100%; display: block;'>${value}</div>`
  return val
}

function createNewArray(arToFormat){
  let newArray = [];
    arToFormat.map((val)=>{
      if (val['culmen_length_mm']>40){
        const valNew = {"species": changeValueinHtml(val["species"]),
                     "culmen_length_mm": changeValueinHtml(val["culmen_length_mm"])}
              newArray.push(valNew) 
      } else {
          const valNew = {"species": htl.html`<div>${val["species"]}</div>`,
                     "culmen_length_mm": htl.html`<div>${val["culmen_length_mm"]}</div>`}
              newArray.push(valNew) 
      }
  })
  return newArray
}

penguisFormatted = createNewArray(penguins)

Inputs.table(penguisFormatted, {})

```

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [August 9, 2023, 11:24pm UTC](https://talk.observablehq.com/t/conditionally-format-entire-rows-in-inputs-table/8166/2 "2023-08-09T23:24:28Z")

</div>

`Inputs.table` accepts a `format` option, as most `Inputs` do. Here’s an example that gets pretty close to what you want:

```
td_format = (d, i, data) =>
  data[i].culmen_length_mm > 40
    ? htl.html`<div style="background-color: lightblue;">${d}</div>`
    : htl.html`<div style="background-color: white;">${d}</div>`

```

Note that the arguments are

- `d`: The current value (like 42.1 for culmen\_length\_mm),
- `i`: the index of the data, and
- `data`: the entire array of data.

Using this `format` function, you can format all the _items_ in a row as follows:

```
Inputs.table(penguins, {
  format: {
    culmen_length_mm: td_format,
    culmen_depth_mm: td_format,
    species: td_format,
    island: td_format,
    flipper_length_mm: td_format,
    body_mass_g: td_format,
    sex: td_format
  }
})

```

There’s probably a shorter way to specify all the columns rather than doing explicitly for each like that. 😕

Unfortunately, that doesn’t get the whole row, just the individual data cells. It still looks pretty close, though:

https://observablehq.com/embed/f44f965feabdd790@47?cells=table

---

<div class="post-metadata">

**Author:** ![maumax](https://avatars.discourse-cdn.com/v4/letter/m/bbe5ce/32.png) [@maumax](https://talk.observablehq.com/u/maumax)\
**Post date:** [August 10, 2023, 12:49pm UTC](https://talk.observablehq.com/t/conditionally-format-entire-rows-in-inputs-table/8166/3 "2023-08-10T12:49:31Z")

</div>

Thank you so much.

---

<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:** [August 10, 2023, 1:22pm UTC](https://talk.observablehq.com/t/conditionally-format-entire-rows-in-inputs-table/8166/4 "2023-08-10T13:22:10Z")

</div>

> [@maumax](#):
>
> I would like to have a table with some entire rows formatted (e.g., with a background color) based on the values of a single cell.

Here’s a wrapper around Inputs.table that lets you do that:

> **[Inputs.table() with Colored Rows](https://observablehq.com/@mootari/colored-table-rows)**
>
> A wrapper around the Table Input that adds row colors. To highlight only selected rows, see Highlight Table Rows. Example Implementation

---

<div class="post-metadata">

**Author:** ![maumax](https://avatars.discourse-cdn.com/v4/letter/m/bbe5ce/32.png) [@maumax](https://talk.observablehq.com/u/maumax)\
**Post date:** [August 10, 2023, 2:04pm UTC](https://talk.observablehq.com/t/conditionally-format-entire-rows-in-inputs-table/8166/5 "2023-08-10T14:04:14Z")

</div>

Wow, this is awesome. Thank you so much.