title: react-table Uncaught TypeError: columns.map is not a function
body: <p>I am writing the <a href="https://react-table.tanstack.com/docs/quick-start#final-result" rel="nofollow noreferrer">react-table getting started</a> with typescript, however I am getting an error on the data I am passing into my table function:</p>
  <pre><code>utils.js:15 Uncaught TypeError: columns.map is not a function
      at linkColumnStructure (utils.js:15:1)
      at useTable.js:150:1
      at mountMemo (react-dom.development.js:17057:1)
      at Object.useMemo (react-dom.development.js:17517:1)
      at Object.useMemo (react.development.js:1645:1)
      at useTable (useTable.js:149:1)
      at Table (App.tsx:9:1)
      at renderWithHooks (react-dom.development.js:16141:1)
      at mountIndeterminateComponent (react-dom.development.js:20838:1)
      at beginWork (react-dom.development.js:22342:1)
  </code></pre>
  <p>Being new to react/typescript pointers much appreciated on my App.tsx below, if I comment out the <code>Table</code> function the page loads, so I am doing something wrong with my types just not sure what.</p>
  <pre><code>import React from 'react';
  import { useTable } from 'react-table';
  import logo from './logo-main.svg';
  import './App.css';
  
  function Table(columns: any, data: any) : any
  {
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow
    } = useTable({ columns, data });
  
    // Render the UI for your table
    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;
    )
  }
  
  function App() {
  
    const data = React.useMemo(
      () =&gt; [
        {
          col1: 'Hello',
          col2: 'World',
        },
        {
          col1: 'react-table',
          col2: 'rocks',
        },
        {
          col1: 'whatever',
          col2: 'you want',
        },
      ],
      []
    )
  
    const columns = React.useMemo(
      () =&gt; [
        {
          Header: 'Column 1',
          accessor: 'col1', // accessor is the &quot;key&quot; in the data
        },
        {
          Header: 'Column 2',
          accessor: 'col2',
        },
      ],
      []
    )
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;header className=&quot;App-header&quot;&gt;
          &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
          &lt;p&gt;Edit &lt;code&gt;src/App.tsx&lt;/code&gt; and save to reload!!!&lt;/p&gt;
          &lt;a className=&quot;App-link&quot; href=&quot;https://reactjs.org&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Learn React today &lt;/a&gt;
          &lt;Table columns={columns} data={data} /&gt;
        &lt;/header&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>