const Cols = ({ width = null }) => {
  return (
    <col width={width}/>
  )
}

const Headers = ({ title = null, icon = null }) => {
  return (
    <th className={icon}>{title}</th>
  )
}

const GridViewHeader = ({ template }) => {
  return (
    <>
      <colgroup>{template.cols.map((item, key) => <Cols key={key} {...item} />)}</colgroup>
      <thead>
      <tr>{template.cols.map((item, key) => <Headers key={key} {...item} />)}</tr>
      </thead>
    </>
  )
}

export default GridViewHeader