title: How can I set the default state of a checkbox based on value in firestore in react table
body: <p>How can I set the default state of checkboxes based on values from firestore in React Table.
  Sorry if the question is a bit basic. I have read through the official docs and couldn't really make sense of how to do it, I've also looked at a good few other examples.</p>
  <p>I'm looking to check the value in a firestore document when the page loads, then set the default value of the checkbox. I also want the user to be able to check/uncheck it which will then update that field in the doc.</p>
  <p>I've looked at this <code>initialState.selectedRowIds: Object&lt;rowId: Boolean&gt;</code> in the docs
  but cant figure out how to get it to work or what else needs to be connected with it.</p>
  <p>Any help would be greatly appreciated.</p>
  <p><strong>Here is my implementation below.</strong></p>
  <pre><code>    import React from &quot;react&quot;;
  import {
    useTable,
    useFlexLayout,
    useFilters,
    useGlobalFilter,
    useRowSelect
  } from &quot;react-table&quot;;
  import _ from &quot;lodash&quot;;
  // noinspection ES6CheckImport
  import { useHistory } from &quot;react-router-dom&quot;;
  import Table from &quot;react-bootstrap/Table&quot;;
  
  // Define a default UI for filtering
  function GlobalFilter({
    preGlobalFilteredRows,
    globalFilter,
    setGlobalFilter
  }) {
    return (
      &lt;span&gt;
        &lt;input
          value={globalFilter || &quot;&quot;}
          onChange={e =&gt; {
            setGlobalFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
          }}
          placeholder={&quot; Search by any criteria&quot;}
          style={{
            fontSize: &quot;2.0rem&quot;,
            width: &quot;100%&quot;
          }}
        /&gt;
      &lt;/span&gt;
    );
  }
  
     
  export const RecordTable = ({ forms }) =&gt; {
    const data = forms;
    let history = useHistory();
  
    const columns = React.useMemo(
      () =&gt; [
        {
          Header: &quot;Disclaimer Form Records&quot;,
          columns: [
            {
              Header: &quot;Active&quot;,
              accessor: &quot;active&quot;,
              width: 75,
              maxWidth: 75,
              maxHeight: 50,
              Cell: ({ row, column }) =&gt; (
                &lt;div
                  style={{
                    fontSize: &quot;50px&quot;,
                    textAlign: &quot;center&quot;,
                    display: &quot;flex&quot;,
                    justifyContent: &quot;center&quot;,
                    alignItems: &quot;center&quot;,
                    width: &quot;100%&quot;,
                    height: &quot;100%&quot;
                  }}
                  onClick={event =&gt; {
                    event.stopPropagation();
                    console.log(&quot;div OnClick&quot;);
                  }}&gt;
                  &lt;input
                    type=&quot;checkbox&quot;
                    onClick={event =&gt; {
                      event.stopPropagation();
                      console.log(&quot;checkedIn Clicked: &quot;, column);
                    }}
                    {...row.getToggleRowSelectedProps}
                  /&gt;
                &lt;/div&gt;
              )
            },
            {
              Header: &quot;Time In&quot;,
              accessor: &quot;timeIn&quot;
            },
            {
              Header: &quot;Time Out&quot;,
              accessor: &quot;timeOut&quot;
            },
            {
              Header: &quot;€ Price&quot;,
              accessor: &quot;totalGroupPrice&quot;,
              disableFilters: true,
              disableSortBy: true
            },
            {
              Header: &quot;Shoebox&quot;,
              accessor: &quot;shoeboxNumber&quot;
            }
          ]
        }
      ],
      []
    );
  
    const defaultColumn = React.useMemo(
      () =&gt; ({
        //minWidth: 20,
        maxWidth: 150,
        width: 120
      }),
      []
    );
  
    const rowOnClick = (rowObject, column) =&gt; {
      history.push(&quot;/viewform&quot;, { ...rowObject.original });
    };
  
    // Use the state and functions returned from useTable to build your UI
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow,
      state,
      preGlobalFilteredRows,
      setGlobalFilter,
      setHiddenColumns
    } = useTable(
      {
        columns,
        data,
        defaultColumn,
      },
      useFilters,
      useGlobalFilter,
      useFlexLayout,
      useRowSelect
    );
  
    React.useEffect(() =&gt; {
      // for each column who's data is null, hide that column.
  
      let emptyColumns = [];
  
      _.forEach(data[0], function(value, key) {
        if (value === &quot;&quot;) emptyColumns.push(key);
      });
  
      emptyColumns.push(&quot;parentEmailAddress&quot;);
  
      setHiddenColumns(emptyColumns);
    }, [setHiddenColumns, columns]);
  
    // Render the UI for your table
    return (
      &lt;div&gt;
        &lt;div&gt;Records: {rows.length}&lt;/div&gt;
        &lt;GlobalFilter
          preGlobalFilteredRows={preGlobalFilteredRows}
          globalFilter={state.globalFilter}
          setGlobalFilter={setGlobalFilter}
        /&gt;
  
        &lt;div
          style={{
            height: 500,
            border: &quot;2px solid grey&quot;,
            borderRadius: &quot;5px&quot;,
            overflow: &quot;scroll&quot;
          }}&gt;
          &lt;Table striped bordered hover responsive={&quot;md&quot;} {...getTableProps()}&gt;
            &lt;thead&gt;
              {headerGroups.map(headerGroup =&gt; (
                &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                  {headerGroup.headers.map(column =&gt; (
                    &lt;th {...column.getHeaderProps()}&gt;
                      {column.render(&quot;Header&quot;)}
                    &lt;/th&gt;
                  ))}
                &lt;/tr&gt;
              ))}
            &lt;/thead&gt;
  
            &lt;tbody {...getTableBodyProps()}&gt;
              {rows.map((row, i) =&gt; {
                prepareRow(row);
                return (
                  &lt;tr
                    {...row.getRowProps({
                      onClick: () =&gt; rowOnClick(row)
                    })}&gt;
                    {row.cells.map(cell =&gt; {
                      return (
                        &lt;td {...cell.getCellProps()}&gt;{cell.render(&quot;Cell&quot;)}&lt;/td&gt;
                      );
                    })}
                  &lt;/tr&gt;
                );
              })}
            &lt;/tbody&gt;
          &lt;/Table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>