Using PrimeReact's DataTable: https://primereact.org/datatable/
Using the expandedRows functionality available in the component, you can retrieve the the row within the expansion (or in the main table) by using props coming from the DataTable.
Example:
<DataTable value={rootList}>
<Column body={buttonAction} />
</DataTable>
const buttonAction = (data: any, props: any) => {
return <Button type="button"
onClick={(e) => {
// props contains the row within the expansion, NOT with row was expanded
}}
></Button>;
};
So if you have a row representing a container, and an expansion that displays a list of items within the container with buttons attached (for example, a delete button).
How do you determine which container the row which a button is selected, is in?
An example usage would be crafting a delete message for an API that uses the container AND the row that was selected in the request.
What is the correct method to do this?
Props passed to the expansion only contain the information on the rows.
It is possible to determine the row WITHIN the expansion using originalList.at(props.rowIndex)
but no way to determine where the button is located.
A potential solution is to only allow one expansion at a time, that way the expandedRow root can simply be used, but I could not find an optimal way to limit expansion through the PrimeReact API.
You can limit it to only having one expanded. I do this here is some psuedocode
const [expandedRows, setExpandedRows] = useState<DataTableExpandedRows>();
const onRowExpand = (event: DataTableRowEventParams) => {
doExpandRow(event.data);
};
const doExpandRow = (data: YourRowObject) => {
const expandRow: { [key: string]: boolean } = {};
expandRow[`${data.id}`] = true;
setExpandedRows(expandRow);
};
<DataTable
dataKey="id"
expandedRows={expandedRows}
onRowCollapse={() => setExpandedRows(undefined)}
onRowExpand={onRowExpand}
...
>