React 16.8.6 + react data table error TypeError: Object(...) is not a function

Question

I`m trying to use the Basic table example from React Table, however when I run the application, the Server page where the table needs to be loaded thrown an error TypeError: Object(...) is not a function

Top level function where I import the <Table/>

import React from "react";
import { Table } from "../Components/Table/table.component"

export const Servers = () => {

return(
  <Table/>
   )
 }

Table component

import React, {useTable, useMemo} from 'react'
import django_data from '../../django_data.json'
import { COLUMNS }   from "./../../colums";



export const Table = () => {

  const columns = useMemo(() => COLUMNS, [])
  const data = useMemo(() => django_data, [])

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

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.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>
  )
}

Columns data

export  const COLUMNS =  [
{
  Header: 'Server Name',
  assesor: 'name',
},
{
  Header: 'OS Version',
  assesor: 'os_release',
},

{
  Header: 'Kernel Version',
  assesor: 'kernel_version',
  
},

{
  Header: 'Minion Status',
  assesor: 'minion_status',
  
},
]

django_data.json

[
{
    "id":"CEB4FD81E47A01F6AF51E4115B9A6514",
    "url": "http://example.com/api/v1/servers/9689/",
    "name": "example",
    "fqdn": "example.com",
    "os_type": "Linux",
    "status": "In Service",
    "os_release": "Suse 11.4",
    "uptime": "4d:13h:31m:56s",
    "kernel_version": "3.0.101-108.117-default",
    "target_kernel_version": null,
    "minion_status": "Up",      
},

Error trace which is shown in the page.

     9 | const columns = useMemo(() => COLUMNS, [])
    10 | const data = useMemo(() => django_data, [])
    11 | 
  > 12 | const tableInstance = useTable({
    13 |   columns,
    14 |   data
    15 | })

What is useTable? I don't think it is a thing in react package. — Yury Tarabanko
– Yury Tarabanko, Commented Nov 27, 2020 at 15:37
Hi, thanks for the answer, obviously after all of the looking, I didn`t saw the most obvious... Anyway, now it is wokring, but the only displayed data is the Headers. Nothing from django_data.json. Could you please advice why this could be? — Ivaylo Atanasov
– Ivaylo Atanasov, Commented Nov 27, 2020 at 16:45

Noah Kanyo · Accepted Answer · 2020-11-27 16:41:03Z

1

Change -> import React, {~~useTable~~, useMemo} from 'react'

To -> import { useTable } from 'react-table'

answered Nov 27, 2020 at 16:41

Noah Kanyo

5501 gold badge4 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ivaylo Atanasov Over a year ago

Yes, thanks for the answer, but as I wrote on the post above, after the correct import, the only data that is rendered is Headers, nothing from django_data.json.

Noah Kanyo Over a year ago

Looks like the django_data.json file is missing a closing square bracket.

Ivaylo Atanasov Over a year ago

nope, this is just the first element of the data, I also though it might be issue with file, so I change it to .js and export the data as const then import it with { django_data } also add styles, and now I have empty grid with headers

Noah Kanyo Over a year ago

Maybe you need the columns array property like in the example.

Noah Kanyo Over a year ago

Maybe you need to convert your json object into a javascript object. The example seems to be using a javascript object vs your example provided uses a json object.

Collectives™ on Stack Overflow

React 16.8.6 + react data table error TypeError: Object(...) is not a function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related