Link as DataTable Column

UI Components for React
Post Reply
paternostrox
Posts: 2
Joined: 07 Nov 2022, 23:06

07 Nov 2022, 23:34

Related: viewtopic.php?t=52118

So I have a DataTable and one specific column must have links to one or more documents.

The data structure I'm working on has the following form.
'processos' is the array that should be mapped to links (with text being 'numero', redirecting to 'link').

Code: Select all

if (!_.isEmpty(dados)) {
        dados.map((item) => {

            registros.push({
                concedente: item.nomeUnidadeGestora,
                tipoConcessao: item.nome,
                edital: item.numeroAnoEdital,
                processos: item.processos.map((processo) => {
                    return {
                        numero: processo.numeroCompletoProcesso,
                        link: processo.linkProcesso
                    }
                }),
                servico: item.subfuncoesGovernos[0],
                vigencia: item.vigencia,
                situacao: item.situacao,
                valor: item.valor,
            });
        });
    }
This is how I'm currently building the DataTable:

Code: Select all

    <Datagrid striped={true} value={registros}
        globalFilter={globalFilter}
        emptyMessage="Nenhum registro encontrado.">
        <Column field="concedente" header="Concedente" sortable />
        <Column field="tipoConcessao" header="Tipo Concessão" sortable />
        <Column field="edital" header="Edital" sortable />
        <Column header="Processos" sortable>
            {/*I guess something must go in here*/}
        </Column>
        <Column field="servico" header="Serviço" sortable />
        <Column field="vigencia" header="Vigência" sortable />
        <Column field="situacao" header="Situação" sortable />
        <Column field="valor" header="Valor" sortable />
    </Datagrid>
                            
If you need any additional info I will be happy to provide it.

paternostrox
Posts: 2
Joined: 07 Nov 2022, 23:06

08 Nov 2022, 23:29

For anyone wondering, I solved it by setting a template for the Column body, like this:

Code: Select all

    const processosTemplate = (registroRow: IRegistro) => {
        if (_.isEmpty(registroRow.processos) || registroRow.processos[0].link == "-") {
            return <span>-</span>
        }

        return (
            <>
                {
                    registroRow.processos.map((processo) =>
                        <div>
                            <a href={processo.link} target="_blank">
                                {processo.numero}
                            </a>
                        </div>
                    )
                }
            </>
        );
    };
And then I called it in my datatable:

Code: Select all

<Datagrid paginator striped={true} value={registros}
            globalFilter={globalFilter}
            rows={registros.length}
            currentPageReportTemplate="Mostrando de {first} até {rows} de {totalRecords} registros"
            paginatorTemplate="CurrentPageReport"
            emptyMessage="Nenhum registro encontrado.">
            <Column field="concedente" header="Concedente" sortable />
            <Column field="tipoConcessao" header="Tipo Concessão" sortable />
            <Column field="edital" header="Edital" sortable />
            <Column field="processos" header="Processos" body={processosTemplate} sortable />
            <Column field="servico" header="Serviço" sortable />
            <Column field="vigencia" header="Vigência" sortable />
            <Column field="situacao" header="Situação" sortable />
            <Column field="valor" header="Valor" sortable />
        </Datagrid>

Melloware
Posts: 3373
Joined: 22 Apr 2013, 15:48

13 Nov 2022, 14:43

Template is exactly how you do this to put a link in a column or any custom rendering in a column.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 12.0.0 / PF Extensions 12.0.1
PrimeReact 8.6.1

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest