2

I am trying to use React-Tables to make a table of object properties...

Running React 17.0.2, React-Table 7.7.0

I get the following error which I have identified to be a type error but have no idea how to go about fixing

TS2345: Argument of type 
'{ tableCols: { Header: string; accessor: string; }[]; tdata: Dataset[]; }' 
is not assignable to parameter of type 'TableOptions<{}>'.
Object literal may only specify known properties, 
and 'tableCols' does not exist in type 'TableOptions<{}>'

.

The object looks somewhat like this

interface Dataset {
  name: string;
  time_added: string;
  image_width: number;
  image_height: number;
  minimum_frame: number;
  maximum_frame: number;
}

Starting the function component

interface DatasetListProps {}

const DatasetList = (_props: DatasetListProps) => {

I created a dummy data for now and am using that to fill the array

  const dummy: Dataset = {
    name: '',
    time_added: '',
    image_width: 0,
    image_height: 0,
    minimum_frame: 0,
    maximum_frame: 0,
  }

I am just trying to get the first 2 columns to show up for now.

  const tableCols = useMemo(() => [{
      Header: 'Name',
      accessor: 'name',
    },
    {
      Header: 'Time',
      accessor: 'time_added',
    },
  ], []);

Dummy data list creation

  const tdata = useMemo(() => [dummy, dummy], []);

Creating the actual dang table

  const tableInstance = useTable({ tableCols, tdata })
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = tableinstance

Then the big return statement with the table html (taken directly from docs

return ( 
  <table {...getTableProps()}>
    <thead>
      {// Loop over the header rows
      headerGroups.map(headerGroup => (
        // Apply the header row props
        <tr {...headerGroup.getHeaderGroupProps()}>
          {// Loop over the headers in each row
          headerGroup.headers.map(column => (
            // Apply the header cell props
            <th {...column.getHeaderProps()}>
              {// Render the header
              column.render('Header')}
            </th>
          ))}
        </tr>
      ))}
    </thead>
    {/* Apply the table body props */}
    <tbody {...getTableBodyProps()}>
      {// Loop over the table rows
      rows.map(row => {
        // Prepare the row for display
        prepareRow(row)
        return (
          // Apply the row props
          <tr {...row.getRowProps()}>
            {// Loop over the rows cells
            row.cells.map(cell => {
              // Apply the cell props
              return (
                <td {...cell.getCellProps()}>
                  {// Render the cell contents
                  cell.render('Cell')}
                </td>
              )
            })}
          </tr>
        )
      })}
    </tbody>
  </table>
  )

}

End of function component

2
  • Hey @Rr9! Did you solve it? I am also wondering how to pass more data than the number of columns I have. For example I have logo and the name in data, and I want to show them both in the Name column (I don't need extra column for logo), but react-table complains with a same error as you got in your case Commented Jan 28, 2022 at 23:04
  • I couldn't fix it. For now i moved on by just mapping things to a HTML table and creating a jank substring search to look though the first row. I may revisit after backlog is a little better. Commented Jan 31, 2022 at 22:11

2 Answers 2

1

As a solution renaming file from .tsx to .jsx worked for me. I found this in react-table open issues, looks like it won't work properly without hacks until they rewrite the library into typescript in further releases.

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

Comments

0

You have initialized your table instance incorrectly. It should be like

const tableInstance = useTable({ columns: tableCols, data: tdata })

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.