title: Using API data to create React Table in React.js
body: <p>I have seen some examples of creating react tables using API data before but no one used the header(key) from API data to set headers in react table. Please someone help me to do this.</p>
  <p>In my code, I have extracted headers from API data in an array. Then I need to pass that values in columns as Headers and accessor values. But I don't understand how to do that.</p>
  <p>Here's the API = <a href="https://reqres.in/api/users?page=1" rel="nofollow noreferrer">https://reqres.in/api/users?page=1</a></p>
  <p>I am fetching data from this Axios API in a hook :</p>
  <pre><code>import axios from 'axios';
  let userRole;
  const [userData, setUserData] = useState({});
  
  useEffect(()=&gt;{
  
    axios.get(`https://reqres.in/api/users?page=1`)
    .then(res =&gt; {
        userRole = res.data.data;
        console.log(&quot;Data from API&quot;,userRole);
        userRole.sort((a,b) =&gt; a.first_name.localeCompare(b.first_name) )
        setUserData(userRole);
    });
  
  }, []);
  
  //console.log(userData);
  </code></pre>
  <p>API Data from UserRole looks like this :
  <a href="https://i.stack.imgur.com/elh7B.png" rel="nofollow noreferrer">enter image description here</a></p>
  <pre><code>let headerList = [];
  function BasicTableComponent() {
  
            //console.log(&quot;Full data in array&quot;,userData)
  
            // EXTRACT VALUE FOR HTML HEADER. 
          for (var i = 0; i &lt; userData.length; i++) {
              for (var key in userData[i]) {
                  if (headerList.indexOf(key) === -1) {
                      headerList.push(key);
                  }
              }
          }
  
          console.log(&quot;Column Header List check&quot;,headerList);
  
  /*Now instead of this hardcoded method I want to pass values 
  from my headerList for Header and accessor in my columns.*/
  
           const columns = React.useMemo(
              () =&gt; [
                {
                  Header: 'Column 1',
                  accessor: 'col1', // accessor is the &quot;key&quot; in the data
                },
                {
                  Header: 'Column 2',
                  accessor: 'col2',
                },
              ],
              []
            )
  
          //console.log(&quot;Column Header&quot;,columns)
  
          const {
              getTableProps,
              getTableBodyProps,
              headerGroups,
              rows,
              prepareRow,
            } = useTable({ columns, userData })
  
      return (
  
          &lt;table {...getTableProps()} style={{ border: 'solid 1px blue' }}&gt;
          &lt;thead&gt;
           {headerGroups.map(headerGroup =&gt; (
             &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
               {headerGroup.headers.map(column =&gt; (
                 &lt;th
                   {...column.getHeaderProps()}
                   style={{
                     borderBottom: 'solid 3px red',
                     background: 'aliceblue',
                     color: 'black',
                     fontWeight: 'bold',
                   }}
                 &gt;
                   {column.render('Header')}
                 &lt;/th&gt;
               ))}
             &lt;/tr&gt;
           ))}
         &lt;/thead&gt;
         &lt;tbody {...getTableBodyProps()}&gt;
           {rows.map(row =&gt; {
             prepareRow(row)
             return (
               &lt;tr {...row.getRowProps()}&gt;
                 {row.cells.map(cell =&gt; {
                   return (
                     &lt;td
                       {...cell.getCellProps()}
                       style={{
                         padding: '10px',
                         border: 'solid 1px gray',
                         background: 'papayawhip',
                       }}
                     &gt;
                       {cell.render('Cell')}
                     &lt;/td&gt;
                   )
                 })}
               &lt;/tr&gt;
             )
           })}
         &lt;/tbody&gt;
       &lt;/table&gt;
      )
  }
  
  </code></pre>