es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Tabla React TypeScript “El tipo no es assignable”

25 Jul, 2023 Programación

He configurado mi proyecto de React con Typescript y React-Table.
Seguí la Guía de Inicio Rápido del sitio web de React-Table y obtuve un error.

 const data = React.useMemo(
   () => [
     {
       col1: 'Hola',
       col2: 'Mundo',
     },
     {
       col1: 'react-table',
       col2: 'es genial',
     },
     {
       col1: 'lo que',
       col2: 'quieras',
     },
   ],
   []
 )

const columns = React.useMemo(
    () => [
      {
        Header: 'Columna 1',
        accessor: 'col1', // el accessor es la "clave" en los datos
      },
      {
        Header: 'Columna 2',
        accessor: 'col2',
      },
    ],
    []
  )

Obtengo un error al hacer const tableInstance = useTable({ columns, data }).

El tipo ‘{ Header: string; accessor: string; }[]’ no se puede asignar al tipo “readonly Column<{ col1: string; col2: string; }>[]”.
El tipo ‘{ Header: string; accessor: string; }’ no se puede asignar al tipo ‘Column<{ col1: string; col2: string; }>’.

Apenas estoy comenzando con esto, así que realmente no sé qué está pasando.
Aquí hay un code sandbox con una recreación del problema: Sandbox

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El mensaje de error indica que la variable columns no es del tipo correcto para el gancho useTable de React-Table. Específicamente, el error indica que la variable columns es del tipo { Header: string; accessor: string; }[], pero debería ser del tipo readonly Column<{ col1: string; col2: string; }>[].

    Para solucionar el problema, la variable columns debe ser definida como un array de objetos Column en lugar de un array de objetos simples. Cada objeto Column debe tener una propiedad Header y accessor.

    Aquí está una implementación actualizada que soluciona el problema:

    import React from 'react';
import { useTable, Column } from 'react-table';

type Data = {
  col1: string;
  col2: string;
}

const App: React.FC = () => {
  const data: Data[] = React.useMemo(
    () => [
      {
        col1: 'Hola',
        col2: 'Mundo',
      },
      {
        col1: 'react-table',
        col2: 'es genial',
      },
      {
        col1: 'lo que',
        col2: 'quieras',
      },
    ],
    []
  )

  const columns: readonly Column<data>[] = React.useMemo(
    () => [
      {
        Header: 'Columna 1',
        accessor: 'col1',
      },
      {
        Header: 'Columna 2',
        accessor: 'col2',
      },
    ],
    []
  )

  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>
  )
}

export default App;

    En esta implementación actualizada, la variable columns se define como un array de objetos Column con los tipos correctos. El gancho useTable recibe este array columns con los tipos correctamente definidos, lo que resuelve el error.

Comments are closed.