Dynamically change data-prefix of React-Table Header (Only works in Cell)

Question

I am trying to dynamically change the data-prefix of an icon from far to fas when a button is clicked. This will change the folder icon into a darken folder icon to show a process is running.

When the button is clicked I run this javascript:

document.getElementById("DownloadSelectedFolder").setAttribute("data-prefix","fas");

Here is the table and column:

        const {
          getTableProps,
          getTableBodyProps,
          headerGroups,
          page,
          nextPage,
          previousPage,
          canNextPage,
          canPreviousPage,
          pageOptions,
          gotoPage,
          pageCount,
          setPageSize,
          state,
          rows,
          rowIndex,
          prepareRow,
          selectedFlatRows,
          onChangeSelectedRowsId,
          toggleAllRowsSelected,
        } = useTable({
          columns,
          data: Documents,
          selectedRows : setSelectedRows,
          //Add this
          autoResetSelectedRows: false,
          autoResetSelectedCell: false,
          autoResetSelectedColumn: false,
        },
        useSortBy, 
        usePagination,
        useRowSelect,
        hooks => {
          hooks.visibleColumns.push(columns => [
            ...columns,
            {
              id: 'selection',
              Header: ({ getToggleAllRowsSelectedProps }) => (
                <div> 
                  
                <button 
                className="border rounded p-2 mb-2"
                onClick={() =>   mergePDFs(selectedFlatRows.map(row => row.original))}
                > 
                <i id="DownloadSelectedFolder" className="far fa-folder-open action mr-2" disabled></i>
                </button>
                <Checkbox {...getToggleAllRowsSelectedProps()} />
                </div>
              ),
              disableSortBy: true,
              Cell: ({ row }) => 
              <div>
              <Checkbox {...row.getToggleRowSelectedProps()} />
              <span  onClick={() => openDocument(row.id)}>
                <i id={row.id} className="far fa-folder-open action mr-2" disabled></i>
              </span>
            </div>

            }
          ])

This JavaScript code for the icon does work if I have the icon placed in the cell (rows). When it is placed in the header (column) it no longer works... I am not sure why this is the case. Any advice?

Answer 1

You could create a custom button component with useState to add/remove the prefix on the icon.

const DownloadButton = ({ onClick }) => {
  const [selected, setSelected] = useState(false);

  return (
    <button
      className="border rounded p-2 mb-2"
      onClick={onClick}> 
      <i className={`${selected ? 'fas' : 'far'} fa-folder-open action mr-2`} disabled />
    </button>
  )
}

<DownloadButton onClick={() => mergePDFs(selectedFlatRows.map(row => row.original))} />