react-super-responsive-table: Error: Element type is invalid
Dear all,
Representation of your work is great!
I’m trying to use your library, but without success, thats why I need a help from you…
I gett an error:
“Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.”.
I have applied all the suggested steps of installation and appling from your part.
Below is a part of my component’s code:
<Table {...getTableProps()} > <Thead> { headerGroups.map(headerGroup => ( <Tr {...headerGroup.getHeaderGroupProps()}> { // Gives us access to each column headerGroup.headers.map( column => ( <Th {...column.getHeaderProps(column.getSortByToggleProps())}> {column.render('Header')} <span> {column.isSorted ? (column.isSortedDesc ? ' ▼' : ' ▲') : ''} </span> </Th> )) } </Tr> )) } </Thead> <Tbody {...getTableBodyProps()}> { page.map(row => { prepareRow(row) return( <Tr {...row.getRowProps()}> { row.cells.map( cell=> { return <Td {...cell.getCellProps()}>{cell.render('Cell')}</Td> }) } </Tr> ) }) } </Tbody> </Table>
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 15 (2 by maintainers)
I had the same error a few days ago, I also wanted to use both libraries, react-table for its ease of creating tables and react-super-responsive-table for the ease it gives for the responsive of the table.
I solved it by leaving the TR out of the .map that is made to headerGroups, being as follows:
Before:
<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>After:
<Table {...getTableProps()}> <Thead> <Tr> {headerGroups.map((headerGroup) => 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>I hope it can work for you.