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>
</>
);
}