diff --git a/src/components/m-table-body-row.js b/src/components/m-table-body-row.js
index a5092200..f8951d58 100644
--- a/src/components/m-table-body-row.js
+++ b/src/components/m-table-body-row.js
@@ -5,7 +5,7 @@ import TableRow from '@material-ui/core/TableRow';
import IconButton from '@material-ui/core/IconButton';
import Icon from '@material-ui/core/Icon';
import Tooltip from '@material-ui/core/Tooltip';
-import Collapse from '@material-ui/core/Collapse';
+import { MTableDetailPanel } from './m-table-detailpanel';
import PropTypes from 'prop-types';
import * as CommonValues from '../utils/common-values';
import { useDoubleClick } from '../utils/hooks/useDoubleClick';
@@ -358,9 +358,7 @@ export default function MTableBodyRow(props) {
};
const getStyle = (index, level) => {
- let style = {
- transition: 'all ease 300ms'
- };
+ let style = {};
if (typeof props.options.rowStyle === 'function') {
style = {
@@ -439,7 +437,6 @@ export default function MTableBodyRow(props) {
/>
);
});
-
return (
<>
{renderColumns}
-
- {props.options.detailPanelOffset.left > 0 && (
-
- )}
-
- {(typeof props.detailPanel === 'function') &&
-
- {props.detailPanel(props.data)}
-
- }
- {(typeof props.detailPanel === 'object') &&
- props.detailPanel.map((panel, index) => {
- return (
-
- {panel.render(props.data)}
-
- )
- })
- }
-
-
+
+ {props.options.detailPanelOffset.left > 0 && (
+
+ )}
+
+
{props.data.tableData.childRows &&
props.data.tableData.isTreeExpanded &&
props.data.tableData.childRows.map((data, index) => {
diff --git a/src/components/m-table-detailpanel.js b/src/components/m-table-detailpanel.js
new file mode 100644
index 00000000..fb5a00c0
--- /dev/null
+++ b/src/components/m-table-detailpanel.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { TableCell, Collapse } from '@material-ui/core';
+
+function MTableDetailPanel(props) {
+ const [isOpen, setOpen] = React.useState(false);
+ const renderRef = React.useRef();
+ React.useEffect(() => {
+ const shouldOpen = Boolean(
+ props.data.tableData && props.data.tableData.showDetailPanel
+ );
+ setTimeout(() => {
+ setOpen(shouldOpen);
+ setTimeout(() => {
+ if (!shouldOpen) {
+ renderRef.current = null;
+ }
+ }, 100);
+ }, 5);
+ if (shouldOpen) {
+ if (typeof props.detailPanel === 'function') {
+ renderRef.current = props.detailPanel;
+ } else {
+ renderRef.current = props.detailPanel
+ ? props.detailPanel.find(
+ (panel) =>
+ panel.render.toString() ===
+ (props.data.tableData.showDetailPanel || '').toString()
+ )
+ : undefined;
+ renderRef.current = renderRef.current ? renderRef.current.render : null;
+ }
+ }
+ }, [props.data.tableData.showDetailPanel]);
+ return (
+
+
+ {renderRef.current && renderRef.current(props.data)}
+
+
+ );
+}
+
+export { MTableDetailPanel };