DataTable expanded rows alignment

[dimoiuBogdan]

Hello, we are working with PrimeReact Datatables for 2 years now. The client requests the expanded "subtable" to be aligned with the main rows. So for example, having columns of names, emails and phone numbers, and when you expand a certain row, the expanded elements underneath should be aligned with their main ones. So names under names, emails under emails and so on.

How can this be achieved? And also, can it be combined with resizing and reordering of columns?

[sja-cslab]

That won't work with the default expandable feature. If you were to ask me to build this, I would say it's a bad idea. However, we all know how clients are...

So, I would implement it myself based on the normal Datatable. The parent elements would get an expanded property, which I would use to render the children as "normal" items. For example, if parent.id = 1 and parent.expanded is true, I would add the children of that parent to the datatable's normal data.

Use the row template to show/hide the expand icon. It's not a lot of logic to bring the children into the datatable or to hide the icon.

What's a bit tricky is the fact that you want to sort them. Would you like to keep them together with the parent, or do you want to handle them as "normal" items?

[sja-cslab]

Here's a short, not tested and AI generated code block to give you a brief idea what I'm talking about:

Expand to see code:

AI generated code to get an idea

import React, { useState } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Button } from 'primereact/button';

// Initial Data
const initialData = [
    { id: 1, name: 'Parent 1', expanded: false, children: [
        { id: 101, name: 'Child 1.1' },
        { id: 102, name: 'Child 1.2' }
    ]},
    { id: 2, name: 'Parent 2', expanded: false, children: [
        { id: 201, name: 'Child 2.1' },
        { id: 202, name: 'Child 2.2' }
    ]}
];

const App = () => {
    const [datatable, setDatatable] = useState(initialData);

    const flattenDatatable = (data) => {
        let result = [];
        data.forEach(parent => {
            result.push(parent);
            if (parent.expanded) {
                parent.children.forEach(child => {
                    result.push({ ...child, parentId: parent.id });
                });
            }
        });
        return result;
    };

    const toggleExpanded = (parentId) => {
        setDatatable(prevDatatable => {
            return prevDatatable.map(parent => {
                if (parent.id === parentId) {
                    parent.expanded = !parent.expanded;
                }
                return parent;
            });
        });
    };

    const flatDatatable = flattenDatatable(datatable);

    const rowTemplate = (rowData) => {
        if (rowData.children) {
            return (
                <Button 
                    icon={rowData.expanded ? 'pi pi-minus' : 'pi pi-plus'}
                    onClick={() => toggleExpanded(rowData.id)}
                />
            );
        }
        return null;
    };

    const renderRowExpansionTemplate = (data) => {
        return (
            <React.Fragment>
                <tr>
                    <td>{data.name}</td>
                </tr>
                {data.expanded && data.children.map(child => (
                    <tr key={child.id}>
                        <td style={{ paddingLeft: '2em' }}>{child.name}</td>
                    </tr>
                ))}
            </React.Fragment>
        );
    };

    return (
        <div>
            <DataTable value={flatDatatable}>
                <Column body={rowTemplate} />
                <Column field="name" header="Name" />
            </DataTable>
        </div>
    );
};

export default App;