Why does my react table say that columns are undefined?

Question

I'm trying to use react-table and it's throwing an error. It displays the following stack trace to the screen when I run it:

It seems to be trying to create a map from the columns but throwing an error because columns is undefined.

I am passing it my columns but maybe I'm not doing it properly.

Here is my code:

class Blog extends Component {
...
    createTable() {
        return this.state.blogPosts.length ? <Table posts={this.state.blogPosts} /> : null;
    }
...
    componentDidMount() {
...     
        axios.get('/blogs').then(response => {
            if (response.data) {
                const entries = Object.entries(response.data);
                this.setState({blogPosts: entries.map(p => Object.assign({id: p[0]}, {...p[1]}))
                    .sort((p1, p2) => p1.updatedAt > p2.updatedAt ? -1 : 1)});
            }
        }, err => {
            console.log('err=', err);
        });
    }
}

import React from 'react';
import {
    useTable,
    useGroupBy,
    useFilters,
    useSortBy,
    useExpanded,
    usePagination
} from 'react-table';

function Table(props) {
    const cols = React.useMemo(() => [
        {
            Header: 'title',
            accessor: 'titleCol'
        },
        {
            Header: 'body',
            accessor: 'bodyCol'
        },
        {
            Header: 'last updated',
            accessor: 'updatedAtCol'
        }
    ], []);

    const dataArray = [];

    for (var index = 0; index < props.posts.length; index++) {
        const post = props.posts[index];
        dataArray.push({
            titleCol: post.title,
            bodyCol: post.body,
            updatedAtCol: post.updatedAt
        });
    }

    const data = React.useMemo(() => dataArray, []);

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({ cols, data });

    return (
        <table {...getTableProps()}>
            <thead>
                {
                    headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {headerGroup.headers.map(col => (
                                <th {...col.getHeaderProps()}>{col.render('Header')}</th>
                            ))}
                        </tr>
                    ))
                }
            </thead>
            <tbody {...getTableBodyProps()}>
                {
                    rows.map(row => {
                        prepareRow(row)
                        return (
                            <tr {...row.getRowProps()}>
                                {
                                    row.cells.map(cell => {
                                        return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                                    })
                                }
                            </tr>
                        )
                    })
                }
            </tbody>
        </table>
    );
};

export default Table;

I'm following along in the react-table quickstart guide here: https://github.com/tannerlinsley/react-table/blob/master/docs/quickstart.md

Can anyone see what I'm doing wrong? Thanks.

Answer 1

You didn't pass columns to useTable(options). Do this instead

const {
   getTableProps,
   getTableBodyProps,
   headerGroups,
   rows,
   prepareRow,
} = useTable({ columns: cols, data });