Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

185
Visualizações
how to expand the datagrid with custom query - react-admin

I am using react-admin version 3.19.8

I find the way to use the Datagrid component with custom queries from Use the Datagrid component with custom queries - react-admin

It's work fine, but I would like to use expand to show more information instead of using edit in this example.

For example, I changed the rowClick to expand, but the expand button not showing anything. What should I do pass the data source to expand to make it work?

import React, { useState } from 'react';
import keyBy from 'lodash/keyBy'
import { useQuery, Datagrid, TextField, Pagination, Loading, ListContextProvider } from 'react-admin'

const ExpandList = ({ id, record, resource }) => (
    <TextField source="date" />
    <TextField source="status" />
);

export const CustomList = () => {
    const [page, setPage] = useState(1);
    const perPage = 50;
    const { data, total, loading, error } = useQuery({
        type: 'GET_LIST',
        resource: 'posts',
        payload: {
            pagination: { page, perPage },
            sort: { field: 'id', order: 'ASC' },
            filter: {},
        }
    });

    if (loading) {
        return <Loading />
    }
    if (error) {
        return <p>ERROR: {error}</p>
    }
    return (
        <ListContextProvider value={{
                data: keyBy(data, 'id'),
                ids: data.map(({ id }) => id),
                total,
                page,
                perPage,
                setPage,
                currentSort: { field: 'id', order: 'ASC' },
                basePath: "/posts",
                resource: 'posts',
                selectedIds: []
        }}>
            <Datagrid rowClick="expand" expand={<ExpandList />}>
                <TextField source="id" />
                <TextField source="name" />
            </Datagrid>
            <Pagination />
        </ListContextProvider >
    )
}
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda