reactjs - Adding an HTML input control to a header in React-Table

Question

I am using React and React-Table version 7. It is working well for me, but I want to add a checkbox to my top-level header. So I tried it like this:

const columns = React.useMemo(
    () => [

        {
            Header: 'Monster Types <input type="checkbox" id="horns" name="horns">',
            columns: [
                {
                    Header: 'Possible Dungeons',
                    accessor: 'dungeonNames',
                    Cell: ({ row }) => <div>{row.original.dungeonNames.join(', ')}</div>,
                    Filter: TraineeSelectColumnFilter,
                    sortType: "basic",
                    filter: 'includes'
                },
                {
                    Header: 'Monsters',
                    accessor: 'monsterNames',
                ...

But when I do that, it just prints out the HTML and not the actual checkbox.

So it looks like this:

Monster Types<input type="checkbox" id="horns" name="horns">

Does anyone know of a way to add an HTML input beside a React-Table header?

Thanks!

question from:https://stackoverflow.com/questions/65902643/adding-an-html-input-control-to-a-header-in-react-table

Answer 1

For anyone who may find this, I found out how to do it. You put the HTML in the Header section, and then add an id, like this:

  Header: () => (<div>Monster Types <input type="checkbox" id="horns" name="horns"></div>),
  id: 'monsterTypesDiv',