JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>43</td>
            <td>12</td>
        </tr>
        <tr>
            <td>0</td>
            <td>23</td>
        </tr>
        <tr>
            <td>78</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

JavaScript

const config_1 = {
  columns: [
    {
      id: "foo",
      style: function () {
        if (this.data.includes(0)) {
          return {
            inline: false,
            borderWidth: "1px",
            borderColor: "red",
          }
        }
      },
      cells: {
        style: function () {
          if (this.value == 0) {
            return {
              inline: true,
              backgroundColor: "red",
              fontWeight: "bold",
            }
          }
        },
      },
      header: {
        style: {
          color: "red",
        },
      },
      row: {
        style: function () {
          if (this.data.some(value => value > 50)) {
            return {
              inline: false,
              backgroundColor: "green",
            }
          }
        },
      },
    },
  ],
}

/* 
Will render the same as above, with one less if in columns
and example usage of columnDefaults
*/
const config_2 = {
  columnDefaults: {
    header: {
      style: function () {
        if (this.id == "foo") {
          return {
            color: "red",
          }
        }
      },
    },
  },
  columns: [
    {
      id: "foo",
      style: function () {
        if (this.data.includes(0)) {
          return {
            column: {
              inline: false,
              borderWidth: "1px",
              borderColor: "red",
            },
            cells: {
              inline: true,
              backgroundColor: "red",
              fontWeight: "bold",
            },
          }
        }
      },
      row: {
        style: function () {
          if (this.data.some(value => value > 50)) {
            return {
              inline: false,
              backgroundColor: "green",
            }
          }
        },
      },
    },
  ],
}