implementation of datatable

2024-04-16 11:45:14 +03:30
parent 78548e89e7
commit a8e28a4f8c
29 changed files with 2983 additions and 2 deletions
--- a/src/core/components/DataTable/body/TableDetailPanel.js
+++ b/src/core/components/DataTable/body/TableDetailPanel.js
@@ -0,0 +1,93 @@
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Collapse, TableCell, TableRow } from "@mui/material";
+
+const DataTable_TableDetailPanel = ({
+    parentRowRef,
+    row,
+    rowVirtualizer,
+    staticRowIndex,
+    table,
+    virtualRow,
+    ...rest
+}) => {
+    const {
+        getState,
+        getVisibleLeafColumns,
+        options: {
+            layoutMode,
+            mrtTheme: { baseBackgroundColor },
+            muiDetailPanelProps,
+            muiTableBodyRowProps,
+            renderDetailPanel,
+        },
+    } = table;
+    const { isLoading } = getState();
+
+
+    const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+        isDetailPanel: true,
+        row,
+        staticRowIndex,
+        table,
+    });
+
+    const tableCellProps = {
+        ...parseFromValuesOrFunc(muiDetailPanelProps, {
+            row,
+            table,
+        }),
+        ...rest,
+    };
+
+    const DetailPanel = !isLoading && renderDetailPanel?.({ row, table });
+
+    return (
+        <TableRow
+            className="Mui-TableBodyCell-DetailPanel"
+            data-index={renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex}
+            ref={(node) => {
+                if (node) {
+                    rowVirtualizer?.measureElement?.(node);
+                }
+            }}
+            {...tableRowProps}
+            sx={(theme) => ({
+                display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+                position: virtualRow ? 'absolute' : undefined,
+                top: virtualRow
+                    ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
+                    : undefined,
+                transform: virtualRow
+                    ? `translateY(${virtualRow?.start}px)`
+                    : undefined,
+                width: '100%',
+                ...(parseFromValuesOrFunc(tableRowProps?.sx, theme)),
+            })}
+        >
+            <TableCell
+                className="Mui-TableBodyCell-DetailPanel"
+                colSpan={getVisibleLeafColumns().length}
+                {...tableCellProps}
+                sx={(theme) => ({
+                    backgroundColor: virtualRow ? baseBackgroundColor : undefined,
+                    borderBottom: !row.getIsExpanded() ? 'none' : undefined,
+                    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+                    py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,
+                    transition: !virtualRow ? 'all 150ms ease-in-out' : undefined,
+                    width: `100%`,
+                    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme)),
+                })}
+            >
+                {virtualRow ? (
+                    row.getIsExpanded() && DetailPanel
+                ) : (
+                    <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>
+                        {DetailPanel}
+                    </Collapse>
+                )}
+            </TableCell>
+        </TableRow>
+    );
+
+}
+export default DataTable_TableDetailPanel