<script>
export default {
  name: 'ElDataTableColumnHeader',
  functional: true,
  props: {
    column: { type: Object, required: true }
  },

  render(createElement, { props }) {
    if (props.column.labelTemplate) {
      return props.column.labelTemplate();
    }

    const moneyIndicator = '<br><span class="u-text--muted">$</span>';

    const elementData = {
      domProps: {
        innerHTML: props.column.label + (props.column.dataType === 'money' ? moneyIndicator : '')
      }
    };

    return createElement('span', elementData);
  }
};
</script>
