Link as DataTable Column

[paternostrox]

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]

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]

Template is exactly how you do this to put a link in a column or any custom rendering in a column.