When using 3 tables each that are nested within each other the last table when expanding all the rows seems to expand them all at once. I guess this is because of a key issue.

[maxsilvaweb]

When using 3 tables each that are nested within each other the last table when expanding all the rows seems to expand them all at once. I guess this is because of a key issue.

Has anybody else nested 3 tables and noticed this expand problem in the lowest table?

[maxsilvaweb]

ie:-

`/* eslint-disable */
import * as React from 'react';

import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider from 'react-bootstrap-table2-toolkit';
import paginationFactory from 'react-bootstrap-table2-paginator';

import { getPagination } from '../../helpers/pagination';

import {
getExpandRow,
getExpandRowClosed,
getExpandAll,
getExpandAllClosed,
getExpandAllClosedNoData,
} from '../../helpers/table';

interface Props {
title?: string;
tableData: any;
keyField: string;
subKeyField: string;
expandRowData: any;
expandSubRowData: any;
}

const Table = ({
title,
tableData,
keyField,
subKeyField,
expandRowData,
expandSubRowData,
}: Props) => {
const getTitle = title || null;

const {
    rows,
    columns,
    name,
} = tableData;

const {
    columns: expandRowDataColumns,
} = expandRowData;

const {
    columns: expandSubRowDataColumns,
} = expandSubRowData;

const noDataIndicicationMsg = "Showing '0' data.";

const renderTitle = () => {
    if (getTitle) {
        return (<h3 className="table-title">{getTitle}</h3>);
    }
};

const expandSubRow = () => {
    return ({
        showExpandColumn: true,
        expandHeaderColumnRenderer: ({ isAnyExpands }: any) => {
            if (isAnyExpands) {
                return getExpandAllClosed;
            }
            
            return (rows.length !== 0)
            ? getExpandAll
            : getExpandAllClosedNoData;
        },
        expandColumnRenderer: ({ expanded }: any) => {
            if (expanded) {
                return getExpandRowClosed;
            }
            return getExpandRow;
        },
        renderer: (row: any) => {
            return (
                <>
                    <BootstrapTable
                      hover
                      keyField="exception"
                      data={row.exceptions}
                      columns={expandSubRowDataColumns}
                      noDataIndication={noDataIndicicationMsg}
                      classes="subTable"
                    />
                </>
            );
        },
    });
};

const expandRow = () => {
    return ({
        showExpandColumn: true,
        expandHeaderColumnRenderer: ({ isAnyExpands }: any) => {
            if (isAnyExpands) {
                return getExpandAllClosed;
            }

            return (rows.length !== 0)
            ? getExpandAll
            : getExpandAllClosedNoData;
        },
        expandColumnRenderer: ({ expanded }: any) => {
            if (expanded) {
                return getExpandRowClosed;
            }
            return getExpandRow;
        },
        renderer: (row: any) => {
            Object.entries(row.properties).forEach((item: any) => {
                if (item[1].exceptions.length === 0) {
                    row.hasExceptions = false;
                } else {
                    row.hasExceptions = true;
                }
            });

            return (
                <>
                    {row.hasExceptions ? (
                        <BootstrapTable
                          hover
                          data={row.properties}
                          keyField={keyField}
                          subKeyField={subKeyField}
                          expandRow={expandSubRow()}
                          columns={expandRowDataColumns}
                          noDataIndication={noDataIndicicationMsg}
                          classes="expandTable"
                        />
                    ) : (
                        <BootstrapTable
                          hover
                          data={row.properties}
                          keyField={keyField}
                          subKeyField={subKeyField}
                          columns={expandRowDataColumns}
                          noDataIndication={noDataIndicicationMsg}
                          classes="expandTable"
                        />
                    )}
                </>
            );
        },
    });
};

return (
    <>
        <ToolkitProvider
          data={rows}
          columns={columns}
          keyField={keyField}
        >
        {
           (props: any) => (
                <>
                    { renderTitle() }
                    <BootstrapTable
                      hover
                      {...props.baseProps}
                      expandRow={expandRow()}
                      headerClasses="report-header"
                      footerClasses="report-footer"
                      noDataIndication={`Showing '0' ${name} rows.`}
                      pagination={paginationFactory(getPagination(rows))}
                    />
                </>
            )
        }
        </ToolkitProvider>
    </>
);

};

export default Table;
`

@AllenFang

[AllenFang]

@maxsilvauk i'm sorry about lately reply, would you please give me an example on codesandbox so that I can reproduce this issue easily. Just keep it simple and minimal, thanks

[maxsilvaweb]

@AllenFang No problem thank-you in advance for responding I have solved the issue now this can be closed.