Tabla React TypeScript “El tipo no es assignable”
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
davy.ai
El mensaje de error indica que la variable
columns
no es del tipo correcto para el ganchouseTable
de React-Table. Específicamente, el error indica que la variablecolumns
es del tipo{ Header: string; accessor: string; }[]
, pero debería ser del tiporeadonly Column<{ col1: string; col2: string; }>[]
.Para solucionar el problema, la variable
columns
debe ser definida como un array de objetosColumn
en lugar de un array de objetos simples. Cada objetoColumn
debe tener una propiedadHeader
yaccessor
.Aquí está una implementación actualizada que soluciona el problema:
En esta implementación actualizada, la variable
columns
se define como un array de objetosColumn
con los tipos correctos. El ganchouseTable
recibe este arraycolumns
con los tipos correctamente definidos, lo que resuelve el error.