Repository: h2oai/wave
File: ui/src/stat_table.tsx (TypeScript)

Code before:
      padding: '0.2em 0.5em 0em 0.1em',
    },
    clickable: {
      cursor: 'pointer',
      $nest: {
        '&:hover': {
          backgroundColor: cssVar('$themeLighter'),
          color: cssVar('$themeDarker')
        }
      },
    },
  })

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    const
      render = () => {
        const
          { name: tableName, title, columns, subtitle, items } = state,
          header = columns.map((label, i) => (
            <th key={`${i}:${label}`}>{label}</th>
          )),
          rows = items.map(({ name: rowName, label, values, caption, icon, icon_color, value_colors: colors }, i) => {
            const
              onClick = rowName ? () => jump(tableName, rowName) : undefined,
              cells = values.map((value, j) => (<td key={`${j}:${value}`} style={colors && colors[j] ? { color: colors[j] } : undefined }>{value}</td>))

            return (
              <tr key={rowName ?? `${i}:${label}`} className={onClick ? css.clickable : undefined} onClick={onClick}>
                <th key='label'>
                  <div className={css.header}>
                    {icon && <div className={css.icon} style={icon_color ? { color: cssVar(icon_color) } : undefined}>
                      <FontIcon iconName={icon} />
                    </div>}
                    <div>
                      <div className='wave-w6'>{label}</div>
                      {caption && <div className={clas(css.caption, 'wave-s12 wave-w4')}>{caption}</div>}
                    </div>
                  </div>
                </th>
                {cells}
              </tr>
            )
          })

        return (
          <div data-test={name} className={css.card}>
            <div className='wave-s12 wave-w6'>{title}</div>
            {subtitle && <div className='wave-s12'>{subtitle}</div>}
            <div className={css.items}>
              <table className={clas(css.table, 'wave-s13')}>

Review comment (suggestion):
[Spectrum colors](https://github.com/h2oai/wave/blob/master/ui/src/index.scss#L63-L81) should be supported as well. Please check if these work:

* spectrum colors
* regular CSS colors - hex / RGB / browser colors - red/blue/green

```suggestion
              cells = values.map((value, j) => <td key={`${j}:${value}`} style={colors && colors[j] ? { color: cssVar(colors[j]) } : undefined }>{value}</td>)
```

Code after:
      padding: '0.2em 0.5em 0em 0.1em',
    },
    clickable: {
      cursor: 'pointer',
      $nest: {
        '&:hover': {
          backgroundColor: cssVar('$themeLighter'),
          color: cssVar('$themeDarker')
        }
      },
    },
  })

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    const
      render = () => {
        const
          { name: tableName, title, columns, subtitle, items } = state,
          header = columns.map((label, i) => (
            <th key={`${i}:${label}`}>{label}</th>
          )),
          rows = items.map(({ name: rowName, label, values, caption, icon, icon_color, colors }, i) => {
            const
              onClick = rowName ? () => jump(tableName, rowName) : undefined,
              cells = values.map((value, j) => (<td key={`${j}:${value}`} style={colors && colors[j] ? { color: cssVar(colors[j]) } : undefined }>{value}</td>))

            return (
              <tr key={rowName ?? `${i}:${label}`} className={onClick ? css.clickable : undefined} onClick={onClick}>
                <th key='label'>
                  <div className={css.header}>
                    {icon && <div className={css.icon} style={icon_color ? { color: cssVar(icon_color) } : undefined}>
                      <FontIcon iconName={icon} />
                    </div>}
                    <div>
                      <div className='wave-w6'>{label}</div>
                      {caption && <div className={clas(css.caption, 'wave-s12 wave-w4')}>{caption}</div>}
                    </div>
                  </div>
                </th>
                {cells}
              </tr>
            )
          })

        return (
          <div data-test={name} className={css.card}>
            <div className='wave-s12 wave-w6'>{title}</div>
            {subtitle && <div className='wave-s12'>{subtitle}</div>}
            <div className={css.items}>
              <table className={clas(css.table, 'wave-s13')}>