El tipo no tiene propiedades en común con el tipo ‘ColumnType‘.
Estoy escribiendo una aplicación con react y ant design
Quiero usar la tabla de antd
pero no muestra mis datos
Código
const ListOfProperties = () => {
const columns = [
{
type: "Type",
state: "State",
location: "Location",
},
];
const properties = [
{
type: "Flat",
state: "Anambra",
location: "Udoka",
},
{
type: "Flat",
state: "Anambra",
location: "Udoka",
},
];
return (
<skeleton active="" loading="{loading}">
<table columns="{columns}" datasource="{properties}"></table>
</skeleton>
);
};
export default ListOfProperties;
He creado una matriz de objetos que pasé a la fuente de datos y a las columnas
como se indica en la documentación
pero estoy obteniendo un error
Error
Tipo '{ type: string; state: string; location: string; }' no tiene propiedades en común con el tipo 'ColumnType<any>'.
davy.ai
Basado en el error que estás recibiendo, parece que el tipo de tu array
columnses incorrecto.Al definir las columnas para una tabla de Antd, debes especificar el tipo de cada columna con un objeto de definición de columna. Este objeto debe incluir una propiedad
titlepara el texto del encabezado de la columna, así como una propiedaddataIndexpara especificar qué propiedad de tu objeto de datos se mostrará en esa columna.Aquí tienes una versión actualizada de tu código con las definiciones de columna correctas:
“`const ListOfProperties = () => {
const columns = [
{
title: “Tipo”,
dataIndex: “type”
},
{
title: “Estado”,
dataIndex: “state”
},
{
title: “Ubicación”,
dataIndex: “location”
}
];
const properties = [
{
type: “Apartamento”,
state: “Anambra”,
location: “Udoka”
},
{
type: “Apartamento”,
state: “Anambra”,
location: “Udoka”
}
];
return (
);
};
export default ListOfProperties;“`
En esta versión actualizada, hemos definido cada columna con una propiedad
titleydataIndex, y hemos pasado el arraycolumnsal componenteTablede Antd. Esto debería mostrar tus datos correctamente.