title: Change column header name dynamically in React Table
body: <p>I am using React Table in my dashboard project. I want to change the React Table column header name on every tab click. I am passing the name state as props in React table, but the Header text is not changing as per the props. Is this possible to change Column header inside it ?</p>
  <p>Below is the code of react table component in which the tabName is the state that i am passing as props, which is not changing.</p>
  <pre><code>const BreakdownTable = ({ tabName }) =&gt; {
    // console.log(tabName);
    const data = React.useMemo(
      () =&gt; [
        {
          col1: &quot;com.gumlet.limited-videoPlay&quot;,
          col2: &quot;100&quot;,
          col3: &quot;1.3k&quot;,
        },
      ],
      []
    );
  
    const columns = React.useMemo(
      () =&gt; [
        {
          Header: tabName,
          accessor: &quot;col1&quot;,
        },
        {
          Header: &quot;Unique Views&quot;,
          accessor: &quot;col2&quot;,
        },
        {
          Header: &quot;Total Views&quot;,
          accessor: &quot;col3&quot;,
        },
      ],
      []
    );
  
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      // rows,
      prepareRow,
      page,
      canPreviousPage,
      canNextPage,
      pageOptions,
      // pageCount,
      gotoPage,
      nextPage,
      // previousPage,
      setPageSize,
      pageSize,
      state,
      setGlobalFilter,
    } = useTable(
      {
        columns,
        data,
        initialState: { pageSize: 15 },
      },
      useGlobalFilter,
      useSortBy,
      usePagination
    );
  
    const { globalFilter } = state;
  
  </code></pre>