Combo box table with header row

A combo box table whose options are laid out in a table, and the table has a header row displaying the column names.

import { useState } from 'react';
import {
  ComboBoxTable,
  useTokenSearch,
  TokenHighlight,
  layoutMaxWidth,
  layoutMaxHeight,
  layoutColumnsAlignLeft,
} from '@citizensadvice/react-combo-boxes';
import cats from '../../data/cats.json';

const columns = ['breed', 'country', 'origin', 'coatLength', 'pattern'];

function mapOption({ breed, bodyType }) {
  return { label: breed, group: bodyType };
}

function index({ breed }) {
  return breed;
}

function renderValue({ children }, { search, column: { name } }) {
  if (name === 'breed') {
    return (
      <TokenHighlight
        search={search}
        value={children}
      />
    );
  }
  return children;
}

const onLayoutListBox = [
  layoutMaxWidth,
  layoutMaxHeight,
  layoutColumnsAlignLeft,
];

export function Example() {
  const [value, setValue] = useState(null);
  const [search, setSearch] = useState(null);
  const filteredOptions = useTokenSearch(search, { options: cats, index });

  return (
    <>
      <label
        id="select-label"
        htmlFor="select"
      >
        Select
      </label>
      <ComboBoxTable
        id="select"
        aria-labelledby="select-label"
        value={value}
        onValue={setValue}
        onSearch={setSearch}
        options={filteredOptions}
        columns={columns}
        renderColumnValue={renderValue}
        mapOption={mapOption}
        onLayoutListBox={onLayoutListBox}
      />

      <label htmlFor="output">Current value</label>
      <output
        htmlFor="select"
        id="output"
      >
        {JSON.stringify(value, undefined, ' ')}
      </output>
    </>
  );
}